CONTAINER BOOTSTRAP 5

bootstrap-logo-in-vectorYou learned from the previous post that Bootstrap requires a containment element to wrap the site’s content. The containers
are used to fill the content within them and there are two classes available:

  • The .container class provides a fixed-width responsive container
  • The .container-fluid class provides a full-width container, which spans the full width of the window.

CONTAINER FIXED

Use the .container class to create a fixed-width responsive container. Note that its width (max-width) will change on different screen sizes:

Breakpoint
Copy to Clipboard

FLUID CONTAINER

Use the .container-fluid class to create a full-width container, which will always occupy the entire width of the screen (the width is always 100%):

Copy to Clipboard

CONTAINER PADDING

By default, containers have left and right fill, with no top or bottom fill. For example, .pt-5 means “add a large top padding“:

<div class=”container pt-5″></div>

BORDER AND COLORS CODE

Copy to Clipboard

RESPONSIVE CONTAINER

You can also use the .container-sm | md | lg | xl classes to determine when the container should be responsive. The maximum container width will change on different screen sizes:

container
Copy to Clipboard

LINKS TO PREVIOUS POST

BOOTSTRAP 5

LINK TO THE CODE ON GITHUB

GITHUB