Bootstrap 5 Containers Responsive containers are used to group HTML elements and also provide support for grid layout. It has in-built responsiveness which is helpful while development.
Bootstrap 5 Responsive Container Classes:
- container-sm: Container small is a class that styles a container that has 100% width till 540px once the width is above 540px it will have a fixed width.
- container-md: Container medium is a class that styles a container that has 100% width till 720px once the width is above 720px it will have a fixed width.
- container-lg: Container large is a class that styles a container that has 100% width till 960px once the width is above 960px it will have a fixed width.
- container-xl: Container large is a class that styles a container that has 100% width till 1140px once the width is above 1140px it will have a fixed width.
- container-xxl: Container large is a class that styles a container that has 100% width till 1320px once the width is above 1320px it will have a fixed width.
Syntax:
<div class="container-*">
...
</div>
Note: Here, * will be replaced by the class values (sm, md, lg, xl & xxl).
Example 1: In this example, we will use containers sm, md, and lg. sm container has 100% until the small breakpoint is reached i.e until 540px similarly for md breakpoint is 720px and for lg it is 960px.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body class="m-2">
<h1 class="text-success text-center">
GeeksForGeeks
</h1>
<h1 class="text-center">
Bootstrap Responsive Containers
</h1>
<div class="container-sm text-success
text-center p-2
border border-success
fw-bolder alert-success">
GeeksForGeeks small container(sm)
</div>
<hr>
<div class="container-md text-success
text-center p-2
border border-success
fw-bolder alert-success">
GeeksForGeeks medium container(md)
</div>
<hr>
<div class="container-lg text-success
text-center p-2
border border-success
fw-bolder alert-success">
GeeksForGeeks large container(lg)
</div>
<hr>
</body>
</html>
Output:
Example 2: In this example, we will use containers xl and xxl. These containers are provided by bootstrap 5 for extra wide devices where the breakpoint size is 1140px for xl and 1320px for xxl. They can be implemented as follows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body class="m-2">
<h1 class="text-success text-center">
GeeksForGeeks
</h1>
<h1 class="text-center">
Bootstrap Responsive Containers
</h1>
<div class="container-xl text-success
text-center p-2
border border-success
fw-bolder alert-success">
GeeksForGeeks extra large container(xl)
</div>
<hr>
<div class="container-xxl text-success
text-center p-2
border border-success
fw-bolder alert-success">
GeeksForGeeks double extra large container(xxl)
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/layout/containers/#responsive-containers