solodev/how-it-works-section

how-it-works-section

With a "How it Works" section, you can show the steps to get a service or show your visitors how your product works.

Tutorial

For detailed instruction's, view Solodev's How to Create a "How it Works" Section

Demo

Try out a working example on JSFiddle.

HTML

The tutorial contains the following basic HTML markup.

<!-- How it works section -->
    <section class="how-it-works">
      <div class="container">
        <div class="row pb-5">
          <div class="text-center col-md-8 mx-auto">
            <h2>How it Works</h2>
            <p>SpaceJet is transforming the travel experience, combining sleek, rocket-powered jetcraft with five-star luxury service to the stars. Space has never been closer – go explore it.</p>
          </div>
        </div>
   
        <div class="row content">
          <div class="row pb-5">
   
            <div class="col-md-6 mt-2 mt-md-0 p-2 pl-4 box mb-3">
              <div class="d-flex p-3 bg-white align-items-center justify-content-between">
                <div class="p-1">
                  <h3 class="h4 mt-3 ">SpaceJet training</h3>
                  <p class="mt-3">At SpaceJet we provide complete training before and during your trip so you can enjoy the most thrilling excursions this side of Mars.</p>
                </div>
              </div>
            </div>
   
            <div class="col-md-6 mt-2 mt-md-0 p-2 pl-4 box mb-3">
              <div class="d-flex p-3 bg-white align-items-center justify-content-between">
                <div class="p-1">
                  <h3 class="h4 mt-3 ">Choose Your Flight</h3>
                  <p class="mt-3">Depart conveniently from Orlando, Houston, or Los Angeles</p>
                </div>
              </div>
            </div>
   
            <div class="col-md-6 mt-2 mt-md-0 p-2 pl-4 box mb-3">
              <div class="d-flex p-3 bg-white align-items-center justify-content-between">
                <div class="p-1">
                  <h3 class="h4 mt-3 ">SkyDrift Hotel reservations</h3>
   
                  <p class="mt-3">Book your stay at the world’s only orbital luxury hotel, where you’ll be treated to breathtaking views of earth, award-winning restaurants.</p>
                </div>
              </div>
            </div>
   
            <div class="col-md-6 mt-2 mt-md-0 p-2 pl-4 box mb-3">
              <div class="d-flex p-3 bg-white align-items-center justify-content-between">
                <div class="p-1">
                  <h3 class="h4 mt-3 ">SpaceJet mobile app</h3>
                  <p class="mt-3">Book your flight and ground transportation, order floating room service, schedule a romantic spacewalk and so much more.</p>
                </div>
              </div>
            </div>
   
            <div class="col-md-6 mt-2 mt-md-0 p-2 pl-4 box mb-3">
              <div class="d-flex p-3 bg-white align-items-center justify-content-between">
                <div class="p-1">
                  <h3 class="h4 mt-3 ">Book Daily Flights</h3>
                  <p class="mt-3">Depart conveniently from Orlando, Houston, or Los Angeles</p>
                </div>
              </div>
            </div>
   
            <div class="col-md-6 mt-2 mt-md-0 p-2 pl-4 box mb-3">
              <div class="d-flex p-3 bg-white align-items-center justify-content-between">
                <div class="p-1">
                  <h3 class="h4 mt-3 ">Enjoy the Orbital entertainment</h3>
                  <p class="mt-3">See musical performances that are literally out of this world</p>
                </div>
              </div>
            </div>
   
          </div>
        </div>
      </div>
    </section>  

CSS

All required CSS is contained with style.css

External Resources

This tutorial includes the following third party resources.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>