Putting Columns within columns using bootstrap

Question

I'm using the bootstrap grid system and have run into an issue. I want to make a section of a page that is divided down the center, with separate information on each side. My html looks like this.

<div class="container">
        <div class="friendly col-sm-12">
            <div class="col-sm-6">
                <div class="row">
                    <div class="col-sm-3">
                        <!--stuff goes here-->
                    </div>
                    <div class="col-sm-3">
                        <!--stuff goes here-->
                    </div>
                </div>
                <div class="friendly col-sm-6">
                    <div class="col-sm-3">
                        <!--bigger stuff goes here!-->
                </div>
            </div>
        </div>
    </div>

CSS

.friendly {
    display: inline-block;
}

The issue that I am having is that in order for the two larger divs to be inline, they have to be made smaller (like one a col-sm-4, and one a col-sm-6) and the col-sm-3s wont take up the whole col-sm-6. How do I put a column within a column properly and have everything be sized correctly? And shouldnt there just be basically 12 sections for me to dice up as I please? is there something that changes if I have a column in a column? Thanks

You have nested columns without the required row in between. It's not clear what structure you seek. — isherwood
– isherwood, Commented Dec 8, 2014 at 18:53
Nesting indeed requires a .row in between. I'm quite sure you can't set display: inline-block on <div>'s with bootstrap column classes on them. Are you looking for a layout like SIDEBAR (3x) | CONTENT (6x) | SIDEBAR (3x)? — ckuijjer
– ckuijjer, Commented Dec 8, 2014 at 18:58
Indeed, nesting columns without an intervening row layer is a Bootlint error. — cvrebert
– cvrebert, Commented Dec 9, 2014 at 1:42

isherwood · Accepted Answer · 2014-12-08 19:10:23Z

2

I'm not sure I understand what you're after, but it seems like a much simpler structure would do.

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <!--stuff goes here-->
        </div>

        <div class="col-sm-3">
            <!--stuff goes here-->
        </div>

        <div class="col-sm-6">
            <!--bigger stuff goes here!-->
        </div>
    </div>
</div>

This results in a layout like so:

| 25% | 25% |     50%     |

For what it's worth, here's the same layout with a nested row:

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="row">
                <div class="col-sm-6">
                    <!--stuff goes here-->
                </div>

                <div class="col-sm-6">
                    <!--stuff goes here-->
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <!--bigger stuff goes here!-->
        </div>
    </div>
</div>

Notice that the columns in each row level sum to 12 units.

edited Dec 8, 2014 at 19:10

answered Dec 8, 2014 at 18:57

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nils Johnson Over a year ago

Thank you! This cleared up a lot for me. I didn't realize you had to create new rows when nesting. I also didnt realize that, say if you had a row in a "col-sm-6", that column would again be divided up by 12.

Tim Lewis · Accepted Answer · 2014-12-08 19:22:18Z

2

Take a look at this example of nested column structures:

Bootply

<div class="container">
  <div class="well">
    <div class="col-xs-6">
      <div class="well">
        <div class="row">
          <div class="col-xs-3">
            <div class="well">

            </div>
          </div>
          <div class="col-xs-3">
            <div class="well">

            </div>
          </div>
          <div class="col-xs-6">
            <div class="well">

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
        <div class="row">
          <div class="col-xs-12">
            <div class="well">

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Note

The well class is used to show where the elements would be placed, but can be replaced with whatever you would like.

Hopefully this gives some insight.

Edit Too many containers, row will accomplish the same thing.

Cheers!

edited Dec 8, 2014 at 19:22

answered Dec 8, 2014 at 18:58

Tim Lewis

29.5k14 gold badges82 silver badges110 bronze badges

2 Comments

isherwood Over a year ago

What is the purpose of the inner .container-fluid element?

Tim Lewis Over a year ago

Hmm. You know, there might not actually be one. Edit In this case, there isn't one. I just derped.

Collectives™ on Stack Overflow

Putting Columns within columns using bootstrap

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related