CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
winixxee
winixxee

Reputation: 564

bootstrap grid with bootstrap carousel messed up, bootstrap carousel bothers the grid system

This is what I'm trying to do. I want bootstrap carousel to have col-sm-8. and I want to put a table that shows top stories in col-sm-4. And then below those two. I want to have three col-sm-4 that contains the list of categories. Problem I'm having is carousel invades col-sm-4. It should end its space in col-sm-8 but it goes there any way. Also I'm not sure how to have col-sm-8 and col-sm-4 in the top section. and below col-sm-4 col-sm-4 col-sm-4. What I tried was put div around top section. and one div for below section. But this doesn't work. As I'm a noob, I would appreciate any kind of advice or help. Thank you.

<div>
<div class="col-sm-8">
<div class='carousel slide' id="myCarousel" style="width:1400px; margin:0 auto">

    <ol class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
<li class="active" data-slide-to="1" data-target="#myCarousel"></li>
<li class="active" data-slide-to="2" data-target="#myCarousel"></li>
    </ol>


    <div class="carousel-inner">
        <div class="item active" id="slide1">
                                <img src = "http://i.imgur.com/SQ691ZO.jpg" />

            <div class="carousel-caption">
                <h4>hello</h4>
                <p>hi you</p>
            </div>
        </div>

    <div class="item" id="slide2">
                            <img src = "http://i.imgur.com/SQ691ZO.jpg" />

            <div class="carousel-caption">
                <h4>hello</h4>
                <p>hi you</p>
            </div>
        </div>

    <div class="item" id="slide3">
                            <img src = "http://i.imgur.com/SQ691ZO.jpg" />

            <div class="carousel-caption">
                <h4>hello</h4>
                <p>hi you</p>
            </div>
        </div>
        </div>

<a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>


</div>
</div>
<div class=col-sm-4>
    hello you
</div>
</div>

<div>
<div class=col-sm-4>
    category one
</div>
<div class=col-sm-4>
    category two
</div>
<div class=col-sm-4>
    category three
</div>

Upvotes: 0

Views: 2774

Answers (1)

Marian Rick
Marian Rick

Reputation: 3440

The bootstrap grid system

The bootstrap grid has a certain setup you should use. First you create a container, this can be either fixed with .container or fluid (from the left to the right side) .container-fluid.

Inside the container you can create .rows, to nest columns in it.

A basic setup for your needs could be:

<div class="container">
  <div class="row">
    <div class="col-xs-8">8 Columns</div>
    <div class="col-xs-4">4 Columns</div>
  </div>
  <div class="row">
    <div class="col-xs-4">3 Columns</div>
    <div class="col-xs-4">3 Columns</div>
    <div class="col-xs-4">3 Columns </div>
  </div>
</div>

JSFIDDLE DEMO

You can read about it on bootstrap grid introduction.

Adopt grid system

If you adapt this to your code it could look like this:

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <div class='carousel slide' id="myCarousel">
         <!--slider content -->
      </div>
    </div>
    <div class=col-sm-4>
      hello you
    </div>
  </div>
  <!--.row-->

  <div class="row">
    <div class=col-sm-4>
      category one
    </div>
    <div class=col-sm-4>
      category two
    </div>
    <div class=col-sm-4>
      category three
    </div>
  </div>
</div>
<!--.container-->

JSFIDDLE DEMO 2

Slider width

To fix the slider, which gets too big, you have to remove style="width:1400px; margin:0 auto" from its div. Afterwards it should adjust its size automatically.

Upvotes: 1

Related Questions