Reputation: 247
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
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
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