Bootstrap Container

In Bootstrap, 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).

The container class is used to create boxed content.

There are two container classes in Bootstrap:

container
container-fluid

See the basic layout of a container:

<html>
 <body>
  <div class="container">
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
  </div>
 </body>
</html>

Bootstrap container 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>container content</p>
</div>  
  
<div class="container-fluid">  
  <h1>Container-fluid</h1>  
  <p>container-fluid content</p>
</div> 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

Test it Now

Next TopicBootstrap Jumbotron

← prev next →