• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Bootstrap Grid System

June 11, 2014 //  by Krishna Srinivasan//  Leave a Comment

In graphic design, grid is a series of vertical and horizontal lines used to structure the page vertically and horizontally into margins, columns, spaces between block of types and images. The Bootstrap grid system makes page layout fast and easy. The term page layout means arranging content on a web page through a series of rows and columns. It provides useful structure for viewers, because it is easy to follow flow of content moving page down.

Working of Grid System

  • The rows must be placed within .container for proper alignment and padding and used to create horizontal group of columns.
  • The grid systems are built using columns. Columns are grid system’s smallest unit of measurement and most of the grid systems contain 12 – 16 columns.
  • Columns are children of rows and contains content within them.
  • The grid classes .row and .col-xs-4 are used for making grid layouts. Grid columns are created by using number available twelve columns we wish to span, for instance if we want to make three equal columns then we would use three .col-xs-4.
  • Columns create gutters i.e. space between the column content by using padding.

Grid Options

There are 4 different grid classes to define layouts:

  • col-xs-* :It is for extra small devices. E.g. Phones
  • col-sm-* :It is for small devices. E.g. Tablets
  • col-md-* :It is for medium devices. E.g. Desktops
  • col-lg-* :It is for large devices. E.g. Desktops

The following table explains how grid system works for multiple devices:

Extra small devices
Phones (<768px)
Small devices
Tablets (≥768px)
Medium devices
Desktops (≥992px)
Large devices
Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Max container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
No of columns 12 12 12 12
Max column width Auto 60px 78px 95px
Gutter width 30px
(15px on each side of a column)
30px
(15px on each side of a column)
30px
(15px on each side of a column)
30px
(15px on each side of a column)
nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes

Media Queries

Media queries consist of media type and as of CSS3 specification, contain one or more expressions, expressed as media features such as width, height, and color. If the media type in media query matches the type of device which is being displayed on the document then the result of query will be true. Most media features can be expressed with min or max to greater or equal to or less than or equal to constraints.
Following media queries are used to create the key breakpoints in Bootstrap grid system.

For Small Devices (Tablets, ≥768px)
@media (min-width: @screen-sm-min) {. . .}

For Medium Devices (Desktops, ≥992px)
@media (min-width: @screen-md-min) {. . .}

For Large Devices (Desktops, ≥ 1200px)
@media (min-width: @screen-lg-min) {. . .}

When we see the browser width in the set of devices, we could use two media queries in the responsive css file overlap: those are setting min-width and max-width. We can have following media queries values for defining min-width and max-width in the devices:

Extra Small Devices
@media (max-width: 767px) { }

Small Devices
@media (min-width: 768px) and (max-width: 991px) { }

Medium Devices
@media (min-width: 992px) and (max-width: 1199px) { }

Large Devices
@media (min-width: 1200px) { }

Stacked-to-horizontal Example

We can use .col-md-* to create stacked-to-horizontal grid system that stacked out on mobile devices and tablet devices before displaying horizontally on the desktop devices.

<!DOCTYPE html>
<head>
<title>Grid System Example</title>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
   <h2>Stacked-to-horizontal Example</h2>
   <div class="row">
      <div class="col-md-4" style="background-color:pink; height:150px">
         <h3>First Column</h3>
             Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
      </div>
      <div class="col-md-4" style="background-color:green; height:150px">
         <h3>Second Column</h3>
             Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
      </div>
      <div class="col-md-4" style="background-color:orange; height:150px">
         <h3>Third Column</h3>
             Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
      </div>
   </div>
   </div>
</body>
</html>
  • As defined in above script, the Bootstrap support for CSS and JavaScript by using bootstrap.min.css, bootstrap-theme.min.css and bootstrap.min.js CDN link files.
  • <div class=”container”>. . . </div> element is used to give proper width for the layout.
  • We can place the grid columns in row which is defined as <div class=”row”>. . . </div> and add columns <div class=”col-md-4″> </div> inside rows.
  • Every row is made up of 12 units. We have three columns each made up of 4 units wide. We must make ensure that sum always needs to be 12.
  • Run Bootstrap Stacked to Horizontal Demo

StackedtoHorizontalPicture

Mobile and Large Device Example

We can use col-md-*</strong and col-lg-* for creating grid system on the medium and large devices.

<!DOCTYPE html>
<head>
<title>Grid System Example</title>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
   <h2>Mobile and Large Device Example</h2>
   <div class="row">
      <div class="col-md-6 col-lg-4" style="background-color:pink;">
         <h3>First Column</h3>
             Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. The most popular front-end framework for developing responsive, mobile first projects on the web.
             It uses HTML, CSS and Javascript. Bootstrap easily and efficiently scales your project with one code base, from phones to tablets to desktops.
      </div>
      <div class="col-md-6 col-lg-8" style="background-color:green;">
         <h3>Second Column</h3>
             Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
      </div>
   </div>
   </div>
</body>
</html>


We have used two divs. We can place the grid columns in row which is defined as <div class=”row”>. . . </div> and add columns <div class=”col-md-6″ “col-lg-4”> </div> and <div class=”col-md-6″ “col-lg-8”> </div> inside rows. When we run the above script, we will see that first column will be displayed with pink background color and second column will get display with green background color.

  • Run Bootstrap Mobile and Large Devices Demo 

Mobile and Large Device Picture

Mobile, Tablet and Desktops Example

