Need to highlight your product’s features? List them in a distinctive column using default Bootstrap.
For detailed instruction's, view Solodev's How to Use Bootstrap Columns to Create a Stacked List of Features article.
Try out a working example on JSFiddle.
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>
All required CSS is contained with style.css
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>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent