Bootstrap Responsive Container

Bootstrap responsive container covers 100% available width of the screen until the specified breakpoint, after which it takes max-widths for each of the higher breakpoins. For example, .container-md is 100% wide to start untill the md breakpoint is reached, where it will scale up with lg, xl, and xxl.

Example
100% wide until small breakpoint

100% wide until medium breakpoint

100% wide until large breakpoint

100% wide until extra large breakpoint

100% wide until extra extra large breakpoint

Bootstrap Responsive Container Classes:

Bootstrap containers have the following types of responsive container classes.

  • container-sm: It specifies 100% width till the sm breakpoint i.e. 540px and above 540px, it takes max-width.
  • container-md: It specifies 100% width till the md breakpoint i.e. 720px and above 720px, it takes max-width.
  • container-lg: It specifies 100% width till the lg breakpoint i.e. 960px and above 960px, it takes max-width.
  • container-xl: It specifies 100% width till the xl breakpoint i.e. 1140px and above 1140px, it takes max-width.
  • container-xxl: It specifies 100% width till the xxl breakpoint i.e. 1320px and above 1320px, it takes max-width.

General Syntax

      <div class="container-{sm|md|lg|xl|xxl}">Responsive Container</div>
  

Source Code

          <div class="container-sm">
   <div class="alert alert-warning mt-4" role="alert">
      <p class="text-center">100% wide until small breakpoint</p>
   </div>
</div>

<div class="container-md">
   <div class="alert alert-success mt-4" role="alert">
      <p class="text-center">100% wide until medium breakpoint</p>
   </div>
</div>

<div class="container-lg">
   <div class="alert alert-info mt-4" role="alert">
      <p class="text-center">100% wide until large breakpoint</p>
   </div>
</div>

<div class="container-xl">
   <div class="alert alert-danger mt-4" role="alert">
      <p class="text-center">100% wide until extra large breakpoint</p>
   </div>
</div>

<div class="container-xxl">
   <div class="alert alert-success mt-4" role="alert">
      <p class="text-center">100% wide until extra extra large breakpoint</p>
   </div>
</div>
        
Source Code:Output

Online Test / Quiz

Web Tutorials

How To Make Bootstrap Responsive Container
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4