Bootstrap 5 Grid XXL

Last Updated : 08 Feb, 2024

Bootstrap is a free and open-source tool for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, the websites are perfect for all browsers (IE, Firefox, and Chrome) and all sizes of screens (Desktop, Tablets, Phablets, and Phones). It provides a Faster and Easier way for Development. It is used to create Platform-independent web pages.

Grid XXL

Bootstrap Grid is a layout system that uses a 12-column grid to style a website in a responsive and consistent way. When the screen size is ≥1400px, an extra extra large grid aligns itself. You can specify variable width by including a number with the class, for example, .container-xxl-4. If the screen size is less than 1400px, the element takes up the entire width of the screen.

Table for Container Sizes for Different Screen Widths

class	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥ 992px	X-large ≥1200px	XX-Large ≥ 1400px
.container	100%	540px	720px	960px	1140px	1320px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px

Syntax

<tag_name  class="class-xxl">Content of the element </tag_name>

Table of Content

Using Only XXL
Auto Layout Columns

Using Only XXL

XXL is referred as extra extra large,it occupies the screen size ≥1400 px.For the screen size greater than 1400 px if there are more than one column ,they are equally divided for the screen size.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid medium</title>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
            integrity=
"sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8="
            crossorigin="anonymous">
      </script>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
          integrity="sha256-MBffSnbbXwHCuZtgPYiwMQbfE7z+GOZ7fBPCNB06Z98="
          crossorigin="anonymous">
    <style>
        [class^="col"],
        h2,
        p {
            padding: 1rem;
            background-color: green;
            border: 2px dashed #f3f3f3;
            color: #fff;
        }
    </style>
 
</head>
 
<body>
    <div class="container text-center ">
        <h2>Welcome to GeeksforGeeks</h2>
        <p>Equal width </p>
        <div class="row">
            <div class="col-xxl">Element 1</div>
            <div class="col-xxl">Element 2</div>
            <div class="col-xxl">Element 3</div>
            <div class="col-xxl">Element 4</div>
        </div>
        
    </div>
</body>
 
</html>

Output: The output contains the container with heading ,paragraphs along with row and columns.As the screen size of the laptop is less than required each element takes nearly 100% of the screen size.

jrty

Auto Layout Columns

Auto layout columns are used to create a responsive websites.As the screen size changes from extra large to large or any other, columns align accordingly to occupy the screen size .Each column add to occupy 12 units.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">
    <title>Grid medium</title>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
            integrity=
"sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8="
            crossorigin="anonymous">
      </script>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
          integrity="sha256-MBffSnbbXwHCuZtgPYiwMQbfE7z+GOZ7fBPCNB06Z98="
          crossorigin="anonymous">
    <style>
         [class*="col"]  ,
        h2,
        p {
            padding: 1rem;
            background-color: green;
            border: 2px solid #fff;
            color: #fff;
        }
    </style>
 
</head>
 
<body>
    <div class="container text-center ">
        <h2>Welcome to GeeksforGeeks</h2>
        <p>Variable width content</p>
        <div class="row">
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  HTML
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  HTML
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  HTML
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  HTML
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  CSS
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  CSS
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  CSS
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  CSS
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  JavaScript
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  JavaScript
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  JavaScript
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  JavaScript
              </div>
        </div>
        <div class="row">
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  ReactJS
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  ReactJS
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  ReactJS
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  ReactJS
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  ReactJS
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  ReactJS
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  NextJS
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  NextJS
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  NextJS
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  NextJS
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  NextJS
              </div>
            <div class=" col-xl-2 col-lg-3 col-md-4 
                        col-sm-6 col-xs-12"> 
                  NextJS
              </div>
        </div>
    </div>
</body>
 
</html>

Output:

ghu

Explanation:

In each row ,12 column elements are used.Each element contains classes to align the element with the respective screen size.For example when screen size is large i.e greater than 992px ,then each row has 4 columns according to the class col-lg-3 .As we reduce the screen size the number of column reduces and occupies 12 units.

Suggest improvement

Bootstrap 5 Grid XLarge

Share your thoughts in the comments

Bootstrap 5 Grid XXL

Grid XXL

Table for Container Sizes for Different Screen Widths

Syntax

Using Only XXL

HTML

Auto Layout Columns

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?