Scribd
Upload
110 views2 pages

Grid Classes: .Col-.Col-Sm - .Col-Md - .Col-Lg - .Col-Xl

The Bootstrap grid system uses a series of classes like .col-sm- to control the layout and responsiveness of elements on different screen sizes. It is based on a 12 column layout, where columns can be specified as a class like .col-sm-4 to take up 4 of 12 columns on small screens and above. The .row class establishes a row to contain columns, which default to equal widths if no classes are specified.

Uploaded by

testotestic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
110 views2 pages

Grid Classes: .Col-.Col-Sm - .Col-Md - .Col-Lg - .Col-Xl

The Bootstrap grid system uses a series of classes like .col-sm- to control the layout and responsiveness of elements on different screen sizes. It is based on a 12 column layout, where columns can be specified as a class like .col-sm-4 to take up 4 of 12 columns on small screens and above. The .row class establishes a row to contain columns, which default to equal widths if no classes are specified.

Uploaded by

testotestic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

BOOTSTRAP INTRO

Grid Classes
The Bootstrap 4 grid system has five classes:

 .col- (extra small devices - screen width less than 576px)


 .col-sm- (small devices - screen width equal to or greater than 576px)
 .col-md- (medium devices - screen width equal to or greater than
768px)
 .col-lg- (large devices - screen width equal to or greater than 992px)
 .col-xl- (xlarge devices - screen width equal to or greater than
1200px)

Basic Structure of a Bootstrap 4 Grid


<!-- Control the column width, and how they should appear on different
devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>

<!-- Or let Bootstrap automatically handle the layout -->


<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

First example: create a row (<div class="row">). Then, add the desired
number of columns (tags with appropriate .col-*-* classes). The first star
(*) represents the responsiveness: sm, md, lg or xl, while the second star
represents a number, which should add up to 12 for each row.

Second example: instead of adding a number to each col, let bootstrap


handle the layout, to create equal width columns: two "col" elements = 50%
width to each col. three cols = 33.33% width to each col. four cols = 25%
width, etc. You can also use .col-sm|md|lg|xl to make the columns
responsive.
Example

<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>

Example

You might also like