Skip to main content

Responsive Web Design - Frameworks

There are many free CSS Frameworks that offer Responsive Design.

Bootstrap​

A popular framework is Bootstrap. It uses HTML and CSS to make responsive web pages.

Example of a page with Bootstrap:

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <title>Bootstrap 5 Example</title>  
        <meta charset="utf-8">  
        <meta name="viewport"  content="width=device-width, initial-scale=1">  
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"  rel="stylesheet">  
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>  
    </head>  
    <body>  
        <div class="container-fluid p-5 bg-primary text-white text-center">  
            <h1>My First Bootstrap Page</h1>  
            <p>Resize this responsive page to see the effect!</p>  
        </div>  
        <div class="container mt-5">  
            <div class="row">  
                <div class="col-sm-4">  
                    <h3>Column 1</h3>  
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
                </div>  
                <div class="col-sm-4">  
                    <h3>Column 2</h3>  
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
                </div>  
                <div class="col-sm-4">  
                    <h3>Column 3</h3>  
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
                </div>  
            </div>  
        </div>  
    </body>  
</html>

Table of Contents