Bootstrap 5 Layout

Bootstrap requires the use of the HTML5 doctype, and HTML tag along with the lang attribute, and the correct meta character set.

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head> section.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">	
   </head>
</html>

Include Bootstrap’s CSS and JS. Place the <link> tag in the <head> for CSS, and the <script> tag for JavaScript bundle (including Popper for positioning dropdowns, poppers, and tooltips) before the closing </body>.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" >
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Bootstrap 5 Containers

Bootstrap 5 also requires a container element to wrap site contents. Containers are a fundamental building block of Bootstrap that contain, padding, and alignment to your content within a given device or viewport.

Bootstrap 5 comes with three different containers:

.container - which sets a max-width at each responsive breakpoint
.container-{breakpoint} - which is width: 100% until the specified breakpoint
.container-fluid - which is width: 100% at all breakpoints

	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%

Bootstrap 5 - Column layout

Example 1: Bootstrap 5 '.container' class.

<div class="container">
    <div class="row">
        <div class="col">
            Column
        </div>
        <div class="col">
            Column
        </div>
        <div class="col">
            Column
        </div>
     </div>
</div>

Example 2: Bootstrap 5 '.container-fluid' class.

<div class="container-fluid">
    <div class="row">
        <div class="col">
            Column
        </div>
        <div class="col">
            Column
        </div>
        <div class="col">
            Column
        </div>
     </div>
</div>