Bs Grid Medium

Bootstrap Grid - Medium Devices


Bootstrap Grid Example: Medium Devices

  Extra small Small Medium Large
Class prefix .col-xs .col-sm .col-md .col-lg
Screen width <576px >=768px >=992px >=1200px
In the previous chapter, nosotros presented a grid instance alongside classes for minor devices. We used 2 divs (columns) in addition to nosotros gave them a 25%/75% split:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
But on medium devices the blueprint may hold out amend equally a 50%/50% split.
Tip: Medium devices are defined equally having a covert width from 992 pixels to 1199 pixels.
For medium devices nosotros volition role the .col-md-* classes.
Now nosotros volition add together 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 enjoin "at the minor size, hold off at classes alongside -sm- inwards them in addition to role those. At the medium size, hold off at classes alongside -md- inwards them in addition to role those".
The next instance volition resultant inwards a 25%/75% split upward on minor devices in addition to a 50%/50% split upward on medium (and large) devices. On extra minor devices, it volition automatically stack (100%):

Example

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3 col-md-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>
Note: Make certain that the amount ever adds upward to 12.

Using Only Medium

In the instance below, nosotros alone specify the .col-md-6 cast (without .col-sm-*). This way that medium in addition to large devices volition split upward 50%/50% - because the cast scales up. However, for minor devices, it volition stack vertically (100% width):

Example

<div class="row">
  <div class="col-md-6" style="background-color:yellow;">
    <p>Lorem ipsum...</p>
  </div>
  <div class="col-md-6" style="background-color:pink;">
    <p>Sed ut perspiciatis...</p>
  </div>
</div>
The side past times side chapter shows how to add together a dissimilar split upward part for large devices.


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?