custom_bs_dark_cards.html

custom_bs_dark_cards.html

<div class="container py-5">
  <h1 class="text-center font-weight-bold text-light mb-5 pb-3 display-4">Responsive <span class="px-2 bg-secondary">Card</span> Component</h1>
  <div class="card-group">
    <div class="col-md-4 py-3">
      <div class="card text-white bg-dark">
        <img src="https://source.unsplash.com/random/800x400/?caferacer" class="card-img-top" alt="Card Component">
        <div class="card-body">
          <div class="card-title">
            <h5><a href="javascript:;">CB100 Classic Ride Custom Build</a></h5>
          </div>
          <!-- <p>Customized for enjoying the steet ride.</p> -->
        </div>
        <div class="card-footer bg-dark">Motorcycles <a href="javascript:;" class="text-secondary float-right"><span>&bull;&bull;&bull;</span></a></div>
      </div>
    </div>
    <div class="col-md-4 py-3">
      <div class="card text-white bg-dark">
        <img src="https://source.unsplash.com/random/800x400/?biker" class="card-img-top" alt="Card Component">
        <div class="card-body">
          <div class="card-title">
            <h5><a href="javascript:;">Black Bomber 1966 Classic</a></h5>
          </div>
          <!-- <p>Owner's wanted to have a new classic touch.</p> -->
        </div>
        <div class="card-footer bg-dark">Motorcycles <a href="#" class="text-secondary float-right"><span>&bull;&bull;&bull;</span></a></div>
      </div>
    </div>
    <div class="col-md-4 py-3">
      <div class="card text-white bg-dark">
        <img src="https://source.unsplash.com/random/800x400/?moto" class="card-img-top" alt="Card Component">
        <div class="card-body">
          <div class="card-title">
            <h5><a href="javascript:;">CB450T Hawk 82 Cafe Racer</a></h5>
          </div>
          <!-- <p>Custom build into cafe racer motorbike.</p> -->
        </div>
        <div class="card-footer bg-dark">Motorcycles <a href="#" class="text-secondary float-right"><span>&bull;&bull;&bull;</span></a></div>
      </div>
    </div>
    <div class="col-md-4 py-3">
      <div class="card text-white bg-dark">
        <img src="https://source.unsplash.com/random/800x400/?harley" class="card-img-top" alt="Card Component">
        <div class="card-body">
          <div class="card-title">
            <h5><a href="javascript:;">1941 Harley Davidson Knucklehead</a></h5>
          </div>
          <!-- <p>Vintage ride for living the memories.</p> -->
          </d>
        </div>
        <div class="card-footer bg-dark">Motorcycles <a href="#" class="text-secondary float-right"><span>&bull;&bull;&bull;</span></a></div>
      </div>
    </div>
    <div class="col-md-4 py-3">
      <div class="card text-white bg-dark">
        <img src="https://source.unsplash.com/random/800x400/?scrambler" class="card-img-top" alt="Card Component">
        <div class="card-body">
          <div class="card-title">
            <h5><a href="javascript:;">1944 Harley Davidson Motorcycle</a></h5>
          </div>
          <!-- <p>Vintage ride for living the memories.</p> -->
          </d>
        </div>
        <div class="card-footer bg-dark">Motorcycles <a href="#" class="text-secondary float-right"><span>&bull;&bull;&bull;</span></a></div>
      </div>
    </div>
    <div class="col-md-4 py-3">
      <div class="card text-white bg-dark">
        <img src="https://source.unsplash.com/random/800x400/?motorcycle,technology" class="card-img-top" alt="Card Component">
        <div class="card-body">
          <div class="card-title">
            <h5><a href="javascript:;">1946 Cafe Racer Motorcycle</a></h5>
          </div>
          <!-- <p>Vintage ride for living the memories.</p> -->
          </d>
        </div>
        <div class="card-footer bg-dark">Motorcycles <a href="#" class="text-secondary float-right"><span>&bull;&bull;&bull;</span></a></div>
      </div>
    </div>
  </div>