CODEWITHSUNDEEP
twitter-bootstrap-3
Starkers
Starkers

Reputation: 10541

Nest cols in Bootstrap

Here I have 3 columns that span 100% of the page in total:

<div class = 'col-xs-4'>*</div>
<div class = 'col-xs-4'>*</div>
<div class = 'col-xs-4'>*</div>

However, there is no margin between them. I want a margin between them. How should I do this with bootstrap? I've tried nesting columns inside columns, but that doesn't work. A col-12 inside a col-4 adds up to col-12 in effect:

<div class = 'col-xs-4'>
    <div class = 'col-xs-12'></div>
</div>

I remember in the 960 grid you could nest grids.

Upvotes: 0

Views: 175

Answers (2)

Pinki
Pinki

Reputation: 1042

Here is what you need

<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <!-- 33% -->
            <div class="row">
                <div class="col-xs-12">
                    <!-- 33% -->
                </div>
                <div class="col-xs-4">
                    <!-- 11% -->
                </div>
                <div class="col-xs-4">
                    <!-- 11% -->
                </div>
                <div class="col-xs-4">
                    <!-- 11% -->
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

moodyjive
moodyjive

Reputation: 1807

One way to do this is to wrap the columns content with another div

HTML

<div class="row"> 
  <div class="col-xs-4"> 
   <div class="inner">Content</div>
  </div> 
  <div class="col-xs-4"> 
   <div class="inner">Content</div>
  </div> 
  <div class="col-xs-4"> 
   <div class="inner">Content</div>
  </div> 
</div>

CSS

.inner {
   background-color: #eee;
}

The default padding of the columns will create a margin between the columns.

Upvotes: 1

Related Questions