0

Let's say I have to nest three bootstrap col classes and the last one will be col-md-12 so it goes 100%. My question is, Is that ok to nest col-md-12 in one row like first example or do I need to create another row for col-md-12 ?

Eg 1

<div class="row">
 <div class="col-md-6">
  1
 </div>
<div class="col-md-6">
  2
 </div>
<div class="col-md-12">
  3
 </div>
</div>

or

Eg 2

<div class="row">
 <div class="col-md-6">
  1
 </div>
 <div class="col-md-6">
  2
 </div>
</div>

<div class="row">
 <div class="col-md-12">
  3
 </div>
</div>
Varsha Dhadge
  • 1,711
  • 14
  • 23
MarkNsu
  • 61
  • 7
  • 1
    I occasionally use the first setup if I have to for example show 3 columns along each other on desktop and below eachother on mobile. – Olaf Oct 22 '18 at 06:49
  • @MerajKhan — Nonsense, columns wrap within a row element. – Quentin Oct 22 '18 at 07:35
  • @Quentin I said 12 column grid system yeah here we can divide columns but the range up to the 12 limits not more than 12. – Mehraj Khan Oct 22 '18 at 07:54
  • 1
    @MarkNsu Do it any way you want, makes no odds as long as you understand that once bootstrap hits 12 cols it autowraps the next set. As a side note always build mobile first aka 'col-sm-12' then build up, it's much easier :) – NoOne Oct 22 '18 at 09:48

2 Answers2

1

It is absolutely fine to have more columns in a row than will fit in it. They will wrap.

What's more, this is essential to Bootstrap's approach to responsive design.

You might have something like:

<div class="row">
    <div class="col-sm-6 col-lg-3">…</div>
    <div class="col-sm-6 col-lg-3">…</div>
    <div class="col-sm-6 col-lg-3">…</div>
    <div class="col-sm-6 col-lg-3">…</div>
</div>

For a 4x1 layout on a large window and a 2x2 layout on a small window.

If you had to add a new .row container for each row, this would be impossible.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
-1

if you need the contents to be in the same Row then you can follow your example 1, else you may proceed to following example 2 of your post.

Both are correct,depends on your requirement which one you want to use.

First example will put your columns inside same row but second example will create a seperate row for your col-md-12

Hope that helps

Neeraj Kamat
  • 354
  • 3
  • 12
  • No bootstrap would autowrap the first example into a new row, a row can only have 12 columns when 12 is hit bootstrap creates a new row to put the next columns in. – NoOne Oct 22 '18 at 10:13