Creating a Responsive Layout with Bootstrap

Peace
In this article, I'll walk you through the process of building a simple and responsive layout using Bootstrap 5.

This is the HTML structure that I am going to walk you through:

<section class="bg-dark text-light p-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-12 my-5">
                <h1 class="display-4">Become a <span class="text-warning">Web Developer</span></h1>
                <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum dicta inventore magnam illo doloremque mollitia quis sint ullam atque officiis vel voluptas eum blanditiis unde autem maiores beatae, perferendis neque.</p>
                <button class="btn btn-primary btn-lg">Start The Enrollment</button>
            </div>
            <div class="col-lg-6 col-12 d-flex align-items-center">
                <img class="img-fluid w-100" src="img/coding-woman.jpg" alt="">
            </div>
        </div>
    </div>
</section>

This simple section includes two columns—one for text and one for an image. Let's explore how Bootstrap handles responsiveness in this layout.

The Container and Rows:

<div class="container">
    <div class="row">
        ...
    </div>
</div>

.container: This class creates a responsive fixed-width container. The content inside the container will automatically adjust its width depending on the screen size.
.row: Inside the container, we have a row. Bootstrap uses a 12-column grid system, where content inside the row is divided into columns.

Responsive Columns with Bootstrap:

<div class="col-lg-6 col-12 my-5">
    <h1 class="display-4">Become a <span class="text-warning">Web Developer</span></h1>
    <p class="lead">Lorem ipsum dolor sit amet...</p>
    <button class="btn btn-primary btn-lg">Start The Enrollment</button>
</div>

Column Classes:

.col-lg-6: This means that on large screens (e.g., desktops), this column will take up 6 of the 12 grid columns (50% of the screen width).
.col-12: On smaller screens (like mobile devices), the column will occupy all 12 columns, making it take up the full width of the container.

This allows the content to be flexible and adapt to different screen sizes. For example:

On desktops: the content and image will be placed side by side, each taking up 50% of the screen.
On mobile devices: the text and image will stack vertically, each occupying the full width.

Making Images Responsive:

<img class="img-fluid w-100" src="img/coding-woman.jpg" alt="">

.img-fluid: This class ensures that the image is responsive, scaling with the screen size without overflowing the container.
.w-100: This forces the image to take up the full width of its container, which helps prevent it from squishing or becoming disproportionate on smaller screens.

By combining these classes, the image will always scale nicely within its allocated column, adapting perfectly for mobile and desktop views.

Ensuring Vertical Alignment:

<div class="col-lg-6 col-12 d-flex align-items-center">
    <img class="img-fluid w-100" src="img/coding-woman.jpg" alt="">
</div>

.d-flex: Bootstrap's Flexbox utility class makes it easy to align content.
.align-items-center: This centers the image vertically within its container, ensuring that the layout looks balanced and professional.

At the End:
This example demonstrates how easy it is to create a flexible and responsive layout using Bootstrap. With minimal effort, you can make your website look great on screens of all sizes, providing users with an optimal experience.

The above is the detailed content of Creating a Responsive Layout with Bootstrap. For more information, please follow other related articles on the PHP Chinese website!