Bootstrap 5 Containers

Containers are fundamental blocks, so every we will do every work inside this, there are two containers

container - keep some left and right space on alrge devices
container-fluid - do not keep extra left and right sapces

So we can define it as in proper way as

container, which sets a max-width at each responsive breakpoint
container-fluid, which is width: 100% at all breakpoints

Containers are also have some breakdowns i am sharing them as a pictue

Default container

<div class="container">
  Content goes here
</div>

Responsive containers

<div class="container-sm">
  100% wide until small breakpoint
</div>
<div class="container-md">
  100% wide until medium breakpoint
</div>
<div class="container-lg">
  100% wide until large breakpoint
</div>
<div class="container-xl">
  100% wide until extra large breakpoint
</div>
<div class="container-xxl">
  100% wide until extra extra large breakpoint
</div>

Fluid containers

<div class="container-fluid">
  Content goes here
</div>

Getting Started

Layout

Customize

Content

Forms

Components

Utlities

Bootstrap 5 Containers