How to create landing page in bootstrap

BootstrapHow-ToBeginner · 4 min read

How to Create a Landing Page in Bootstrap Quickly

To create a landing page in Bootstrap, use its grid system and components like navbar, container, and buttons to build a responsive layout. Start with a container for content, add a navbar for navigation, and use rows and columns to organize sections like hero, features, and footer.

📐

Syntax

A Bootstrap landing page uses these main parts:

<nav>: Navigation bar with navbar classes.
<div class="container">: Wraps page content for proper spacing.
Grid system: Use row and col classes to create responsive columns.
Buttons: Use btn classes for call-to-action buttons.

html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Brand</a>
  </div>
</nav>

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <!-- Content here -->
    </div>
    <div class="col-md-6">
      <!-- Content here -->
    </div>
  </div>
  <button class="btn btn-primary">Call to Action</button>
</div>

💻

Example

This example shows a simple landing page with a navigation bar, a hero section with a heading and button, and a footer. It uses Bootstrap's grid and components for a clean, responsive design.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Landing Page</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">MyBrand</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <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">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <header class="bg-primary text-white text-center py-5">
    <div class="container">
      <h1>Welcome to Our Landing Page</h1>
      <p class="lead">Simple, clean, and responsive design with Bootstrap.</p>
      <a href="#features" class="btn btn-light btn-lg mt-3">Learn More</a>
    </div>
  </header>

  <section id="features" class="py-5">
    <div class="container">
      <div class="row text-center">
        <div class="col-md-4">
          <h3>Feature One</h3>
          <p>Easy to use and customize.</p>
        </div>
        <div class="col-md-4">
          <h3>Feature Two</h3>
          <p>Responsive on all devices.</p>
        </div>
        <div class="col-md-4">
          <h3>Feature Three</h3>
          <p>Built with modern tools.</p>
        </div>
      </div>
    </div>
  </section>

  <footer class="bg-light text-center py-3">
    <div class="container">
      <small>&copy; 2024 MyBrand. All rights reserved.</small>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A webpage with a top navigation bar labeled 'MyBrand', a blue hero section with white text and a 'Learn More' button, a features section with three columns describing features, and a light footer with copyright text.

⚠️

Common Pitfalls

Common mistakes when creating a Bootstrap landing page include:

Not including the Bootstrap CSS and JS files, causing styles and components to break.
Forgetting the container class, which leads to content touching the edges of the screen.
Using fixed widths instead of Bootstrap's grid classes, which breaks responsiveness.
Not using the navbar toggler button for mobile views, making navigation inaccessible on small screens.

html

<!-- Wrong: Missing container and navbar toggler -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <!-- No toggler button here -->
</nav>
<div>
  <div class="row">
    <div class="col-6">Content</div>
    <div class="col-6">Content</div>
  </div>
</div>

<!-- Right: Proper container and toggler -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu" aria-controls="navMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navMenu">
      <!-- Nav links here -->
    </div>
  </div>
</nav>
<div class="container">
  <div class="row">
    <div class="col-6">Content</div>
    <div class="col-6">Content</div>
  </div>
</div>

📊

Quick Reference

Remember these Bootstrap classes for landing pages:

container: Centers and pads content.
row: Creates horizontal groups of columns.
col-md-*: Defines column width on medium+ screens.
navbar: Styles navigation bar.
btn btn-primary: Styles primary buttons.
text-center, py-5: Utility classes for text alignment and padding.

✅

Key Takeaways

Use Bootstrap's grid system with containers, rows, and columns for responsive layout.

Include the navbar with toggler button for mobile-friendly navigation.

Always link Bootstrap CSS and JS files to enable styles and interactive components.

Use utility classes for spacing and text alignment to keep design clean.

Test your landing page on different screen sizes to ensure responsiveness.