Hacking the Bootstrap 5 Carousel: Building Sidebar Carousels with CSS

Carousels as Sidebars

I'm going to start with a carousel as a sidebar item. You can insert as many carousels as you want using Bootstrap 5 as long as you include an individual id for each one. Although they will work without the ID most of the time, some of the interface elements like controls and indicators will get confused.

To get this working, I've added some CSS to align the carousel to the right.

#carouselSidebar {
  display: inline-block;
  float: right;
  width: 400px;
}

You could use columns to position the sidebar, but this way it will move with the content in the article.

Equalizing Proportions

The images aren't the same proportions and therefore heights, so I'm going to use a trick that I covered when I wrote an article on building consistent height carousels.

#carouselSidebar .carousel-item img {
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  height: 210px;
}

Using object-fit and object-position with the overflow:hidden property, I can set the height of the image and make them proportionally the same size.

Fixing the Overlay Text

That's useful, but as you can see the sidebar's text is being displayed on top of the image. That's not good for our sidebar, but it's super easy to fix. All we have to do is remove the caption-caption from the caption container.

Adjusting the Arrows and Indicators

The problem is that the arrows indicators you can use to go to the previous and next image appear to be gone. They're still there, but since they're centered, they happen to be in the area with the text.

To fix these, we need to position them manually based on the size of our image.

#carouselSidebar .carousel-control-prev,
#carouselSidebar .carousel-control-next {
  align-items: flex-start;
  top: 80px;
}

#carouselSidebar .carousel-indicators {
  align-items: flex-start;
  top: 180px;
}

This will place the image and the arrows in the proper place. You need to calculate these manually and make sure that you adjust the height and margin; otherwise they will run on top of the text, but it's not a big deal.

Stretched Links

One of the newer features in Bootstrap is the ability to take a link in a component and stretch it so that it cover it's container. You can take advantage of that feature in our carousel and that way you don't have to make a link for both the image and the headline.

<a
  href="https://raybo.org"
  class="h5 d-block mt-2
    stretched-link
    text-decoration-none
    text-secondary"
  >Slide 01</a
>

All you have to do is add a stretched-link class to the link and it will travel up to a container that has a position: relative property. This is working well with our carousel, but remember that sometimes you have to add that manually.

There's a few other interesting things going on with the link. You'll notice that it's actually an anchor tag that's been styled to look like a level 5 headline. Sort of nice that bootstrap has that. Because it's a link, it would normally run as an inline element, but we can quickly switch that to a block level element with d-block. Links don't normally have additional margins, so we can add 2 units of margin with mt-2.

If you don't add the text-decoration-none, because it's a link it will have an underline and the text-secondary class gives it a gray tint instead of the loud blue color.