Container Examples

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-dark border-3">
<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>
<div class="container-lg border border-3 border-danger mb-4">
<div class="m-0 p-0 border border-dark border-3">
<div class="m-3 p-3 border border-3 border-dark bg-warning bg-opacity-25">