Bootstrap 5 Container

Container

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

    • The table below illustrates how each container’s max-width compares to the original .container and .container-fluid across each breakpoint.

    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
    .container-fluid 100% 100% 100% 100% 100% 100%

    Fixed Container

    Use the .container class to create a responsive, fixed-width container.

    Example

     <div class="container">
      <h1>My First Bootstrap Page</h1>
      <p>This is some text.</p> 
    </div>

    Fluid Container

    Use the .container-fluid class to create a responsive, fixed-width container.

    Example

     <div class="container-fluid ">
      <h1>My First Bootstrap Page</h1>
     <p>This is some text.</p> 
    </div>

    Container Padding

    By default, containers have left and right padding, with no top or bottom padding. Therefore, we often use spacing utilities, such as extra padding and margins to make them look even better. For example, .pt-5 means "add a large top padding":

    Container Border and Color

    Other utilities, such as borders and colors, are also often used together with containers:

    <div class="container p-5 my-5 border"></div>

    <div class="container p-5 my-5 bg-dark text-white"></div>

    <div class="container p-5 my-5 bg-primary text-white"></div>