Preview:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Bootstrap Layout</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Header -->
    <header class="bg-primary text-white text-center py-5">
        <h1>Welcome to My Page</h1>
        <p>Explore Bootstrap Layouts!</p>
    </header>

    <!-- Main Content -->
    <main class="container my-5">
        <div class="row">
            <!-- Cards Section -->
            <section class="col-lg-8 col-md-7 mb-4">
                <div class="row">
                    <div class="col-sm-6 mb-4">
                        <div class="card shadow-sm">
                            <div class="card-body text-center">Card 1</div>
                        </div>
                    </div>
                    <div class="col-sm-6 mb-4">
                        <div class="card shadow-sm">
                            <div class="card-body text-center">Card 2</div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Sidebar -->
            <aside class="col-lg-4 col-md-5 mb-4">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h2>Sidebar</h2>
                        <p>Sidebar content here.</p>
                    </div>
                </div>
            </aside>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-dark text-white text-center py-3">
        <p>&copy; 2024 My Page</p>
    </footer>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter