---
title: "Containers in Bootstrap"  
description: "Containers in Bootstrap"  
author: "Ethan Karla"  
published: 2021-07-28  
updated: 2021-07-28  
canonical: https://www.mindstick.com/forum/156590/containers-in-bootstrap  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 2 minutes  

---

# Containers in Bootstrap

What are [containers](https://www.mindstick.com/interview/2194/which-containers-use-a-flowlayout-as-their-default-layout-in-java) in [Bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel)? How many types of containers are there in Bootstrap?

## Replies

### Reply by Anonymous User

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!


---

Original Source: https://www.mindstick.com/forum/156590/containers-in-bootstrap

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
