Bootstrap Grid - Medium Devices


Bootstrap Grid Example: Medium Devices

In the previous chapter, we presented a grid example with classes for small devices. We used two divs (columns) and we gave them a 25%/75% split:

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

But on medium devices the design may be better as a 50%/50% split.

Tip: Medium devices are defined as having a screen width from 992 pixels to 1199 pixels.

For medium devices we will use the .col-md-* classes.

Now we will add the column widths for medium devices:

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

Now Bootstrap is going to say "at the small size, look at classes with -sm- in them and use those. At the medium size, look at classes with -md- in them and use those".

The following example will result in a 25%/75% split on small devices and a 50%/50% split on medium devices:

Example

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3 col-md-6" style="background-color:lavender;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua.</p>
      <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
      aliquip ex ea commodo consequat.</p>
    </div>
    <div class="col-sm-9 col-md-6" style="background-color:lavenderblush;">
      <p>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 beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

Try it Yourself »

Note Note: Make sure that the sum always adds up to 12.

The next chapter shows how to add a different split percent for large devices.



Color Picker

colorpicker