CODEWITHSUNDEEP
csstwitter-bootstrap
Matthew Layton
Matthew Layton

Reputation: 42260

Bootstrap column nesting

I have the following column layout in Bootstrap

<div class="container">
    <div class="row">
        <div class="col-sm-4">
        </div>
        <div class="col-sm-8">
        </div>
    </div>
</div>

This creates a 1/3rd column on the left and a 2/3rds column on the left.

enter image description here

What I actually want is to layer the columns so the left (col-sm-4) column would sit on top of a col-sm-12 column, something like this:

enter image description here

Is this possible with Bootstrap's grid?

Upvotes: 2

Views: 801

Answers (3)

Sean
Sean

Reputation: 8031

You can definitely nest columns, but be sure to include a new .row element for each level of nesting. This avoids having to add additional classes and CSS as previous answers have suggested.

What most people don't realize is that Bootstrap's .row and .col-* classes work together to clear floats and even out padding.

No CSS needed:

<div class="container">
    <div class="row">
        <!-- 12 col element -->
        <div class="col-sm-12">
            <!-- additional row element -->
            <div class="row">
                <!-- 4 col element -->
                <div class="col-sm-4">
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 2

Karl Dawson
Karl Dawson

Reputation: 977

This is what I came up with:

.col-sm-12 {
  background: #ddd;
}

.your-bs-override {
  margin-right: 15px;
  margin-left: -15px;
  background: #000;
  height: 100px; // just to demo better
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-sm-12">
          inner col-sm-12
          <div class="col-sm-4 your-bs-override">
            inner col-sm-4
          </div>
        </div>
    </div>
</div>

Understanding the context may help refine the answers provided so far.

Upvotes: -1

StudioTime
StudioTime

Reputation: 23979

Something like this:

.outer {
  padding: 0;
}

.inner {
  margin: 0;
}

<div class="container">
    <div class="row">
        <div class="col-sm-12 outer">
          <div class="col-sm-4 inner">
          </div>
        </div>

    </div>
</div>

Upvotes: 0

Related Questions