CODEWITHSUNDEEP
twitter-bootstrapgrid
Stathis G.
Stathis G.

Reputation: 247

bootstrap full width column

I've had this question for a while, yet I cannot find a reasonable answer.

Bootstrap states the following: Content should be placed within columns, and only columns may be immediate children of rows.

But when I have a row and need to place a full width div underneath what should I do? Should I put a col-xs-12? For example

<div class="row">
    <h1>Title</h1>
    <div class="col-md-6">Some content here</div>
    <div class="col-md-6">Other content here</div>
</div>

The h1 is full width.

According to bootstrap it is not correct to do this, so how should I do it? Should I place the h1 inside a column or not?

Upvotes: 16

Views: 60338

Answers (2)

user3589620
user3589620

Reputation: 

<div class="row">
    <h1>Title</h1>
</div>
<div class="row">
    <div class="col-md-6">Some content here</div>
    <div class="col-md-6">Other content here</div>
</div>

You should use cols, if you don't know what you are doing. The thing is, that cols have a padding-left 15px and a padding-right 15px. And rows have margin-left -15px and margin-right -15px. If you are using divs in rows without cols:

<div class="row">
    <div>
        content
    </div>
</div>

then you get a problem with left and rightside indentation, if you mix it up with: 

<div class="row">
    <div class="col-...">
        content
    </div>
</div>

Therefore it's always better to do it with cols.

Upvotes: 5

JohnnyHK
JohnnyHK

Reputation: 312179

A row is a single horizontal group of columns, so the h1 element belongs above the row:

<h1>Title</h1>
<div class="row">
    <div class="col-md-6">Some content here</div>
    <div class="col-md-6">Other content here</div>
</div>

Or in its own row that uses a single full-width column, but it's not necessary:

<div class="row">
    <div class="col-md-12">
        <h1>Title</h1>
    </div>
</div>
<div class="row">
    <div class="col-md-6">Some content here</div>
    <div class="col-md-6">Other content here</div>
</div>

Upvotes: 15

Related Questions