Using Bootstrap Col-MD Classes for Your Grid Layouts

In the chapters that came before, we have covered using extra small and small grid classes. Now, this tutorial will get you familiar with Bootstrap Col-MD classes used for the medium (over 768 pixels) screens.

Using code examples, we will explain how to use these classes alone and also combine them with other sizing classes for more flexibility. That will allow your users to easily access your website regardless of the device they're using.

Bootstrap Col-MD: Main Tips

• Bootstrap 4 grid system offers a set of responsive classes to specify on what screens a certain layout works.
• The Bootstrap Col-MD class applies a grid column class to an element when the screen is wider than 768px.
• You can use these classes alone as well as combine them with others.
• To use them, you will have to include col-md-* in your code.

Combining Small and Medium Grids

The Bootstrap medium grid column classes apply when the screen is wider than 768px:

Columns like these are created by using the class prefix .col-md-*. You will notice in the example two responsive grid column classes are combined: we used both col-sm-* and col-md-*. Therefore, both Bootstrap MD and small classes are used.

This means that if the screen or window is narrower than 768px, the columns will rearrange slightly. If the screen is extra small (less 576px wide), the layout will collapse and appear stacked. See the example to get a better idea:

<div class="container">
  <div class="row">
    <div class="bg-info col-sm-4 col-md-3">
      ...
    </div>
    <div class="bg-primary col-md-9 col-sm-8">
      ...
    </div>
  </div>
</div>

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Using Medium Grid Alone

Of course, Bootstrap MD can be used on its own as well. Take a look at the example below. You will see two columns are created, both with col-md-*:

<div class="container">
  <div class="row">
    <div class="bg-info col-md-3">
      ...
    </div>
    <div class="bg-primary col-md-9">
      ...
    </div>
  </div>
</div>

You can also use col-md-offset-* class to move the columns to the right. Basically what this does is leave a * number of columns on the left side free. For example, including col-md-offset-2 would mean making Bootstrap leave a gap as wide as two columns on the left side of the grid.

Creating Auto Layouts

When using Bootstrap Col-MD classes, you can specify how many columns a grid column should span. However, if you don't, a layout will still be created. In this case, it will be an auto layout. Every column element will automatically be equal, and added up they will take the whole width:

<div class="row">
<!-- Five 20% wide columns --> 
  <div class="bg-primary col-md">1</div>
  <div class="bg-secondary col-md">2</div>
  <div class="bg-primary col-md">3</div>
  <div class="bg-secondary col-md">4</div>
  <div class="bg-primary col-md">5</div>
</div>

Bootstrap Col-MD: Summary

• Responsive classes are used to specify on what screens a certain Bootstrap layout works.
• The Bootstrap medium classes are used for screens wider than 768px.
• You may use Bootstrap col-md classes alone and combined with others for more flexibility.