Skip to main content
X

Explore your training options in 10 minutes

CSS Tutorials

Using the Bootstrap Framework to Create a Carousel

Christina Kopecky - December 29, 2020


When we think of a carousel, what usually comes to mind is the amusement park ride you may have ridden as a child – a big platform that rotates with colorful merry-go-round horses that go up and down as the ride progresses.

A Bootstrap Carousel is not the fun fair variety we have come to know as a child, but the concept has similarities. This article reviews how to get started with Bootstrap, goes over what the carousel UI element is, when it would be good to use it, and how to construct one using the Bootstrap framework.

Getting Started

The first thing we need to do to set up a Bootstrap Carousel is to ensure we have the proper dependencies. For this, we need Bootstrap, PopperJS, and jQuery. Take a look at Bootstrap’s Quick Start page for assistance in getting your dependencies added to your project.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

It’s your decision in how you handle the dependency requirement, but the easiest, more beginner-friendly way is to use the content delivery network – the CDN – for jQuery, Popper.js, and Bootstrap. Be careful of the order of your <script> tags – order matters here.

You’re now ready to get started!

Using Bootstrap Documentation to Create a Carousel

On the left hand side of the Introduction/Getting Started page, you see a sidebar that links to various things. Take a look for the Components link and click on it. This will navigate you to the first of Bootstrap’s many available components: Alerts . If we take a look at the sidebar again, it now shows the different links to all the different components available to us.

Click on the Carousel component to get started. This will have the information we need.

How it Works

Bootstrap takes advantage of the CSS transform property and some JavaScript to operate the carousel as it moves from one slide to the next. The most basic carousel is a series of images or markup that moves from one to the next after a set amount of time.

Basic Structure

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bootstrap Navbar</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
   crossorigin="anonymous">
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
 </button>
 
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
   <ul class="navbar-nav mr-auto">
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Bootcamps
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Popular Bootcamps</a>
         <a class="dropdown-item" href="#">Bootcamp Prep</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Bootcamp Financing</a>
         <a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
 
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Coding
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Coding Tools</a>
         <a class="dropdown-item" href="#">Git</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">HTML</a>
         <a class="dropdown-item" href="#">CSS</a>
         <a class="dropdown-item" href="#">JS</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Python</a>
         <a class="dropdown-item" href="#">Ruby</a>
         <a class="dropdown-item" href="#">C++</a>
         <a class="dropdown-item" href="#">Java</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Career Resources
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item smallcaps" href="#">Career Advice</a>
         <a class="dropdown-item smallcaps" href="#">Interviews</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item smallcaps" href="#">Tech Cities</a>
         <a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Tech Fields
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Web Design</a>
         <a class="dropdown-item" href="#">Web Development</a>
         <a class="dropdown-item" href="#">Software Engineering</a>
         <a class="dropdown-item" href="#">Data Science</a>
       </div>
     </li>
     <li class="nav-item">
       <a class="nav-link smallcaps" href="#">News & Commentary</a>
     </li>
   </ul>
   <form class="form-inline my-2 my-lg-0">
     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
   </form>
 </div>
 </nav>
 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">
   <div class="carousel-inner">
     <div class="carousel-item active">
         <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="...">
     </div>
     <div class="carousel-item"><img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="...">
     </div>
     <div class="carousel-item">
       <img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="...">
     </div>
   </div>
 </div>
 
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src="script.js"></script>
 </body>
</html>

Here are some attributes seen above that you may be new to you and their meanings:

Attribute Meaning
data-ride=“carousel” Animates on page load.
data-interval=“false | [num in ms]” If set to false, the carousel does not automatically cycle. Otherwise, it cycles based on the number in milliseconds.
data-pause=“hover” When the user hovers over the carousel, the carousel will pause on the current active image. On mouseleave, the carousel will resume the cycling process.
class=“active” Active is needed to know which image to show.
class=“d-block” display: block;
class=“w-100” width: 100%;

With Controls

In addition to this basic cycling structure, Bootstrap offers carousel controls for the component. This is where the bulk of the JavaScript comes into play. Bootstrap uses their JavaScript util functions to make the carousel operate when a user clicks on the controls.

In this code snippet below, you’ll see a previous and a next arrow on either side of the image. In addition to operating as it did before (on a timer), the image will change if the user clicks on one of the arrows.

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bootstrap Navbar</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
   crossorigin="anonymous">
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
 </button>
 
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
   <ul class="navbar-nav mr-auto">
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Bootcamps
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Popular Bootcamps</a>
         <a class="dropdown-item" href="#">Bootcamp Prep</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Bootcamp Financing</a>
         <a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
 
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Coding
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Coding Tools</a>
         <a class="dropdown-item" href="#">Git</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">HTML</a>
         <a class="dropdown-item" href="#">CSS</a>
         <a class="dropdown-item" href="#">JS</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Python</a>
         <a class="dropdown-item" href="#">Ruby</a>
         <a class="dropdown-item" href="#">C++</a>
         <a class="dropdown-item" href="#">Java</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Career Resources
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item smallcaps" href="#">Career Advice</a>
         <a class="dropdown-item smallcaps" href="#">Interviews</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item smallcaps" href="#">Tech Cities</a>
         <a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Tech Fields
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Web Design</a>
         <a class="dropdown-item" href="#">Web Development</a>
         <a class="dropdown-item" href="#">Software Engineering</a>
         <a class="dropdown-item" href="#">Data Science</a>
       </div>
     </li>
     <li class="nav-item">
       <a class="nav-link smallcaps" href="#">News & Commentary</a>
     </li>
   </ul>
   <form class="form-inline my-2 my-lg-0">
     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
   </form>
 </div>
 </nav>
 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">
 <div class="carousel-inner">
   <div class="carousel-item active">
         <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="...">
   </div>
   <div class="carousel-item">
       <img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="...">
   </div>
   <div class="carousel-item">
       <img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="...">
   </div>
 </div>
 <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
 </a>
 <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
 </a>
</div>
 
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src="script.js"></script>
 </body>
</html>

The big thing to understand about the way the controls work is that the href needs to match the unique id of the overall div of the carousel.

Next Control:

<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Outermost Container of Carousel:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

The highlighted areas need to match in order for the links to work.

With Indicators

In addition to using controls to operate the cycling of the carousel, you can indicate which image you’re on by showing how many block elements there are in your carousel. These can be used in tandem with the controls.

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bootstrap Navbar</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
   crossorigin="anonymous">
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
 </button>
 
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
   <ul class="navbar-nav mr-auto">
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Bootcamps
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Popular Bootcamps</a>
         <a class="dropdown-item" href="#">Bootcamp Prep</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Bootcamp Financing</a>
         <a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
 
       </div>
     </li>
     <li class="nav-item dropdown">lid
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Coding
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Coding Tools</a>
         <a class="dropdown-item" href="#">Git</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">HTML</a>
         <a class="dropdown-item" href="#">CSS</a>
         <a class="dropdown-item" href="#">JS</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Python</a>
         <a class="dropdown-item" href="#">Ruby</a>
         <a class="dropdown-item" href="#">C++</a>
         <a class="dropdown-item" href="#">Java</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Career Resources
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item smallcaps" href="#">Career Advice</a>
         <a class="dropdown-item smallcaps" href="#">Interviews</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item smallcaps" href="#">Tech Cities</a>
         <a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Tech Fields
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Web Design</a>
         <a class="dropdown-item" href="#">Web Development</a>
         <a class="dropdown-item" href="#">Software Engineering</a>
         <a class="dropdown-item" href="#">Data Science</a>
       </div>
     </li>
     <li class="nav-item">
       <a class="nav-link smallcaps" href="#">News & Commentary</a>
     </li>
   </ul>
   <form class="form-inline my-2 my-lg-0">
     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
   </form>
 </div>
 </nav>
 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">
 <ol class="carousel-indicators">
   <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
   <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
   <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
   <div class="carousel-item active">
         <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="...">
   </div>
   <div class="carousel-item">
       <img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="...">
   </div>
   <div class="carousel-item">
       <img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="...">
   </div>
 </div>
 <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
 </a>
 <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
 </a>
</div>
 
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src="script.js"></script>
 </body>
</html>

The ordered list in the above code snippet is what displays the indicators. The .active class matches the active class in the carousel-items .

Conclusion

This may seem like a LOT of information to digest at first. The main thing to remember is to just follow the documentation. There is no need to necessarily memorize how to do this when the documentation is so well-written and detailed.

It’s definitely a good idea to be aware of how everything works on Bootstrap’s end – take a look at that minified CSS and JS file if you have time to see how they have elements styled and scripted in Bootstrap. Also, be aware of at least what all of the attributes mean in the example code so you can tailor it to your needs and use it in your project.

One final thing: be aware that the carousel component may not be the best to use in terms of accessibility. Be sure to continue to make your page as accessible as possible and not use information in your carousel that cannot also be found somewhere else.

Good luck as you continue your journey into using Bootstrap!

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Christina Kopecky

About the author: Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.

Skip to main content