CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jake Avacado
Jake Avacado

Reputation: 1

bootstrap grid system is not working properly

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

Upvotes: 0

Views: 121

Answers (1)

Senjuti Mahapatra
Senjuti Mahapatra

Reputation: 2590

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

Upvotes: 1

Related Questions