Skip to main content

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>



Labels:

Comments

  1. Suruchi Pandey9 June 2018 at 02:53

    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

    ReplyDelete
  2. Unknown9 June 2018 at 04:54

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

    ReplyDelete
  3. Unknown15 September 2018 at 02:42

    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

    ReplyDelete
  4. Unknown6 November 2018 at 00:58

    Thanks for sharing this information "Bootstrap Grid System"

    Website Designing Services in Delhi

    ReplyDelete

Post a Comment

Popular posts from this blog

How to handle XML with PHP

What is XML? The  eXtensible Markup Language  is a way to structure your data for sharing across sites. Some of the technologies that are crucial to the web like  RSS  (Real Simple Syndication) and  Podcasts  are special flavors of XML. The beautiful thing about XML is that you can easily roll your own for anything you need. XML is easy to create because it’s a lot like HTML…except you can make up your own tags. Let’s say, for example that you’re putting together a feed for a list of songs playing at your own radio station. We’ll keep this simple, so we’ll just encode the name of the artist, the title of the song, plus the time when the song was played. We make up a couple of tags called  <title>  and  <artist>  and wrap each of them around a  <song>  tag. We’ll create a dateplayed attribute for each song with the date and time the song was played. You might encode something like that in this manner. ...
5 comments
Read more

XSLT QUICK GUIDE

E X tensible  S tylesheet  L anguage  T ransformation commonly known as XSLT is a way to transform the XML document into other formats such as XHTML. XSL Before learning XSLT, we should first understand XSL which stands for E X tensible  S tylesheet  L anguage. It is similar to XML as CSS is to HTML. Need for XSL In case of HTML document, tags are predefined such as table, div, and span; and the browser knows how to add style to them and display those using CSS styles. But in case of XML documents, tags are not predefined. In order to understand and style an XML document, World Wide Web Consortium (W3C) developed XSL which can act as XML based Stylesheet Language. An XSL document specifies how a browser should render an XML document. Following are the main parts of XSL − ·          XSLT  − used to transform XML document into various other types of document. ·       ...
8 comments
Read more

position absolute example

output:: <html> <head> <title>position absolute example </title> <style type="text/css"> #Layer1 { position:absolute; width:200px; height:184px; left: 13px; top: 25px; background-color:orange; } #Layer2 { position:absolute; width:200px; height:176px; left: 255px; top: 25px; background-color:yellow; } #Layer3 { position:absolute; width:200px; height:179px; left: 498px; top: 25px; background-color:red; } .container{ background-color:black; height:400px; width:800px; } </style> </head> <body>   <div  class=container>     <div id="Layer1"></div>     <div id="Layer2"></div>   <div id="Layer3"></div> </div> </body> </html>
8 comments
Read more