Bootstrap Container

Container class in Bootstrap

In Bootstrap container class is used to create boxed content. The Container is used to set the content's margins dealing with the responsive behaviors of your layout. It contains the row elements and the row elements are the container of columns (known as grid system).
There are two container classes in Bootstrap;

container
container-fluid

Bootstrap Container Syntax

<html>  
 <body>  
  <div class="container">  
       ...  
   </div>  
 </body>  
</html>

Bootstrap container-fluid Syntax

<html>  
 <body>  
  <div class="container-fluid">  
       ...  
   </div>  
 </body>  
</html>

Bootstrap Container & Container-fluid Example

<!DOCTYPE html>  
<html lang="en">  
  <head>  
     <title>Job</title>  
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
  </head>  
  <body>  
  
<div class="container">    
  <h1>Container</h1>    
  <p>These are container content</p>  
</div>    
    
<div class="container-fluid">    
  <h1>Container-fluid</h1>    
  <p>These are container-fluid content</p>  
</div>   
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
  </body>  
</html>

Output

Container

These are container content

Container-fluid

These are container-fluid content

Prev Tutorial Next Tutorial

Google Advertisment

Sitesbay - Easy to Learn