Bootstrap5 Layout Containers are considered the most basic layout that can be used and they can be used to contain other layouts. Containers are basically used to add pad the contents inside or center the items inside the container. In this article, we’ll see Bootstrap 5 Layout Containers.
Layout Containers: There are three types of containers available in Bootstrap i.e., Default container, Fluid container, and responsive container.
- Default Container: This is the most simple one with all the basic necessities. The default Container is a responsive container and has a fixed width for every breakpoint or screen size like small, medium, large, and so on.
- Fluid containers: This is used to utilize the whole space that is provided to the container. The Fluid Container is a container that occupies all the space available from one end to the other end for every breakpoint or screen size like small, medium, large, and so on.
- Responsive Container: This is used to set a custom responsive container. The Responsive Container is the one that becomes a container after specifying the specific breakpoint or screen size like sm, md, lg, xl and xxl. Before hitting that breakpoint size which is specified it acts as a Fluid container.
- Sass: It has a set of predefined container classes which makes building layouts easier. We can customize it by changing the Sass map.
Syntax:
<div class="Container-class">
// Content
</div>
Example 1: The code demonstrates how we can apply the default and fluid container in basic <div> element. Here the first div is a Default container and the second one is the Fluid container.
<!doctype html> <html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<h1 class="mt-3 text-success">
GeeksforGeeks
</h1>
<h4>Bootstrap 5 Layout Containers</h4>
<div class="container bg-secondary p-4 mt-3">
<nav class="navbar navbar-expand-lg
navbar-light bg-light">
<a class="navbar-brand" href="#">
This is a navbar inside a Div
which is a default Container.
</a>
</nav>
</div>
<div class="container-fluid bg-secondary p-4 mt-3">
<nav class="navbar navbar-expand-lg
navbar-light bg-light">
<a class="navbar-brand" href="#">
This is a navbar inside a Div
which is a Fluid Container
</a>
</nav>
</div>
</body>
</html>
|
Output:
Example 2: The code demonstrates the Responsive container in an <div> element. The first div attains container properties after sm viewport size, the second after md viewport size, and the last one after lg viewport size.
<!doctype html> <html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<h1 class="mt-3 text-success">
GeeksforGeeks
</h1>
<h4>Bootstrap 5 Layout Containers</h4>
<div class="container-sm bg-secondary p-4 mt-3">
<nav class="navbar navbar-expand-lg
navbar-light bg-light">
<a class="navbar-brand" href="#">
This is a navbar inside a Div which
is a Container after sm viewport size.
</a>
</nav>
</div>
<div class="container-md bg-success p-4 mt-3">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
This is a navbar inside a Div which
is a Container after md viewport size
</a>
</nav>
</div>
<div class="container-lg bg-dark p-4 mt-3">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
This is a navbar inside a Div which
is a Container after lg viewport size
</a>
</nav>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/layout/containers/