Open In App

Bootstrap 5 Layout Containers

Last Updated : 07 May, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap5 Layout Containers are considered the most basic layout that can be used and they can be used to contain other layouts. Containers are basically used to add pad the contents inside or center the items inside the container. In this article, we’ll see Bootstrap 5 Layout Containers.

Layout Containers: There are three types of containers available in Bootstrap i.e., Default container, Fluid container, and responsive container.

  • Default Container: This is the most simple one with all the basic necessities. The default Container is a responsive container and has a fixed width for every breakpoint or screen size like small, medium, large, and so on. 
  • Fluid containers: This is used to utilize the whole space that is provided to the container. The Fluid Container is a container that occupies all the space available from one end to the other end for every breakpoint or screen size like small, medium, large, and so on.
  • Responsive Container: This is used to set a custom responsive container. The Responsive Container is the one that becomes a container after specifying the specific breakpoint or screen size like sm, md, lg, xl and xxl. Before hitting that breakpoint size which is specified it acts as a Fluid container.
  • Sass: It has a set of predefined container classes which makes building layouts easier. We can customize it by changing the Sass map. 

Syntax:

<div class="Container-class">
    // Content
</div>

 

Example 1: The code demonstrates how we can apply the default and fluid container in basic <div> element. Here the first div is a Default container and the second one is the Fluid container.

HTML




<!doctype html>
<html lang="en">
  
<head>
    <link href=
          rel="stylesheet">
    <script src=
    </script>
</head>
  
<body>
    <h1 class="mt-3 text-success">
        GeeksforGeeks
    </h1>
    <h4>Bootstrap 5 Layout Containers</h4>
    <div class="container bg-secondary p-4 mt-3">
        <nav class="navbar navbar-expand-lg 
                    navbar-light bg-light">
            <a class="navbar-brand" 
               href="#">
                This is a navbar inside a Div 
                which is a default Container.
            </a>
        </nav>
    </div>
    <div class="container-fluid bg-secondary p-4 mt-3">
        <nav class="navbar navbar-expand-lg
                    navbar-light bg-light">
            <a class="navbar-brand" 
               href="#">
                This is a navbar inside a Div 
                which is a Fluid Container
            </a>
        </nav>
    </div>
</body>
  
</html>


Output:

 

Example 2: The code demonstrates the Responsive container in an <div> element. The first div attains container properties after sm viewport size, the second after md viewport size, and the last one after lg viewport size.

HTML




<!doctype html>
<html lang="en">
  
<head>
    <link href=
          rel="stylesheet">
    <script src=
    </script>
</head>
  
<body>
    <h1 class="mt-3 text-success">
        GeeksforGeeks
    </h1>
    <h4>Bootstrap 5 Layout Containers</h4>
    <div class="container-sm bg-secondary p-4 mt-3">
        <nav class="navbar navbar-expand-lg
                    navbar-light bg-light">
            <a class="navbar-brand" 
               href="#">
                This is a navbar inside a Div which 
                is a Container after sm viewport size.
            </a>
        </nav>
    </div>
    <div class="container-md bg-success p-4 mt-3">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" 
               href="#">
                This is a navbar inside a Div which
                is a Container after md viewport size
            </a>
        </nav>
    </div>
    <div class="container-lg bg-dark p-4 mt-3">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" 
               href="#">
                This is a navbar inside a Div which
                is a Container after lg viewport size
            </a>
        </nav>
    </div>
</body>
  
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/layout/containers/



Previous Article
Next Article

Similar Reads

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 54
3 min read
Bootstrap5 Containers Fluid containers
Bootstrap 5 Fluid Containers are used to make containers that span the entire width of the screen i.e. they span the entire width of the viewport. Containers Fluid Containers Class: container-fluid: This class is used to make a fluid container.Syntax: &lt;div class="container-fluid"&gt; ... &lt;/div&gt; Example 1: In this example, we use the alert
2 min read
ReactJS MDBootstrap Containers Layout
MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Containers Layout in ReactJS MDBootstrap. Containers Layout is the bootstrap's basic building block for containing, padding, and aligning your content
2 min read
Bootstrap 5 Containers Sass
Bootstrap5 Containers Sass has a set of predefined container classes which makes building layouts easier. We can customize it by changing the Sass map. We can also make our own containers with Bootstrap 5 SASS mixins. Steps to override SCSS of Bootstrap: Step 1: Install bootstrap using the following command npm i bootstrap Step 2: Create your custo
3 min read
Bootstrap 5 Containers Default Container
Containers are the most fundamental layout component in Bootstrap, which is necessary if you want to use the pre-installed grid system. The purpose of containers is to hold, center(at times), and occasionally add some padding to the content they hold. Although containers can be nested, most layouts don't call for them. The Default Container is the
2 min read
Bootstrap 5 Navbar Containers
The container layout can define the main frame of the page using header, content, sidebar, and footer components. We can also add a navbar at the top of the webpage using the container navbar component. This is not that important but you can wrap up the nav bar in a container to center it on a page but an inner container is required in that case. B
2 min read
Containers in Bootstrap with examples
Containers in Bootstrap are foundational elements that encapsulate and organize content within a defined device or viewport. They offer a responsive, fixed-width layout, ensuring proper alignment and padding, while adapting smoothly to different screen sizes for consistent layout presentation. There are two container classes in bootstrap:   ClassDe
2 min read
Bootstrap 5 Layout Form Grid
Bootstrap 5 Layout Form Grid is used to create a complex form using grid classes. The form grid layout required multiple columns of different widths and alignments. To create a form grid, we use .row and .col classes. Form Grid Layout used Classes: .row: This class is used to create a row of a form layout..col: This class is used to create columns
2 min read
Bootstrap 4 | Holy Grail Layout
The Holy Grail Layout is a classic CSS problem in web development. Although there are a lot of creative solutions developed in HTML and CSS, the problem faced was that it involved sacrifices where enriching one feature is often compromised at the expense of the others. Modern frameworks such as Bootstrap 4 provides utilities for implementing this l
3 min read
Bootstrap 4 Fixed Layout
Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. This is the most popular HTML, CSS, and JavaScript framework for developing responsive websites. It solves the cross-browser compatibility issue. The following class sets a maximum width at each responsive breakpoint. Syntax: .container Bootst
3 min read