In Focus

Bootstrap For Beginners - Part Two (Bootstrap Containers)

In this article you will learn about Bootstrap. This is part two of the series that includes Bootstrap Containers.

Introduction
 
I have started an article series on Bootstrap. Read the first part here,
In this article we will learn about Containers and then we will understand about Bootstrap Container classes by creating examples. So by using this we can easily create interactive, responsive website layouts.
 
Containers: In Bootstrap we can contain elements to wrap site contents.
 
There are two Bootstrap Container classes 
  1. The .container class used to provide a responsive fixed width container.
  2. The .container-fluid class used to provide a full width container.
We have to note that we cannot put a container inside another container since it is not nestable.

Example 1: Using .container class(responsive fixed width container)
 
In this example we will create a simple Bootstrap page. Using ".container" class we will create fixed width container that is responsive for different devices. In this we will write some text. We will have some space on left and right side of page by writing the following code. 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part2</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <div class="container">  
  12.         <h1>This Is Bootstrap Page With Responsive Fixed Width Container</h1>   
  13.         <p>This Container Show Output Of Using (.container) Class</p>  
  14.     </div>  
  15.     <script src="js/jquery-2.1.4.min.js"></script>  
  16.     <script src="js/bootstrap.min.js"></script>  
  17. </body>  
  18. </html>  
Output
 
 
 
 
 
 
 
  • container and container-fluid class
 
 
Example 2: Using .container-fluid class (full width container)
 
In this example we will create same a simple Bootstrap page like Example1. Using ".container-fluid" class we will create full width container. In this we will write some text. Now we will create page by writing the following code.  
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part2</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <div class="container-fluid">  
  12.         <h1>This Is Bootstrap Page With Full Width Container</h1>  
  13.         <p>This Container Show Output Of Using (.container-fluid) Class</p>  
  14.     </div>  
  15.     <script src="js/jquery-2.1.4.min.js"></script>  
  16.     <script src="js/bootstrap.min.js"></script>  
  17. </body>  
  18. </html>   
Output
 
 
 
In this article we focused on Bootstrap Containers. In upcoming articles we will understand all the components of Bootstrap step by step.
 
Read more articles on Bootstrap: