Bootstrap 3 container and container-fluid Classes with Example

Ad Banner Image

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.

Bootstrap 3 container Class Example Code
Fig.1 – .container Class Example Code

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.

Bootstrap 3 container fluid Class Example Code
Fig.2 – .container-fluid Class Example Code

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
Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress