Bootstrap 5 Containers Responsive Containers
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.
HTML
<!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 =
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.
HTML
<!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 =
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
Last Updated :
29 Nov, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...