Container Examples

The examples below show a few .container examples. The header is responsive also:

<h6 class="display-6 ms-2">Container Examples</h6>

Background classes are not shown below, e.g bg-primary bg-opacity-10

Example 1 - container

A container is responsive, and has breakpoints where the max-width changes.

<div class="container mb-4 border border-3 border-danger">

<div class="m-0 p-0 border border-3 border-dark">
<div class="m-3 p-3 border border-3 border-dark">

Example 2 - container-fluid

A container-fluid occupies 100% of the available space. Also illustrates using a custom border color

<div class="container-fluid mb-4 border border-3 border-dark">

<div class="mt-2 p-2 border border-dark border-3">
<div class="m-3 p-3 border border-5 myBorder">
<style>
   .myBorder {
      border-color: cornflowerblue !important;
   }
</style>

Example 3 - container-lg

A container-lg occupies 100% of the available space until it reaches the large breakpoint.

<div class="container-lg border border-3 border-danger mb-4">

<div class="mt-2 p-2 border border-dark border-3">
<div class="m-3 p-2 border border-3 border-dark bg-warning bg-opacity-25">