WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Grid - Medium Devices


Bootstrap Grid Example: Medium Devices

In this chapter we discuss of medium device, 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>

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

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>

Bootstrap work "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 below example will result in a 25%/75% split on small devices and a 50%/50% split on medium (and large) devices. On extra small devices, it will automatically stack (100%):

Example

<div class="container-fluid">
  <h1>Hello bootstrap!</h1>
  <div class="row">
    <div class="col-sm-3 col-md-6" style="background-color:yellow;">
      <p>I'm paragraph text</p>
    </div>
    <div class="col-sm-9 col-md-6" style="background-color:pink;">
      <p>I'm paragraph text</p>
    </div>
  </div>
</div>
Try it Yourself »

Using Only Medium

this example, we only specify the .col-md-6 class (without .col-sm-*). It can be medium and large devices will split 50%/50%

Example

<div class="row">
  <div class="col-md-6" style="background-color:yellow;">
    <p>I'm paragraph text</p>
  </div>
  <div class="col-md-6" style="background-color:pink;">
    <p>I'm paragraph text</p>
  </div>
</div>
Try it Yourself »