Bootstrap Container


Prev Tutorial Next Tutorial

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 Advertisements

Download Projects

Google Adsense Advertisements

Buy 3 Year Old Domain, Tutorialday.com, SeosmoTools.com @$200

Buy This Ad Space @$50 per Month, Ad Size 300X250 Contact on: hitesh.xc@gmail.com WhatsApp no. 8882538826

Yahoo Advertisements