Robert's Resume

Containers

Code

.container

.container-fluid

.container-sm|md|lg|xl

Definitions

container
▪ Provides a responsive fixed width container.
container-fluid
▪ Provides a full width container (spans the entire width of the viewport).
container-sm|md|lg|xl
▪ Determines when the container should be responsive.

Key Points

  • Bootstrap requires a containing element to wrap the site contents.
  • Containers are used to pad the content inside them.
  • By default, containers have left and right padding only, no top or bottom.
  • Breakpoints:
  • XS < 576px
  • S ≥ 576px
  • M ≥ 768px
  • L ≥ 992px
  • XL ≥ 1200px
  • XXL ≥ 1400px
  • The XXL breakpoint is new in Bootstrap 5.
  • At the XS breakpoint, a container will use the full screen.

Fixed Width Container

Add .container to an element.

Full Width Container

Add .container-fluid to an element.

Responsive Container.

This container is set with a medium breakpoint (720px). Default is small.

Add container-sm|md|lg|xl to an element.