Bootstrap 4 Layouts in Depth/

...

/

Hero Section

Hero Section

Learn how to utilize carousel, card, and jumbotron in Bootstrap.

We'll cover the following...

Now, we'll focus on creating the "Hero" section of our layout.

Make the changes

Here is a live code environment where we can try the changes that are suggested in the lesson.

Let's start by adding images.

Adding images

We’ll be using Unsplash images here. For the carousel, we’ll use these.

Carousel

The carousel is just a slideshow component, with items sliding from left to right by default. The illustration below shows an example of a carousel.

Carousel's elements

Press + to interact
<div id="carouselExampleIndicators" class="carousel slide">
  <!--Content for carousel goes here-->
  <ol class="carousel-indicators">
    <!--Implement indicators here-->
  </ol>
  <div class="carousel-inner">
    <!--Write content for slides here-->
  </div>
  <a class="carousel-control" href="#carouselExampleIndicators">
    <!--Implement controls for slides here-->
  </a>
</div>

These are the main three elements of the carousel:

  • Slide content

  • Slide controls (previous and next controls)

  • Slide indicators (they show what slide ...