Bs Grid Small

Bootstrap Grid - Small Devices

---

Bootstrap Grid Example: Small Devices

	Extra small	Small	Medium	Large
Class prefix	.col-xs	.col-sm	.col-md	.col-lg
Screen width	<576px	>=768px	>=992px	>=1200px

Assume nosotros convey a uncomplicated layout amongst 2 columns. We desire the columns to locomote split upward 25%/75% for minor devices.
Tip: Small devices are defined every mo having a hide width from 768 pixels to 991 pixels.
For minor devices nosotros volition purpose the .col-sm-* classes.
We volition add together the next classes to our 2 columns:

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

Now Bootstrap is going to say "at the minor size, await for classes amongst -sm- inwards them as well as purpose those".
The next lawsuit volition lawsuit inwards a 25%/75% split upward on minor (and medium as well as large) devices. On extra minor devices, it volition automatically stack (100%):

col-sm-3

col-sm-9

Example

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Note: Make certain that the nitty-gritty ever adds upward to 12.

For a 33.3%/66.6% split, you lot would purpose .col-sm-4 as well as .col-sm-8:

col-sm-4

col-sm-8

Example

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-4" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-8" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

The adjacent chapter shows how to add together a dissimilar split upward pct for medium devices.

---