All for Joomla All for Webmasters

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:

  1. container
  2. container-fluid

See the basic layout of a container:

  1. <html>
  2.  <body>
  3.   <div class=“container”>
  4.    <div class=“row”>
  5.      <div class=“col-md-xx”></div>
  6.        …
  7.    </div>
  8.    <div class=“row”>
  9.      <div class=“col-md-xx”></div>
  10.        …
  11.    </div>
  12.   </div>
  13.  </body>
  14. </html>

Bootstrap container example

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3.   <head>
  4.      <title>Job</title>
  5.      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>
  6.   </head>
  7.   <body>
  8. <div class=“container”>
  9.   <h1>Container</h1>
  10.   <p>container content</p>
  11. </div>
  12. <div class=“container-fluid”>
  13.   <h1>Container-fluid</h1>
  14.   <p>container-fluid content</p>
  15. </div>
  16.   <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
  17.   <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
  18.   </body>
  19. </html>
PinIt
submit to reddit

Leave a Reply

Top