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
The next lawsuit shows how to become a 3 equal-width columns starting at tablets together with scaling to large desktops. On mobile phones, the columns volition automatically stack:

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
The next lawsuit shows how to become a 3 various-width columns starting at tablets together with scaling to large desktops:

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
The next lawsuit shows how to become 2 various-width columns starting at tablets together with scaling to large desktops:

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

Popular posts from this blog

What Are The Main Components of a Computer System

Top Qualities To Look For In An IT Support Team

How To Integrate Google Adwords Api Into Codeigniter?