Container
Container-fluid
Container
Through this container we get the layout in which we can see some margin is fixed from both left and right.
Let's understand this by following program:-
<html>
<head>
<title> bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="Container">
<h1>Container Layout Page</h1>
<p> This is the Example of Container Class</p>
</div>
</body>
</html>
Output of this Program
So here the page is having some margin from left and right automatically.
Container-fluid
Through this container we get the layout in which we will not see any margin, it is fixed from both left and right side.
Let's understand this by following program:-
<html>
<head>
<title> bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Container-fluid Layout Page</h1>
<p>This is the Example of Container-fluid class</p>
</div>
</body>
</html>
Output of this Program
So here we didn’t get any type of margin.
