Bootstrap 5: Containers, Grid System, Display Properties

Bootstrap is a popular front-end framework that simplifies web development by providing a set of pre-designed components, CSS styles, and JavaScript plugins. In this blog post, we'll delve into some key features of Bootstrap 5 by using the provided HTML code as an example. We'll discuss Containers, the Grid System, Bootstrap stacked/horizontal, and Display Properties.

1. Containers

Bootstrap uses container elements to control the layout and spacing of content on a web page. Containers come in two main types: .container and .container-fluid.

.container: This creates a fixed-width container that adapts to different screen sizes while maintaining a maximum width. It is ideal for most content and layout needs.
.container-fluid: This container spans the full width of the viewport, making it suitable for full-width backgrounds or content.

In the code below, you can see that the header and footer are wrapped in .container-fluid, providing a full-width background, while the content area is wrapped in a standard .container.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Betway</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <style>
    </style>
</head>
<body>
    <!-- Container: Full-width header with blue background -->
    <header class="container-fluid bg-primary text-white text-center p-5">
        <h1>Betway</h1>
    </header>
    <!-- Container: Full-width section with green background -->
    <div class="container-fluid bg-success text-white text-center p-3">
        <h3>Carousel Section</h3>
    </div>
    <!-- Container: Content area with a grid system -->
    <div class="container-fluid">
        <!-- ... -->
    </div>
    <!-- ... -->
</body>
</html>

2. Grid System

The Bootstrap Grid System is a powerful layout tool that divides a web page into a 12-column grid. This grid system helps in creating responsive and structured layouts. Grid columns are marked with .col-* classes, where * is the number of columns a specific element should span.

In the code below, we used the following grid column classes:

.col-12: The header and footer both have a .col-12 class, meaning they span the full width of their respective containers.
.col-lg-9 and .col-lg-3: In the main content area, we used these classes to create a 9-column and 3-column layout for larger screens (defined as 'lg' size).
.col-sm-12: For smaller screens (defined as 'sm' size), we used a .col-sm-12 class, which means the content area will span the full width.

<!-- Container: Content area with a grid system -->
<div class="container-fluid">
    <div class="row">
        <!-- 9-column content for large screens, 12-column for small screens -->
        <div class="col-12 col-lg-9 bg-dark">
            <div class="row">
                <!-- 3-column sidebar for large screens, hidden on smaller screens -->
                <div class="bg-secondary d-none d-lg-block col-lg-3">
                    <h3> column 4 </h3>
                    <p>Am testing</p>
                    <p>Am testing</p>
                    <p>Am testing</p>
                </div>
                <div class="col-12 col-sm-12 col-lg-9 bg-info">
                    <h3> column 8 </h3>
                    <p>Am testing</p>
                    <p>Am testing</p>
                    <p>Am testing</p>
                    <!-- ... -->
                </div>
            </div>
        </div>
        <!-- ... -->
    </div>
</div>

3. Bootstrap Stacked/Horizontal

Let's create a basic grid system that starts out stacked on extra small devices, before becoming horizontal on larger devices.

The following example shows a simple "stacked-to-horizontal" two-column layout, meaning it will result in a 50%/50% split on all screens, except for extra small screens, which it will automatically stack (100%):

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

4. Display Property

Bootstrap provides utility classes for controlling the visibility of elements based on the screen size. In your code, we have used the following classes:

.d-none and .d-lg-block: The element with .d-none is hidden on all screen sizes, while the one with .d-lg-block is only displayed on larger screens (lg size). This allows you to hide or show elements selectively based on the viewport's width.

<div class="row">
            <div class="col-12 col-lg-9 bg-dark">
                <div class="row">
                    <div class="bg-secondary d-none d-lg-block col-lg-3">
                        <h3> column 4 </h3>
                        <p>Am testing</p>
                        <p>Am testing</p>
                        <p>Am testing</p>
                    </div>
                    <div class="col-12 col-lg-9 bg-info">
                        <h3> column 8 </h3>
                        <p>Am testing</p>
                    </div>
                </div>
            </div>

            <div class="bg-primary col-lg-3 d-none d-lg-block">

                <h4>Section2</h4>
                <p>Resize this responsive page to see the effect!</p>
            </div>

        </div>

Conclusion

Bootstrap 5 offers powerful tools for creating responsive and well-structured web layouts. Containers help control the width and layout of your content, while the grid system facilitates the creation of responsive columns. The use of Bootstrap's responsive classes allows you to customize the display of elements based on different screen sizes, providing a seamless user experience. By leveraging these features, you can design responsive and visually appealing web pages like the one in the example.

Incorporating Bootstrap 5 into your web development projects can save time and ensure a consistent, user-friendly design across various devices and screen sizes.

iRuemu Coding Blog