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
Please Login to comment...