Bs Grid Examples
Bootstrap Grid Examples
Below nosotros accept collected about examples of basic Bootstrap grid layouts.
Three Equal Columns
.col-sm-4
.col-sm-4
.col-sm-4
Example
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Three Unequal Columns
.col-sm-3
.col-sm-6
.col-sm-3
Example
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Two Unequal Columns
.col-sm-4
.col-sm-8
Example
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Two Columns With Two Nested Columns
The next lawsuit shows how to become 2 columns starting at tablets together with scaling to large desktops, alongside about other 2 columns (equal widths) inside the larger column (at mobile phones, these columns together with their nested columns volition stack):Example
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Mixed: Mobile And Desktop
The Bootstrap grid organisation has 4 classes: xs (phones), sm (tablets), md (desktops), together with lg (larger desktops). The classes tin live on combined to usage to a greater extent than dynamic together with flexible layouts.Tip: Each degree scales up, together with then if you lot wishing to laid the same widths for xs together with sm, you lot entirely take away to specify xs.
Example
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Tip: Remember that grid columns should add together upwards to twelve for a row. More than that, columns volition stack no affair the viewport.
Mixed: Mobile, Tablet And Desktop
Example
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
Clear Floats
Clear floats (with the.clearfix
class) at specific breakpoints to preclude foreign wrapping alongside uneven content:Example
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to run across the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for entirely the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
Offsetting Columns
Move columns to the correct using.col-md-offset-*
classes. These classes growth the left margin of a column yesteryear * columns:Example
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
Push And Pull - Change Column Ordering
Change the lodge of the grid columns alongside.col-md-push-*
together with .col-md-pull-*
classes:Example
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>
Comments
Post a Comment