Search⌘ K
AI Features
Home
Courses
Bootstrap 4 Layouts in Depth

Rebuilding the Traveling with Airbnb Section

Explore how to rebuild the Traveling with Airbnb section in Bootstrap 4 by copying and adapting card layouts, integrating scalable SVG icons from Google Fonts, and applying custom colors accessed via DevTools for accurate reproduction.

We'll cover the following...

The "Traveling with Airbnb" section

This section is similar to the previous one, except for the stars and the bio footers on each card. Therefore, we can begin by just copying the already existing functionality of the prior section. Here's the first updated card with the additional information removed.

HTML
<div class="col-md-3">
  <div class="card mb-3 border-0">
    <svg></svg>
    <div class="card-body pl-0">
      <h5 class="card-title"> 24/7 customer support
      </h5>
      <p class="card-text">
        Day or night, we’re here for you...
      </p> 
    </div>
  </div>
</div>

In the place where there used to be an image, we're putting in an <svg> element instead. SVG is the name of a ...