Web Programming Training By OM SIR Call for free Demo :9320957717/18

Bootstrap Grid System guidance

Bootstrap Grid System

Bootstrap's grid system allows up to 12 columns across the page.
If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:
span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1
 span 4 span 4 span 4
span 4span 8
span 6span 6
span 12

Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Grid Classes

The Bootstrap grid system has four classes:
  • xs (for phones - screens less than 768px wide)
  • sm (for tablets - screens equal to or greater than 768px wide)
  • md (for small laptops - screens equal to or greater than 992px wide)
  • lg (for laptops and desktops - screens equal to or greater than 1200px wide)
The classes above can be combined to create more dynamic and flexible layouts.

Grid System Rules

Some Bootstrap grid system rules:
  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
  • Use rows to create horizontal groups of columns
  • Content should be placed within columns, and only columns may be immediate children of rows
  • Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
  • Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
  • Column widths are in percentage, so they are always fluid and sized relative to their parent element

Basic Structure of a Bootstrap Grid

The following is a basic structure of a Bootstrap grid:
<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 class="row">
    ...
  </div>
</div>

So, to create the layout you want, create a container (<div class="container">). Next, create a row (<div class="row">). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.
Below we have collected some examples of basic Bootstrap grid layouts.

Three Equal Columns example:-


<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>
</body>
</html>

Two Unequal Columns:-

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>
</body>
</html>

We will create a basic grid system that starts out stacked on extra small devices, before becoming horizontal on larger devices.

Example: Stacked-to-horizontal

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
</head>
<body>

<div class="container">
      
  <div class="row">
    <div class="col-sm-6" style="background-color:yellow;">
      firts column
    </div>
    <div class="col-sm-6" style="background-color:pink;">
       second column   
    </div>
  </div>
</div>
    
</body>
</html>
Tip: The numbers in the .col-sm-* classes indicates how many columns the div should span (out of 12). So, .col-sm-1 spans 1 column, .col-sm-4 spans 4 columns, .col-sm-6 spans 6 columns, etc.

Note: Make sure that the sum always adds up to 12!
Tip: You can turn any fixed-width layout into a full-width layout by changing the .container class to .container-fluid.

Bootstrap Grid - Small Devices
Tip: Small devices are defined as having a screen width from 768 pixels to 991 pixels.
For small devices we will use the .col-sm-* classes.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>
    
</body>
</html>

Using Only Medium

In the example below, we only specify the .col-md-6 class (without .col-sm-*). This means that medium and large devices will split 50%/50% - because the class scales up. However, for small devices, it will stack vertically (100% width):-
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
</head>
<body>

<div class="container-fluid">
  
  <div class="row">
    <div class="col-md-6" style="background-color:yellow;">
      first column
    </div>
    <div class="col-md-6" style="background-color:pink;">
      second column
    </div>
  </div>
</div>
    
</body>
</html>

Bootstrap Grid - Large Devices:-


Using Only Large

In the example below, we only specify the .col-lg-6 class (without .col-md-* and/or .col-sm-*). This means that large devices will split 50%/50%. However, for medium AND small devices, it will stack vertically (100% width):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-lg-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-lg-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>
    
</body>
</html>

The following example will result in a 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large devices:


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>
    
</body>
</html>



Bootstrap Grid Examples for practice:-

Two Columns With Two Nested Columns


The following example shows how to get two columns starting at tablets and scaling to large desktops, with another two columns (equal widths) within the larger column (at mobile phones, these columns and their nested columns will stack):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-8" style="background-color:lavender;">.col-sm-8
      <div class="row">
        <div class="col-sm-6" style="background-color:lightcyan;">.col-sm-6</div>
        <div class="col-sm-6" style="background-color:lightgray;">.col-sm-6</div>
      </div>
    </div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
  </div>
</div>
    
    
</body>
</html>

Mixed: Mobile, Tablet And Desktop:-

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
</head>
<body>

<div class="row">
  <div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
  <div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>

<div class="row">
  <div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
  <div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
    
    
</body>
</html>

Clear Floats

Clear floats (with the .clearfix class) at specific breakpoints to prevent strange wrapping with uneven content:
Example:-
<div class="row">
  <div class="col-xs-6 col-sm-3">
    Column 1
    <br>
    Resize the browser window to see the effect.
  </div>
  <div class="col-xs-6 col-sm-3">Column 2</div>
  <!-- Add clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3">Column 3</div>
  <div class="col-xs-6 col-sm-3">Column 4</div>
</div>

Push And Pull - Change Column Ordering

Change the order of the grid columns with .col-md-push-* and .col-md-pull-* classes:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
</head>
<body>

<div class="container-fluid">
  <h1>Push and Pull</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-4 col-sm-push-8" style="background-color:lavender;">.col-sm-4 .col-sm-push-8</div>
    <div class="col-sm-8 col-sm-pull-4" style="background-color:lavenderblush;">.col-sm-8 .col-sm-pull-4</div>
  </div>
</div>
    
    
    
</body>
</html>



Previous
Next Post »

3 comments

Write comments
9 June 2018 at 02:53 delete

Great deal of information been shared by you, I am very happy to see your article. Thank you for the post.
Web Design Company | Web development Lucknow

Reply
avatar
Kuldeep Singh
AUTHOR
9 June 2018 at 04:54 delete

great information about Web Designing Training In Chandigarh keep Share more
Thank you for Sharing

Reply
avatar
param info
AUTHOR
15 September 2018 at 02:42 delete

Nice blog..! I really loved reading through this article. Thanks for sharing such a amazing post with us and keep blogging...
it outsourcing companies in uae
it solutions provider dubai

Reply
avatar