Open In App

Bootstrap 5 Containers Responsive Containers

Improve
Improve
Like Article
Like
Save
Share
Report

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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
Previous
Next
Share your thoughts in the comments
Similar Reads