The bootstrap classes can be used in template files for setting the width of particular divs across all screen width.
This can be done instead of using the @media tag in CSS. While updating the theme or when creating new HTML forms, This can be used.
Here are the width and corresponding tags are given below.
The Bootstrap grid system has four classes:
- xs (for phones – screens less than 768px wide)
- sm (for tablets – screens equal to or greater than 768px wide)
- md (for small laptops – screens equal to or greater than 992px wide)
- lg (for laptops and desktops – screens equal to or greater than 1200px wide)
Grid Options
The following table summarizes how the Bootstrap grid system works across multiple devices:
| Extra small <768px | Small >=768px | Medium >=992px | Large >=1200px | |
|---|---|---|---|---|
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
Example:
<div class="container">
<h1>Grid</h1>
<p>This example demonstrates a 50%/50% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="col-sm-6" style="background-color:pink;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
</div>
</div>
</div>This way we can use the class names in different UI designs while working with various screen sizes