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
    • 565
    Comment on it
    1. Bootstrap grid system are used for creating page layout using series of rows and columns.
    2. It allow maximum 12 columns across the page.
    3. First class we use in grid system is .container. All rows and columns are placed inside container. Container class is used for proper alignment and padding.
    4. Then we used either .row class or .col-*-* to create rows and columns.
    5. For col-*-*, we have 4 options:
    • .col-xs-  It is used for extra small devices phones(<768px)
    • .col-sm-  It is used for small devices tablets (≥768px)
    • .col-md- It is used for medium devices Desktops (≥992px)
    •  .col-lg- It is used for large devices Desktops (≥1200px)

    Basic Bootstrap grid structure:

    <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>

    Example:


    The following example will show how to create columns layout for small, medium and large devices.

    <div class="container">
        <!--Row with three equal columns-->
        <div class="row">
            <div class="col-sm-4"><!--Column 1 left--></div>
            <div class="col-sm-4"><!--Column 2 middle--></div>
    		 <div class="col-sm-4"><!--Column 3 right--></div>
        </div>
        
        <!--Row with four equal columns -->
        <div class="row">
            <div class="col-sm-3"><!--Column 1--></div>
            <div class="col-sm-3"><!--Column 2--></div>
    		<div class="col-sm-3"><!--Column 3--></div>
            <div class="col-sm-3"><!--Column 4--></div>
        </div>
      
    </div>

    Hope, this will help you. Thanks

 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: