React Bootstrap is the “Most popular front-end framework” for building interactive and responsive UI components in just a few lines of code.

Today, we’ll learn how to use React Bootstrap Carousel and create a beautiful carousel. You’ll also learn how to customize React Bootstrap components with custom CSS.

This is what we’ll create, looks clean and elegant, right?

preview.mp4

Before we get started make sure to create a new React app, that’ll take a while so why don’t you just head over to Codesandbox and create it in just a single click.

About Codesandbox -

Codesandbox is an online code editor which embeds most of the VS code features. It helps to create, run and share websites and web apps super fast. I personally use it to test or create small projects.

React Bootstrap Carousel ⇒

You can also refer to the React Bootstrap official documentation.

#1 Install and Setup React Bootstrap Environment -

If you have your React app ready, let’s install React Bootstrap, head to the terminal or if you’re using Codesandbox, then you can just type the package name and hit enter in the add dependencies input box.

npm install react-bootstrap bootstrap

#or

yarn add react-bootstrap bootstrap

Now, head over to index.jsand import the bootstrap CSS.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

//bootstrap css
import "bootstrap/dist/css/bootstrap.min.css";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

#2 Let’s Create a Carousel Component -

Create a folder Components ⇒ and add two files Slider.jsx& Slider.css. I am using “Slider” as the file name to avoid the React Bootstrap component name conflict.

import React from "react";
import { Container, Carousel, Image } from "react-bootstrap";

import "./slider.css";

Here, we are importing 3 components from React Bootstrap, Container which gives us a default margin and padding, or let’s say a layout. The image component will help us make our Image responsive. Finally, the Carousel component is what we’ll use to make the Carousel.

Here’s dummy data, though you are free to use any.

const customers = [
  {
    name: "Taylor Swift",
    content:
      "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab officia numquam possimus illum officiis at sed quos doloremque molestias. Quae.",
    link:
      "https://akns-images.eonline.com/eol_images/Entire_Site/2019430/rs_600x600-190530093053-taylor-swift-cat-3.jpg?fit=around%7C1200:1200&output-quality=90&crop=1200:1200;center,top"
  },
  {
    name: "Robert Downey Jr",
    content:
      "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab officia numquam possimus illum officiis at sed quos doloremque molestias. Quae.",
    link:
      "https://i.pinimg.com/originals/2f/4b/32/2f4b32cba8cfdd9b9148ac464e167c1e.jpg"
  },
  {
    name: "Rachel Green",
    content:
      "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab officia numquam possimus illum officiis at sed quos doloremque molestias. Quae.",
    link:
      "https://i.pinimg.com/originals/2f/4b/32/2f4b32cba8cfdd9b9148ac464e167c1e.jpg"
  }
];

Let’s create the Slider function. We’ll wrap everything in the Container component.

function Slider() {
  return (
    <Container className="customers-container">
      <h2 className="customers-container-heading">Happy Customers</h2>
      <Carousel className="customers-carousel-container">
        {customers.map((data, i) => (
          <Carousel.Item className="customers-carousel-item">
            <Image
              className="d-block customers-carousel-img"
              src= {data.link}
              alt={data.name}
            />
            <Carousel.Caption className="customers-carousel-caption">
              <h5 className="customers-caption-title">{data.name}</h5>
              <p>
                <q>
                  {data.content}
                </q>
              </p>
            </Carousel.Caption>
          </Carousel.Item>
        ))}
      </Carousel>
    </Container>
  );
}

export default Slider;

As you can see, first we are wrapping the data inside the Carousel component. Each Carousel inside the component is the Carousel.Item. So, we are mapping the customersarray to the Carousel.Item component.

To add caption, we use Carousel.Captioncomponent.

#3 CSS to customize -

/*app.css*/
.App {
  font-family: sans-serif;
  text-align: center;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  background-color: #212529 !important;
}

/*slider.css  */
.customers-container {
  margin: 8% 0;
  color: black;
}
.customers-carousel-container {
  margin: 3%;
}
.customers-container-heading {
  color: #fefefe;
  margin: 2% auto;
  text-align: center;
  font-weight: 700;
}
.customers-carousel-img {
  height: 150px;
  width: 150px;
  margin: 0 auto 3%;
  border-radius: 50%;
}
.carousel-caption {
  position: relative;
  left: 0;
  right: 0;
  bottom: 1.25rem;
  padding-top: 1.25rem;
  margin: auto;
  color: #fefefe;
  text-align: center;
  width: 50%;
}
.customers-carousel-caption p {
  color: rgb(209, 202, 202);
}

@media screen and (max-width: 550px) {
  .customers-carousel-img {
    height: 100px;
    width: 100px;
  }
  .customers-carousel-caption p {
    font-size: 14px;
  }
}

/* 
.carousel-indicators [data-bs-target] {
  display: none;
} */

There’s a commented code of CSS that you can use to disable indicators on the Carousel. You can use the class name as described in the documentation, but I find this a better option.

There are many more options that you can use to customize the carousel as per your need. You can refer to the React Bootstrap Carousel documentation to learn more.