Back to Course
BootStrap
0% Complete
0/39 Steps
-
Introduction to BootstrapWhat is Bootstrap ?
-
Why Bootstrap ?
-
Bootstrap Setup
-
Customizing Install
-
Responsive Design
-
Container class
-
GridGrid System
-
Bootstrap Grid Column
-
Dynamic Layouts
-
Utility Classes
-
Navigation ComponentsNavs
-
Navbars
-
Page ComponentsHeaders
-
Panels
-
ListGroups
-
Breadcrumbs
-
Labels
-
Buttons
-
Glypgicons
-
Wells
-
FormsCreating forms
-
Inline & horizontal forms
-
Form Validation
-
Bootstrap PluginsAlert Messages
-
Buttons group
-
Scroll Spy
-
Tabs
-
Collapse
-
Modal
-
Customer PluginsBootbox.js
-
DateTime Picker
-
Font Awesome
-
Off-Canvas
-
Image Gallery
-
Social Buttons
-
Sweet Alert
-
ButtonButtons
-
Button Group Button
-
Button Method
Participants2254
In bootstrap, container is used to set the content’s margin. It contains row elements and the row elements are container of columns. This is known as grid system.
There are two container classes in bootstrap:
- .container
- .container-fluid
.container
The .container class provides a responsive fixed width container.
In the below example, the div with class “container” will have a fixed left and right margin and will not take the complete width of it’s parent or the viewport.
<html>
<head>
<title>Bootstrap Container Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="background: lightblue;">
<h1>Bootstrap</h1>
<p>Container Example.</p>
</div>
</body>
</html>
Output:

.container-fluid
The .container-fluid class provides a full-width container which spans the entire width of the viewport.
In the below example, the div with class “container-fluid” will take-up the complete width of the viewport and will expand or shrink when ever the viewport is resized.
<html>
<head>
<title>Bootstrap Container Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" style="background: lightblue;">
<h1>Bootstrap</h1>
<p>Container Fluid Example.</p>
</div>
</body>
</html>
Output:
