Hola a ver si me pueden ayudar, estoy usando un carousel en bootstrap y resulta que quiero que el contenido de texto y producto me quede centrado en la grilla de bootstrap de 1170px. Use a modo de ejemplo el siguiente código que adjunto. La idea de este carousel es que quede como la el problema surje que cada imagen tiene un caption con el contenido de texto y un producto flotado. Estos caption tienen container pero no me da respuesta y no me centra el contenido.
/*
-----------------------------------
Code snippet by @maridlcrmn
Credits images: www.unsplash.com
-----------------------------------
*/
#thumbnail-preview-indicators {
position: relative;
overflow: hidden;
}
#thumbnail-preview-indicators .slides .slide-1,
#thumbnail-preview-indicators .slides .slide-2,
#thumbnail-preview-indicators .slides .slide-3 {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
#thumbnail-preview-indicators,
#thumbnail-preview-indicators .slides,
#thumbnail-preview-indicators .slides .slide-1,
#thumbnail-preview-indicators .slides .slide-2,
#thumbnail-preview-indicators .slides .slide-3 {
height: 480px;
}
#thumbnail-preview-indicators .slides .slide-1 {
background-image: url(https://s3.amazonaws.com/ooomf-com-files/wdXqHcTwSTmLuKOGz92L_Landscape.jpg);
}
#thumbnail-preview-indicators .slides .slide-2 {
background-image: url(https://s3.amazonaws.com/ooomf-com-files/tU3ptNgGSP6U2fE67Gvy_SYDNEY-162.jpg);
}
#thumbnail-preview-indicators .slides .slide-3 {
background-image: url(https://s3.amazonaws.com/ooomf-com-files/mtNrf7oxS4uSxTzMBWfQ_DSC_0043.jpg);
}
#thumbnail-preview-indicators .carousel-inner .item .carousel-caption {
top: 20%;
bottom: inherit;
}
#thumbnail-preview-indicators .carousel-indicators li,
#thumbnail-preview-indicators .carousel-indicators li.active {
position: relative;
width: 100px;
height: 8px;
}
#thumbnail-preview-indicators .carousel-indicators li > .thumbnail {
position: absolute;
top: 0;
width: 100px;
display: none;
opacity: 0;
left: 50%;
margin-top: -80px;
margin-left: -50px;
}
#thumbnail-preview-indicators .carousel-indicators li:hover > .thumbnail,
#thumbnail-preview-indicators .carousel-indicators li.active > .thumbnail {
display: block;
opacity: .8;
}
#thumbnail-preview-indicators .carousel-indicators li.active > .thumbnail:hover{
opacity: 1;
}
@media screen and (max-width : 480px) {
#thumbnail-preview-indicators .carousel-indicators li,
#thumbnail-preview-indicators .carousel-indicators li.active {
width: 50px;
height: 8px;
position: relative;
}
#thumbnail-preview-indicators .carousel-indicators li > .thumbnail {
width: 50px;
left: 50%;
margin-top: -50px;
margin-left: -25px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="thumbnail-preview-indicators" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#thumbnail-preview-indicators" data-slide-to="0" class="active">
<div class="thumbnail">
<img class="img-responsive" src="https://s3.amazonaws.com/ooomf-com-files/wdXqHcTwSTmLuKOGz92L_Landscape.jpg">
</div>
</li>
<li data-target="#thumbnail-preview-indicators" data-slide-to="1">
<div class="thumbnail">
<img class="img-responsive" src="https://s3.amazonaws.com/ooomf-com-files/tU3ptNgGSP6U2fE67Gvy_SYDNEY-162.jpg">
</div>
</li>
<li data-target="#thumbnail-preview-indicators" data-slide-to="2">
<div class="thumbnail">
<img class="img-responsive" src="https://s3.amazonaws.com/ooomf-com-files/mtNrf7oxS4uSxTzMBWfQ_DSC_0043.jpg">
</div>
</li>
</ol>
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
<div class="container">
<div class="carousel-caption">
<div class="carousel-caption">
<div class="col-lg-7">
<h1>DATE EL GUSTO,</h1>
<span class="title-rotador">sin Gluten.</span>
<br>
<a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a>
</div>
<div class="col-lg-5 imagen-producto">
<img src="images/galletitas-rotador.png">
</div>
</div>
</div>
</div>
</div>
<div class="item slides">
<div class="slide-2"></div>
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item slides">
<div class="slide-3"></div>
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#thumbnail-preview-indicators" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#thumbnail-preview-indicators" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>