Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Lucas Santos
Lucas Santos
19,315 Points

Why is my Bootstrap carousel-caption class not centering

Hi im playing around with bootstrap and I have a col-sm-8 with a carousel inside with the carousel-caption class that gives the carousel caption. For some reason it is not centering in the col-sm-8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Latest compiled and minified CSS -->
<link href="css/bootstrap.css" rel="stylesheet" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Slide</title>

<style type="text/css">
.fl {
    height: 300px;
    background:#06F;
    }
    .cn {
        border:1px solid #000;
        height:100px;
        display:block;
        }

        .cn1 {
            background:#F60;
            }
            .cn2 {
            background:#C00;
            }
            .cn3 {
            background:#FC3;
            }
                p, h1{
                color:#FFF; 
                    }
</style>
</head>

<body>
<div class="container" style="margin-top: 100px;">
<div class="row">
<div class="col-sm-8 fl">


<div id="arcade-carousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <div class="container">
  <ol class="carousel-indicators">
    <li data-target="#arcade-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#arcade-carousel" data-slide-to="1"></li>
    <li data-target="#arcade-carousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner fl">

  <div class="container">

    <div class="item active nnn">
    <div class="carousel-caption">
     <h1>The Loren Ipsim</h1>
     <p>This is the best product in the market yet, don't miss out and come grab a copy today!</p>
     <a class="btn btn-default btn-lg bs" href="#">Buy Now</a>
     </div>
    </div>


    <div class="item">
    <div class="carousel-caption">
     <h1>The Loren Ipsim</h1>
     <p>This is the best product in the market yet, don't miss out and come grab a copy today!</p>
     <a class="btn btn-default btn-lg bs" href="#">Buy Now</a>
     </div>
    </div>


    <div class="item">
    <div class="carousel-caption">
     <h1>The Loren Ipsim</h1>
     <p>This is the best product in the market yet, don't miss out and come grab a copy today!</p>
     <a class="btn btn-default btn-lg bs" href="#">Buy Now</a>
     </div>
    </div>


    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#arcade-carousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#arcade-carousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
</div>



</div><!---COL 6 END--->
<div class="col-sm-4">

<div class="row cn cn1">Content 1</div>
<div class="row cn cn2">Content 2</div>
<div class="row cn cn3">Content 3</div>

</div><!---COL 6 END--->
</div><!---ROW END------>
</div><!---CONTAINER END--->
</body>
<script src="bootstrap/docs/assets/js/jquery.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap.js"></script>
</html>

which gives me this: http://lucazdesign.com/test/t.png

I know bootstrap would automatically center it so im assuming there's something wrong.

2 Answers

Sander de Wijs
PLUS
Sander de Wijs
Courses Plus Student 22,267 Points
Sander de Wijs
Sander de Wijs
Courses Plus Student 22,267 Points

I would just add the following CSS to the .carousel-caption class:

.carousel-caption{ text-align: center; }

Lucas Santos
Lucas Santos
19,315 Points

That doesn't work even if I call !important to override any other styles, it stays in the center of the 12 colum instead of the 8 for some reason. And the weird part the slide navigation and arrows are within the col-8 just fine.

Sander de Wijs
PLUS
Sander de Wijs
Courses Plus Student 22,267 Points
Sander de Wijs
Sander de Wijs
Courses Plus Student 22,267 Points

I see you wrap your carousel indicators and the carousel wrapper into containers. That is not nessesary and could trigger some strange behaviour. Can you try removing those and see what happens?

Lucas Santos
Lucas Santos
19,315 Points

if I take out both it throws everything off from those 3 contents on the right below the slider and the slider doesn't look rite. So I just took out the container after carousel-inner and nothing happened it's still the same.