Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Bootstrap Grid System

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 764
    Comment on it

    A grid is an arrangement which is separated into div sections. This is an extremely helpful strategy to oversee HTML format and clients can make easily. To make organised grids and organized content , Bootstrap introduces responsive grid system which is the fastest and most straightforward path that allows up to 12 sections over the page. It incorporates predefined grid classes for making grid layouts for different sorts of gadgets, similar to mobile phones, tablets, desktop, etc.

     

    The Bootstrap grid system has four classes: 

    Classes Devices Size
    .col-xs-* Extra Small Phones Less than 768px
    .col-sm-* Small Devices Tablets 768px and Up
    .col-md-* Medium Devices Desktops 992px and Up
    .col-lg-* Large Devices Large Desktops 1200px and Up

     

     

    To create grid system you must follow follwing rules:- 

    • Rows must be set inside a .container  or .container-fluid
    • Utilize rows to make horizontal groups of columns.
    • Content should be placed inside columns.
    • Predefined classes like .row and .col-sm-4 are accessible for rapidly making grid layouts
    • Columns make  gaps between column content through padding. That padding is balanced in lines for the first and last column by means of negative margin on .rows
    • Grid columns are made by indicating the quantity of 12 accessible sections you wish to traverse. For instance, three equivalent sections would utilize three .col-sm-4

     

    Structure of Bootstrap Grid Layout :-

    Example :- 

    <div class = "container">
       
       <div class = "row">
          <div class = "col-*-*"></div>
          <div class = "col-*-*"></div>
       </div>
       
       <div class = "row">
         <div class = "col-*-*"></div>
          <div class = "col-*-*"></div>
            <div class = "col-*-*"></div>
       </div>
        
    </div>
    <div class = "container">
       ....
    </div>

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: