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:
1.
.container
2.
.container-fluid
Let’s look at each
of the above two class in details with examples:
· .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.
<!-- Bootstrap container class -->
<html>
<head>
<title>Bootstrap Container Example</title>
<!-- Add Bootstrap Links -->
<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>
<!-- Since we are using the class container, the below
div will not take complete width of it's parent. -->
<div class="container bg-success text-light" >
<h1>Beta-Labs</h1>
<p>Complete Tutorial for Web Developers</p>
</div>
</body>
</html>
.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.
<!-- Bootstrap container-fluid class -->
<html>
<head>
<title>Bootstrap Container Example</title>
<!-- Add Bootstrap Links -->
<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>
<!-- Since we are using the class container, the below
div will not take complete width of it's parent. -->
<div class="container-fluid bg-success text-light" >
<h1>Beta-Labs</h1>
<p>Complete Tutorial for Web Developers</p>
</div>
</body>
</html>
