Bootstrap 5 Containers

Bootstrap requires a containing element to wrap site contents. Containers are used to pad the content inside of them, Following are the container classes available in bootstrap 5

.container : a responsive fixed width container
.container-fluid : full width container, wrapping the entire width of the viewport
.container-{breakpoint}, which is width: 100%

Extra small

Example container

<!doctype html>
<html lang="en">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>

<!-- Sample Code ! -->

	<div class="container">
  		<h1>My First Bootstrap Page</h1>
 	 	<p>This is some text.</p>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <script src="" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Copy the above code to a notepad and save it as example.html then open it in a browser.

The XXL breakpoint (=1400px) is new in Bootstrap 5, while the largest breakpoint in Bootstrap 4 is Extra large (=1200px).

Change the .container class to .container-fluid and see the changes . this will always span the entire width of the screen (width is always 100%):

Posts created 494

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top