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

    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 200
    Comment on it

    Bootstrap is one of the most popular front-end frameworks. In this blog post, I will be discussing one of the most important concepts in Bootstrap: The Grid System.

    In web design, grids organise and structure content, and make the websites easy to scan.

    Bootstrap's grid system is responsive and mobile-first. The columns will re-arrange themselves according to the screen size. Bootstrap allows us to create up to 12 columns with unlimited rows— thus the name 12-Grid System.

    Grid System is made up of 3 things:

    • Container : A container is required to hold rows and columns. It acts like a wrapper.  A container is a <div> element with a class .container. The container is used to give  proper width for the layout of the web page. It has different widths in different sized screens .

     

    DEVICE WIDTH

    CONTAINER WIDTH

    1200px or higher

    1170px

    992px to 1199px

    970px

    768px to 991px

    750px

    Less than 768px

    auto

     

    • Rows : The row acts as a wrapper to the columns. A row is also a simple <div> element with a class .row inside a container. A row movess from the left edge to the right edge of the container. Rows have a  15px of negative margin on each side. There’s no limit on the number of rows you want to create.

     

    • Columns : It includes predefined classes for easy and responsive layout. There is a  different column class prefix for different sized device. The four different classes are:

    1. xs (extra small screens like smartphones)

    2. sm (small screen devices like tablets)

    3. md (medium sized screens such as desktops and laptops)

    4. lg (large and high resolution screens)

    These classes can also be combined to create more dynamic and more flexible layouts.


     

    CLASS PREFIX

    DEVICE WIDTH

    .col-xs-

    <768px

    .col-sm-

    768px to 991px

    .col-md-

    992px to 1199px

    .col-lg-

    ≥ 1200px


     


     

    Here's the working of the Bootstrap grid system −

    • Rows to be placed within a .container (fluid or fixed) class for proper alignment and padding.

    • Rows to be used to create horizontal groups of columns.

    • Only columns are to be the immediate children of rows and content is to be placed inside these columns.

    • Predefined classes (mentioned above) are available for making quick and responsive  layouts.

    • Grid columns are to be created by spanning the specified number of columns out of 12 total available columns. For example, four equal columns would use four .col-xs-3.

    I am providing a sample code snippet for better understanding.

    HTML :

    <!DOCTYPE html>
      <head>
        <title>Bootstrap 3</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/bootstrap.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    
        <link href="css/bootstrap.css" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
      </head>
      <body>
        <div class="container">
          <div class="row">
            <div class="col-sm-12">
              <h4>Extra Small Columns</h4>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6 first"></div>
            <div class="col-xs-6 second"></div>
          </div>
        </div>
        <div class="container">
          <div class="row">
            <div class="col-sm-12">
              <h4>Small Columns</h4>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6 first"></div>
            <div class="col-sm-6 second"></div>
          </div>
        </div>
        <div class="container">
          <div class="row">
            <div class="col-sm-12">
              <h4>Medium Columns</h4>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 first"></div>
            <div class="col-md-6 second"></div>
          </div>
        </div>
        <div class="container">
          <div class="row">
            <div class="col-lg-12">
              <h4>Large Columns</h4>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-6 first"></div>
            <div class="col-lg-6 second"></div>
          </div>
        </div>
      </body>
    </html>

    CSS :

    .first{
      background-color: #EA8428;
      height: 50px;
    }
    
    .second{
      background-color: #A6BA5A;
      height: 50px;
    }
    

    Keep Coding. :)

 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: