Bootstrap Theme Band

Bootstrap Theme: Band

The Band theme is designed to showcase a music group or artist. It highlights music, tours, events, albums, and provides easy ways for fans to connect.

Key Features

Bold, colorful header with band name and logo
Navigation menu for Home, Tour, Music, Contact
Section for upcoming tour dates or events
Embedded music player or album showcase
Photo gallery or band member profiles
Contact form for fan messages or bookings
Responsive and mobile-friendly design

Simple Bootstrap 5 Band Theme Example

html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <title>Band Bootstrap Theme</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />

  <style>

    header {

      background: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1350&q=80') no-repeat center center;

      background-size: cover;

      color: white;

      height: 100vh;

      display: flex;

      flex-direction: column;

      justify-content: center;

      text-align: center;

    }

    .btn-custom {

      background-color: #ff4c4c;

      border: none;

    }

    section {

      padding: 60px 0;

    }

  </style>

</head>

<body>
  <!-- Navbar -->

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">

    <div class="container">

      <a class="navbar-brand" href="#">The Band</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">Home</a></li>

          <li class="nav-item"><a class="nav-link" href="#tour">Tour</a></li>

          <li class="nav-item"><a class="nav-link" href="#music">Music</a></li>

          <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>

        </ul>

      </div>

    </div>

  </nav>
  <!-- Header / Hero -->

  <header id="home">

    <div class="container">

      <h1 class="display-4">Welcome to The Band</h1>

      <p class="lead">Rocking your world with great music</p>

      <a href="#tour" class="btn btn-custom btn-lg mt-3">See Tour Dates</a>

    </div>

  </header>
  <!-- Tour Section -->

  <section id="tour" class="bg-light text-center">

    <div class="container">

      <h2>Upcoming Tour Dates</h2>

      <ul class="list-unstyled">

        <li><strong>Aug 15, 2025</strong> — New York, NY</li>

        <li><strong>Sep 5, 2025</strong> — Los Angeles, CA</li>

        <li><strong>Oct 10, 2025</strong> — Chicago, IL</li>

      </ul>

      <a href="#" class="btn btn-primary mt-3">Buy Tickets</a>

    </div>

  </section>
  <!-- Music Section -->

  <section id="music" class="text-center">

    <div class="container">

      <h2>Listen to Our Music</h2>

      <audio controls>

        <source src="sample-music.mp3" type="audio/mpeg" />

        Your browser does not support the audio element.

      </audio>

      <p class="mt-3">Latest Album: Rock On</p>

    </div>

  </section>
  <!-- Contact Section -->

  <section id="contact" class="bg-light">

    <div class="container">

      <h2 class="text-center mb-4">Contact Us</h2>

      <form style="max-width: 600px; margin: 0 auto;">

        <div class="mb-3">

          <label for="name" class="form-label">Name</label>

          <input id="name" class="form-control" type="text" placeholder="Your Name" />

        </div>

        <div class="mb-3">

          <label for="email" class="form-label">Email</label>

          <input id="email" class="form-control" type="email" placeholder="Your Email" />

        </div>

        <div class="mb-3">

          <label for="message" class="form-label">Message</label>

          <textarea id="message" class="form-control" rows="4" placeholder="Your Message"></textarea>

        </div>

        <button type="submit" class="btn btn-primary w-100">Send Message</button>

      </form>

    </div>

  </section>
  <!-- Footer -->

  <footer class="bg-dark text-white text-center py-3">

    &copy; 2025 The Band. All rights reserved.

  </footer>

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

How to Customize?

Replace header background with your band photo or logo.
Update tour dates and music files.
Add gallery section with band photos or videos.
Integrate social media links and streaming platforms.

Free Bootstrap Band Themes to Explore

Start Bootstrap – Freelancer (good for artists)
BootstrapMade – Music Band (free music theme)
Colorlib – Music (free music-related template)

Bootstrap Theme: Band

Key Features

Simple Bootstrap 5 Band Theme Example

How to Customize?

Free Bootstrap Band Themes to Explore

Related Posts

Bootstrap Forms

Bootstrap Grid Small

Bootstrap JS Popover

Leave a Reply Cancel reply