Basic Bootstrap5 pages
There are basically two types of layout bootstrap used to provide:-
Container
Container-fluid
Container
The .container class provides a responsive fixed width container
Let's understand this by following program:-
<html>
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<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
bootstrap 5 Example
Container Layout Page
This is the Example of Container Class
So here the page is having some margin from left and right automatically.
Container-fluid
The .container-fluid class provides a full width container, spanning the entire width of the viewport
Let's understand this by following program:-
<html>
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<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
bootstrap 5 Example
Container-fluid Layout Page
This is the Example of Container-fluid class
