Containers in Bootstrap

Ethan Karla 419 28 Jul 2021

What are containers in Bootstrap? How many types of containers are there in Bootstrap?

Ask by Ethan Karla

Updated 28 Jul 2021

1 Answers

Anonymous User 29 Jul 2021

Containers are the most basic layout commonly used to show the main content or section of your HTML file. They have some padding, margin and through some CSS we will adjust or align the content within it. While containers can be nested, most of the layouts do not require nested containers as per the requirement of the developer.

Bootstrap comes with three different containers:

.container, which sets a max-width at each responsive breakpoint
.container-fluid, which is width: 100% at all breakpoints
.container-{breakpoint}, which is width: 100% until the specified breakpoint

Below is an example for the container :

<!doctype html>
<html lang='en'>
<head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- Bootstrap CSS -->
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
    <title>Hello, world!</title>
</head>
<body>
    <div class='container my-3 '>100% wide </div>
    <div class='container-sm my-3'>100% wide until small breakpoint</div>
    <div class='container-md my-3'>100% wide until medium breakpoint</div>
    <div class='container-lg my-3'>100% wide until large breakpoint</div>
    <div class='container-xl my-3'>100% wide until extra large breakpoint</div>
    <div class='container-xxl my-3'>100% wide until extra extra large breakpoint</div>
    <!-- Optional JavaScript; choose one of the two! -->
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js' integrity='sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p' crossorigin='anonymous'></script>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js' integrity='sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF' crossorigin='anonymous'></script>
    -->
</body>
</html>

Hope this helps you to make your reasoning,

Happy Coding!

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

forum

Containers in Bootstrap

Can you answer this question?

1 Answers