Working with the Bootstrap containers

Working with the Bootstrap containers
Rate this post

Being mobile-first, Bootstrap 3 was developed to be responsive to mobile devices.
To provide proper rendering and touch zooming, add meta viewport tag inside the <head> element:

<meta name="viewport" content="width=device-width, initial-scale=1">
  • The width=device-width part sets the width of the page to follow the screen-width of the device.
  • The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.

Bootstrap container

The Bootstrap container is declared by the container class which allows you to control the webpage layout.

  • Adding the container class will create a 15 pixels of padding on each sides of the elements.
  • If you want an element to have the full width of the browser, you should not place it inside a container class

There are two types of containers: fixed and fluid.

Fluid container

The fluid container will adjust the width of the browser accordingly to the user’s device screen resolution.


<div class="container-fluid">
... your code here
</div>

Example of a basic bootstrap page with fluid container
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootsrap fluid container</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<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.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
	<h1>Bootsrap fluid container</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero, cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
</div>

</body>
</html>

Fixed container

The fixed width container will show a specific size (depending on the size of the viewport) which will be adjusted to different media breakpoints.

Extra small
≤ 768px
Small
≥ 768px
Medium
≥ 992px
Large
≥ 1200px
Container Auto 750px 970px 1170px

The fixed container will create also a 15 pixels of padding on each side of the elements.

When the layout is extra small (less than 768 pixels), the container will go to the full width of the browser(auto) minus padding.

Example of a basic bootstrap page with fixed container
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootsrap fixed container</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<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.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
	<h1>Bootsrap fixed container</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero, cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
</div>

</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *