bootstrap grid system is not working properly

Question

I'm working on a bootstrap grid system.

From my understanding:

<div class="container">
  <div class="row">
     <div class="col">
     1 of 3
     </div>
     <div class="col-6">
      2 of 3 (wider)
     </div>
      <div class="col">
  3 of 3
</div>

is supposed to show:

1 of 3 2 of 3(wider) 3of3

but when I opened it with Chrome, I see:

1 of 3
2 of 3 (wider)
3 of 3

Answer 1

That's because you have not used proper class names.The class name should be like col-lg-6 or col-md-6 and so on.

col-*-* is used for Responsive grid ( span 1-12 column ). Extra small devices Phones ( < 768px ), Small devices Tablets ( ≥768px ), Medium devices Desktops ( ≥992px ), Large devices Desktops ( ≥1200px ). Column values can be 1-12 .

---

You will get a complete list of bootstrap classes and there description here

Try this:

<div class="container">
 <div class="row">
  <div class="col-lg-3">
  1 of 3
  </div>
  <div class="col-lg-6">
  2 of 3 (wider)
  </div>
  <div class="col-lg-3">
  3 of 3
  </div>
 </div>
 </div>

Here is the Demo