Run
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Responsive Bootstrap 5 Layout</title> <!-- Bootstrap 5.3 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap Icons --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"> <style> .feature-card { min-height: 100%; } </style> </head> <body> <!-- ✅ Navbar --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="#">MyWebsite</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"><a class="nav-link active" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="#">Features</a></li> <li class="nav-item"><a class="nav-link" href="#">Services</a></li> <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> </ul> </div> </div> </nav> <!-- ✅ Hero Section --> <header class="bg-primary text-white text-center py-5"> <div class="container"> <h1>Welcome to My Bootstrap 5 Website</h1> <p class="lead">Fully Responsive with Bootstrap Grid System</p> <a href="#" class="btn btn-light btn-lg">Get Started</a> </div> </header> <!-- ✅ Features Section --> <section class="container my-5"> <h2 class="text-center mb-4">Our Features</h2> <div class="row"> <div class="col-md-4"> <div class="card feature-card shadow p-3"> <div class="card-body text-center"> <i class="bi bi-speedometer2 display-4 text-primary"></i> <h4 class="card-title mt-3">Fast & Optimized</h4> <p class="card-text">Our website loads quickly and is optimized for performance.</p> </div> </div> </div> <div class="col-md-4"> <div class="card feature-card shadow p-3"> <div class="card-body text-center"> <i class="bi bi-shield-lock display-4 text-danger"></i> <h4 class="card-title mt-3">Secure</h4> <p class="card-text">Security is our top priority with strong encryption methods.</p> </div> </div> </div> <div class="col-md-4"> <div class="card feature-card shadow p-3"> <div class="card-body text-center"> <i class="bi bi-phone display-4 text-success"></i> <h4 class="card-title mt-3">Mobile Friendly</h4> <p class="card-text">Looks great on all screen sizes with a fully responsive design.</p> </div> </div> </div> </div> </section> <!-- ✅ Responsive Grid Layout --> <section class="container my-5"> <h2 class="text-center mb-4">Our Work</h2> <div class="row"> <div class="col-12 col-sm-6 col-md-4 col-lg-3"> <div class="card shadow p-2"> <div class="card-body text-center"> <h5 class="card-title">Project 1</h5> <p class="card-text">Description of Project 1.</p> </div> </div> </div> <div class="col-12 col-sm-6 col-md-4 col-lg-3"> <div class="card shadow p-2"> <div class="card-body text-center"> <h5 class="card-title">Project 2</h5> <p class="card-text">Description of Project 2.</p> </div> </div> </div> <div class="col-12 col-sm-6 col-md-4 col-lg-3"> <div class="card shadow p-2"> <div class="card-body text-center"> <h5 class="card-title">Project 3</h5> <p class="card-text">Description of Project 3.</p> </div> </div> </div> <div class="col-12 col-sm-6 col-md-4 col-lg-3"> <div class="card shadow p-2"> <div class="card-body text-center"> <h5 class="card-title">Project 4</h5> <p class="card-text">Description of Project 4.</p> </div> </div> </div> </div> </section> <!-- ✅ Footer --> <footer class="bg-dark text-white text-center py-3"> <div class="container"> <p class="mb-0">© MyWebsite. All rights reserved.</p> </div> </footer> <!-- Bootstrap 5.3 JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Go to
Tutorialdeep Homepage