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
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">
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>
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">