bootstrap-stacked-lists

Need to highlight your product’s features? List them in a distinctive column using default Bootstrap.

Tutorial

For detailed instruction's, view Solodev's How to Use Bootstrap Columns to Create a Stacked List of Features article.

Demo

Try out a working example on JSFiddle.

HTML

The tutorial contains the following basic HTML markup.

<div class="row">
          <div class="col-md-10 col-lg-5 col-xl-4 mt-lg-0 pr-lg-0">
            <div class="list-container text-white p-5">
              <h3>Types of Spacecraft</h3>
              <p class="lead fw-500 mt-3">Moving you from the Earth to the Moon</p>
              <ul class="mt-4 wrap">
                <li><i class="fa fa-rocket" aria-hidden="true"></i>Flyby spacecraft</li>
                <li><i class="fa fa-rocket" aria-hidden="true"></i>Orbiter spacecraft</li>
                <li><i class="fa fa-rocket" aria-hidden="true"></i>Atmospheric spacecraft</li>
                <li><i class="fa fa-rocket" aria-hidden="true"></i>Lander spacecraft</li>
                <li><i class="fa fa-rocket" aria-hidden="true"></i>Rover spacecraft</li>
                <li><i class="fa fa-rocket" aria-hidden="true"></i>Penetrator spacecraft</li>
                <li><i class="fa fa-rocket" aria-hidden="true"></i>Observatory spacecraft</li>
                <li><i class="fa fa-rocket" aria-hidden="true"></i>Communications spacecraft</li>
              </ul>
              <div class="pt-3">
                <a href="#" class="text-white">Join the LunarXP mission where new worlds await.<span class="pr-2 fa fa-long-arrow-right"></span></a>
              </div>
            </div>
          </div>
</div>

CSS

All required CSS is contained with style.css

External Resources

This tutorial includes the following third party resources.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>