Coding a Bootstrap Carousel

Carousel is a popular component used on many different types of websites. We're going to build a Carousel in the Blog Post template of our project. Let's start by opening up blog-post.ejs from the project directory in your text editor. After the page title block of code, insert the following markup:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img src="..." ...

Get Bootstrap 4 – Responsive Web Design now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.