Understanding Twitter Bootstrap Grid Layout

Bootstrap grid systems are used for creating page layouts through a series of rows and columns that contains your content. So in this bootstrap tutorial I will explain how the bootstrap grid system works.

Recommend Article : What is Bootstrap? - How to use Bootstrap js?

Bootstrap Grid Structure

Now it is time to understand Bootstrap 3 grid system. The Bootstrap Grid system has four classes:

• Extra small devices - Phones (<768px) .col-xs-

• Small devices - Tablets (≥768px) .col-sm-

• Medium devices - Desktops (≥992px) .col-md-

• Large devices - Desktops (≥1200px) .col-lg-

Bootstrap Grid System

Bootstrap Grid Example

<div class="container">

        <div class="row">

            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"></div>

            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"></div>

            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"></div>

        </div>

</div>

Bootstrap Responsive Utility Classes
Find the below list of bootstrap responsive design utility classes :-

• .visible-xs
• .visible-sm
• .visible-md
• .visible-lg
• .hidden-xs
• .hidden-sm
• .hidden-md
• .hidden-lg
• .visible-print-block
• .visible-print-inline
• .visible-print-inline-block
• .hidden-print

So in this bootstrap article we have learned about the bootstrap grid syntax and classes to create a bootstrap responsive design.