Creating Modern Container Layouts

Bootstrap's grid system is arguably its most impressive and most commonly used feature, as it solves the important task of horizontal and vertical positioning of a page's contents, allowing the contents to be structured across multiple display widths.

The grid system has five such core breakpoints:

Breakpoint	Short Form	Full Form	Description
< 576px	xs	extra small	extra small screens encountered on mobile devices for example, portrait mobile phone screens
>=576px	sm	small	Refers to your average mobile device screen for example, landscape mobile phone screens
>=768px	md	medium	Refers to medium screen sizes, such as those encountered with tablets
>=992px	lg	large	Refers to large screens, such as those encountered on laptop devices and desktops
>=1200px	xl	extra large	Refers to extra-large screens, such as those on wide-screen desktop monitors
>=1400px	xxl	extra extra large	Refers to extra extra-large screens, such as those on wide-screen desktop monitors,TV etc,

Containers

Containers are at the core of Bootstrap's grid system, and they typically form the root of all Bootstrap pages. A container is exactly what it sounds like—an element for holding all other content within a section of a page.By remaining toward the top of the element hierarchy, a container provides the base for how the section contained within it is rendered.

There are two types of container classes provided by Bootstrap:

container
container-fluid

container for various breakpoint

container-xs
container-sm
container-md
container-lg
container-xl
container-xxl

The max-width of the container based on each breakpoint.

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Class Name	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
`.container`	100%	540px	720px	960px	1140px	1320px
`.container-sm`	100%	540px	720px	960px	1140px	1320px
`.container-md`	100%	100%	720px	960px	1140px	1320px
`.container-lg`	100%	100%	100%	960px	1140px	1320px
`.container-xl`	100%	100%	100%	100%	1140px	1320px
`.container-xxl`	100%	100%	100%	100%	100%	1320px
`.container-fluid`	100%	100%	100%	100%	100%	100%

Container-fluid

It takes up the full width of the viewport, except for 15 pixels padding left and right
It doesn't concern itself with breakpoints

The container-fluid allows the page to be fully responsive to all widths, providing smoother transitions. When responding to breakpoints, container snaps the layout to the appropriate width, while container-fluid progressively alters the layout.

Example

The provided code is an HTML file that includes Bootstrap 5 and custom CSS and JavaScript code.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  <link rel="stylesheet" href="css/base.css">
  <style>
    .container-xl,
    .container-fluid
    {
      background-color: rgb(11, 141, 255);
      color:white;
    }
  </style>

</head>
<body>
  <div class="container-fluid" id="div">
    <h1>Tutor Joes</h1>
    <h2 id="size"></h2>
  </div>

  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  <script>
    window.onresize=function(event){
      var width=document.getElementById("div").clientWidth;
      document.getElementById("size").innerHTML=width;
    }
  </script>

</body>
</html>

Let's go through the code step by step:

window.onresize=function(event){...} This is an event handler that listens for the "resize" event on the window object, which is triggered when the window is resized. When the event is triggered, the JavaScript code inside the function is executed.

clientWidth This line of code retrieves the clientWidth property of the element with the ID "div", which represents the width of the element in pixels.

The provided code is an HTML document that includes Bootstrap 5 CSS and JavaScript files, along with custom CSS and JavaScript code. It creates a responsive web page with a container div, a heading, and a dynamically updated h2 element displaying the width of the div element.

css/base.css

body{
  margin-top: 70px;
}

body::before{
  content: 'XS';
  color:orangered;
  font-size: 30px;
  position: fixed;
  font-weight: bold;
  top: 10px;
  left: 10px;
}

@media (min-width: 576px){
  body::before{
    content: 'SM';
  }
}


@media (min-width: 768px){
  body::before{
    content: 'MD';
  }
}

@media (min-width: 992px){
  body::before{
    content: 'LG';
  }
}

@media (min-width: 1200px){
  body::before{
    content: 'XL';
  }
}
@media (min-width: 1400px){
  body::before{
    content: 'XXL';
  }
}

Live Preview