CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
nonopolarity
nonopolarity

Reputation: 151006

What is the purpose of col-lg-12 in Bootstrap?

I saw a video where the author will just use

<div class="col-lg-12">
     some content
</div>

inside of a div.container and a div.row. What is the purpose of that, if that is the only item in the row? I thought if you want something to occupy a whole row, you might just list it as col-xs-12 so that it will affect all screen sizes. But if it is the only item, then won't it just automatically occupy all 12 columns? So why use that and why use lg?

Upvotes: 5

Views: 14040

Answers (3)

Krishna PrabhuGaonkar
Krishna PrabhuGaonkar

Reputation: 42

<div class="col-lg-12">
  some content
</div>

This basically means that the div should acquire entire width, when the page is being displayed on large devices(according to official documentation, devices with max-width of 1200px).

To understand this better, if you had to display the same div on say smaller screens for half the width then you would write as below:

 <div class="col-xs-6">
   some content
 </div>

or

  <div class="col-lg-12 col-xs-6">
   some content
  </div>

(note: both the above codes have the same end result).

Similarly if you want you can specify how your divisions should be displayed for smaller as well as medium devices.

Hope this helps :)

Upvotes: 2

Moid
Moid

Reputation: 1447

Grid system is nothing else than the width of a div for a particular screen width. And this width comes into effect when the content of the block exceeds the width that is was suppose to occupy.

div width along with media queries is what actually these col-*-* are. So col-lg-* comes into play when your screen width is more than 1200px. But having said that if your content is a single line it doesn't matter what col-*-12 you use.

Suppose you have a single line in your entire HTML page and you always want it to be 100%. So if wont want matter if you place it inside a col-xs-12or col-sm-12 or col-md-12 or col-lg-12. They all will occupy width:100%.

Grid system only provides ease of responsive web developement nothing else. Even you can define your own grid system.

Suppose you combine this col-lg-12 width another class of col-md-6 then for screen width less than 1200px it would only occupy 50% of the page width. Similarly for other classes, just a way to align and stack your content for your responsive web design.

Hope this helps.

Upvotes: 0

michael
michael

Reputation: 758

It's simply for consistency sake. .col-xs-12 and .col-xl-12 will appear visual identical regardless of viewport.

Upvotes: 0

Related Questions