Latest

random

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.

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 responsive design,bootstrap grid tutorial,bootstrap classes, bootstrap 3 classes,
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.

No comments:

All Rights Reserved by Etechpulse © 2015 - 2016
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.