Working with the Bootstrap containers

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>

Hello there!

I hope you find this post useful!

I'm Mihai, a programmer and online marketing specialist, very passionate about everything that means online marketing, focused on eCommerce.

If you have a collaboration proposal or need helps with your projects feel free to contact me. I will always be glad to help you!

Leave a Comment

WebPedia.net