November 16th, 2019 
Nilesh Chaurasia bootstrap 3 container class
bootstrap 3 container class is mostly used in the div tag to have a nicely looking centered page. This class will provide padding from left and right.
The content of the web page will not touch the view port or browser window.
The container class provides a responsive fixed width layout.
Note:It is a predefined bootstrap class, and you need to embed bootstrap in your page first.
In the example, the div tag with class .container have used. It will provide a fixed width container with left and right padding. And it will not take complete width of it’s parent element or the viewport/browser.
Example – Bootstrap 3 HTML Template with container class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Tutorial from elextutorial.com</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- container start -->
<div class="container" style="background-color:gray;">
<h1>Welcome to elextutorial.com</h1>
<p>The IT and Electronics Tutorial Destination.</p>
</div>
<!-- container end -->
<!-- Latest compiled and minified JavaScript -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Compiled and minified Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
In this code example we have used container class in the first div of body, and it will provide responsive centered web page layout.
Note: In This example jQuery library is not required you can remove both script tags.
bootstrap 3 container-fluid class
bootstrap 3 container-fluid class is mostly used in the div tag to have a responsive full width page layout. This class will provide no padding from left and right of the viewport.
The div element with container-fluid class will cover entire width of the parent or viewport or browser window.
The container-fluid class provides a responsive full width layout.
In the example, the div with class .container-fluid will take the complete width or the viewport/browser.
Example – Bootstrap 3 HTML Template with container-fluid class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Tutorial from elextutorial.com</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- container start -->
<div class="container-fluid" style="background-color:gray;">
<h1>Welcome to elextutorial.com</h1>
<p>The IT and Electronics Tutorial Destination.</p>
</div>
<!-- container end -->
<!-- Latest compiled and minified JavaScript -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Compiled and minified Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
In this code example we have used container-fluid class in the first div of body, and it will provide responsive full width web page layout. Try resizing the browser and see the responsive effect.
What is the difference between container and fluid-container bootstrap classes?
Bootstrap 3 uses media queries to gives different widths to the .container depending on the size of the device.
Bootstrap 3 set full 100% width to the .container-fluid class.
What are breakpoints in bootstrap?
Bootstrap 3 have four different sizes (width) specification. Namely extra small, small, medium size and large size devices.
Extra Small Devices are the default
Table shows different breakpoints with bootstrap abbreviation reference.
| S.No. | Width | Reference | Media Query |
|---|---|---|---|
| 1 | Less Than 768px (Mobile) | xs | @media (max-width: 767px) |
| 2 | Smaller than 991px and greater than 768px (Tablet) | sm | @media (min-width: 768px) and (max-width: 991px) |
| 3 | Smaller than 1200px and greater than 991px (Normal Desktop) | md | @media (min-width: 992px) and (max-width: 1199px) |
| 4 | Greater than 1200px (Wide Screen Monitors) | lg | @media (min-width: 1200px) |
Link:To know more about media query please read this tutorial.
Breakpoints Based Width to the .container class
With the help of media queries, Bootstrap gives different widths to the .container depending on the viewport or size of the devices.
Table shows different breakpoints with bootstrap abbreviation reference.
| S.No. | Width | Reference | .container Width |
|---|---|---|---|
| 1 | Less Than 768px (Mobile) | xs | auto (no width) |
| 2 | Smaller than 991px and greater than 768px (Tablet) | sm | 750px |
| 3 | Smaller than 1200px and greater than 991px (Normal Desktop) | md | 970px |
| 4 | Greater than 1200px (Wide Screen Monitors) | lg | 1170px |
Posted in 
Tags: 
