Responsive Web Designing Using Bootstrap

Previous Next

Bootstrap helps you build responsive websites easily. It uses a grid system with rows and columns to create layouts that adapt to different screen sizes.

Example


<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Bootstrap sample project</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
	rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" 
	crossorigin="anonymous">
    <link rel="stylesheet" href="btstrp-rspnve.css">
</head>

<body>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-sm-6">
                    <div class="inner-box">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita 
						exercitationem architecto saepe iure id sequi, quia hic optio impedit cupiditate
						ad voluptatem laudantium dolores mollitia quaerat. Ipsum laboriosam possimus
						fugit.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="inner-box">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, minima
						reiciendis nesciunt assumenda in omnis impedit voluptate itaque laudantium rerum 
						ut ab eius! Ab hic soluta non, est enim at!</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-3 col-lg-4 col-sm-6">
                    <div class="inner-box">
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam sapiente, sed
						ipsum, nihil officia pariatur labore accusamus adipisci amet ratione eaque sint 
						omnis consectetur hic maiores non et, qui iste.</p>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-sm-6">
                    <div class="inner-box">
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam sapiente, se
						ipsum, nihil officia pariatur labore accusamus adipisci amet ratione eaque sint
						omnis consectetur hic maiores non et, qui iste.</p>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-sm-6">
                    <div class="inner-box">
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam sapiente, sed
						ipsum, nihil officia pariatur labore accusamus adipisci amet ratione eaque sint
						omnis consectetur hic maiores non et, qui iste.</p>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-12 col-sm-6">
                    <div class="inner-box">
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam sapiente, sed
						ipsum, nihil officia pariatur labore accusamus adipisci amet ratione eaque sint
						omnis consectetur hic maiores non et, qui iste.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

Run Code

Below is a step-by-step explanation of the code.

Two-Column Layout

This layout divides the page into two columns: one takes up 8/12 (or two-thirds) of the width on large screens and 6/12 (half) on small screens.


<div class="row">
    <div class="col-lg-8 col-sm-6">
        <div class="inner-box">
            <p>Content for column 1</p>
        </div>
    </div>
    <div class="col-lg-4 col-sm-6">
        <div class="inner-box">
            <p>Content for column 2</p>
        </div>
    </div>
</div>

2. Four-Column Layout

Here, we create four columns. Each column's size is defined differently for various screen sizes:

col-xl-3: Takes up 3/12 of the width on extra-large screens.
col-lg-4: Takes up 4/12 (one-third) on large screens.
col-sm-6: Takes up 6/12 (half) on small screens.
The last column spans the full width on large screens with col-lg-12.


<div class="row">
    <div class="col-xl-3 col-lg-4 col-sm-6">
        <div class="inner-box">
            <p>Content for column 1</p>
        </div>
    </div>
    <div class="col-xl-3 col-lg-4 col-sm-6">
        <div class="inner-box">
            <p>Content for column 2</p>
        </div>
    </div>
    <div class="col-xl-3 col-lg-4 col-sm-6">
        <div class="inner-box">
            <p>Content for column 3</p>
        </div>
    </div>
    <div class="col-xl-3 col-lg-12 col-sm-6">
        <div class="inner-box">
            <p>Content for column 4</p>
        </div>
    </div>
</div>

3. Responsive Design Features

The code uses Bootstrap's responsive classes to ensure a flexible layout on different devices:

col-lg: Columns for large screens (≥992px).
col-sm: Columns for small screens (≥576px).
col-xl: Columns for extra-large screens (≥1200px).

Conclusion

This tutorial shows how to use Bootstrap's grid system to create responsive layouts with two and four-column designs. By adjusting the column classes, you can create designs that adapt seamlessly to different screen sizes.

Previous Next