We can even create more dynamic and powerful layout by using col-sm-* and col-lg-* where we would want to change it for mobile, tablets and desktops as well.

<!DOCTYPE html>
<head>
<title>Grid System Example</title>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
   <h2>Mobile,Tablet and Desktop Device Example</h2>
   <div class="row">
      <div class="col-sm-6 col-md-6 col-lg-8" style="background-color:pink;">
         <h3>First Column</h3>
             <p>Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. The most popular front-end framework for developing responsive, mobile first projects on the web.</p>
      </div>
      <div class="col-sm-6 col-md-6 col-lg-4" style="background-color:green;">
         <h3>Second Column</h3>
             <p>Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
             <p>It uses HTML, CSS and Javascript. Bootstrap easily and efficiently scales your project with one code base, from phones to tablets to desktops. The most popular front-end framework for developing responsive, mobile first projects on the web.</p>
      </div>
   </div>
   </div>
</body>
</html>

We have used two divs. We can place the grid columns in row which is defined as <div class=”row”>. . . </div> and add columns < div class=”col-sm-6 col-md-6 col-lg-8″> </div> and <div class “col-sm-6 col-md-6 col-lg-4”> </div> inside rows. When we run the above script, we will see that first column will be displayed with pink background color and second column will get display with green background color.

  • Run Bootstrap Mobile Tablet and Desktop Demo

Mobile Tablet and Desktop Picture

Responsive Column Resets

Consider there are four grids available and we must run them into the situation where all columns are not in equal size, one column is taller than the other. To resolve this, we use combination of class .clearfix and response utility classes as shown in the following example:

<!DOCTYPE html>
<head>
<title>Grid System</title>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
   <h2>Responsive Column Reset Example</h2>
   <div class="row">
     <div class="col-xs-6 col-sm-4" style="background-color:red; height:40px">Welcome to Bootstrap!!!</div>
     <div class="col-xs-6 col-sm-4" style="background-color:pink;">Welcome to Bootstrap!!!</div>
     <div class="clearfix visible-xs"></div>
     <div class="col-xs-12 col-sm-4" style="background-color:orange;">Welcome to Bootstrap!!!</div>
   </div>
   </div>
</body>
</html>

As defined in above script, the Bootstrap support for CSS and JavaScript by using bootstrap.min.css, bootstrap-theme.min.css and bootstrap.min.js CDN link files. The <div class=”container”>. . . </div> element is used to give proper width for the layout. We can place the grid columns in row which is defined as <div class=”row”>. . . </div>. Every row is made up of 12 units. We have three columns each made up of 4 units wide.

  • Run Bootstrap Responsive Column Reset

Responsive Column Reset Picture

Nesting of Columns

In bootstrap it’s possible to add columns within columns, which is called as nesting of columns. To nest column, add new row and set .col-md-* columns within an existing .col-md-* column. We can add columns up to 12 or less than 12.

<!DOCTYPE html>
<head>
<title>Grid System</title>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
   <h2>Nesting of Columns</h2>
   <div class="row">
      <div class="col-md-6" style="background-color:pink;">
      <h2>First Column</h2>
         <div class="col-md-4">
         <h3>Column 1</h3>
            Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework.
         </div>
         <div class="col-md-4">
         <h3>Column 2</h3>
            Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework.
         </div>
         <div class="col-md-4">
         <h3>Column 3</h3>
            Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework.
         </div>
      </div>
   <div class="col-md-6" style="background-color:orange;">
   <h2>Second Column</h2>
      <div class="col-md-4">
      <h3>Column 1</h3>
           Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework.
      </div>
      <div class="col-md-4">
      <h3>Column 2</h3>
           Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework.
      </div>
      <div class="col-md-4">
      <h3>Column 3</h3>
           Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework.
      </div>
      </div>
   </div>
</div>
</body>
</html>

As shown in the above script, we are using container which includes row which contains the grid columns. We have used two columns which contain nesting three columns each made up of 4 units wide. When we run the script, will get first column with nesting of three columns with pink color background and second column with nesting of three columns with orange color background.

  • Run Bootstrap  Nesting Columns Demo

Nesting of Columns Picture

Ordering of Column

It is another feature of Bootstrap which changes ordering of grid columns by using .col-md-push-* and .col-md-pull-* modifier classes. The .col-md-push-* means push the column to the right by specified number of columns and and .col-md-pull-* means push the column to the left by specified number of columns. The following example describes ordering of column by using these modifier classes:

<!DOCTYPE html>
<head>
<title>Grid System</title>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
   <div class="row">
      <p>Before Ordering</p>
      <div class="col-md-4" style="background-color: pink;">This is left</div>
      <div class="col-md-8" style="background-color: orange;">This is right</div><br><br>
   <div class="row">
      <p>After Ordering</p>
      <div class="col-md-4 col-md-push-8" style="background-color: cyan;"> It was left </div>
      <div class="col-md-8 col-md-pull-4" style="background-color: gray;"> It was right</div>
   </div>
</div> </body>
</html>

As shown in the above script, we are using container which includes row which contains the grid columns. We are using .col-md-push-* and .col-md-pull-* modifier classes to push the column to the right by specified number of columns and pull the column to the left by specified number of columns.

  • Run Bootstrap Ordering of Column Demo

Ordering of Columns picture

Category: BootstrapTag: Bootstrap Grid

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « PrimeFaces 5 Features
Next Post: Bootstrap Typography »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact