Has the carousel caption option disappeared, or am I imagining it existed?

Bug Reports
1

I could swear in an earlier version of BSS, there was a selection in the option panel that when you selected the Slide Component in the standard Bootstrap carousel, a option appeared in the Options panel that allowed you to turn the caption class on or off. Now I don't see it. HOWEVER, when I select the Slide in the Overview panel, in the "Suggested" panel that appears above the Overview, the Caption component appears as a draggable option, and can be dragged into the Slide component, thus causing the caption to appear. Further, the Caption component itself does not seem to exist independently anywhere in the full list of Components when searched for. It only shows as a "Suggested" option when the Slide component is selected.

Can anyone else confirm this, or at least tell me I missed some announcement about how BSS is currently handling Carousel captions?

2

I don't know if this helps... I would assume that you have already been there done that:

https://getbootstrap.com/docs/4.3/components/carousel/

3

Thanks. I'm not having any problem figuring out how to add the captions. I'm just wondering why (or if) the program changed, and why the Caption component isn't listed anywhere in the components list, even though it shows up as a "suggested component" when you click on a slide item? Clearly the devs are aware of the class, but it seems like it got deleted from the UI somehow.

@martin

4

I had the same problem when I was making a website for my client and I've realised that they changed the place of it under "suggested" it's really tricky if you have used that component in your carousel, but I found it here(You have to press "slide" in your overwiew to get this option, otherwise custom div, but it's tricky aswell lol, after just drag & drop it into your slider and youre done :D ).

Here's Screenshow where you can find that function/component in the panel ;p

I also have no clue why they have moved that component/function under suggested, but.... its weird hah. I wish they have bring it back to the ui...

5

So you remember it being available in the UI as well? I could swear there used to be a toggle switch that said 'Caption' that allowed you turn on or off captions on a slide.

6

Sorry for joining so late! There was indeed an option for this in earlier versions of the app. But when we unlocked the carousel slides, it had to go. It's not possible to have a show/hide option like this without locked components. This also applies for Navbar Brand, Card headers/footers and others.

Now you can just drag and drop the component you need from Suggested.

7

Thank you for that info Martin!

8

Sorry to resurrect this, but I didn’t want to duplicate the topic.

I’m working with BS5, and I can’t work out how to add slide captions for the native carousel.

Do I need to manually place a div within ‘slide’, place custom code in that div, and add the following?:

<div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Write my caption here.</p>
      </div>

I can’t see any other way to do it, and I assume ‘Suggested’ related to an older version…? The tooltip says that I can enable captions somehow.

Help is much appreciated. Thanks.

Thanks.

9

I’m sure you “can” do it that way, but as @Martin suggested in a previous post in this thread, you can drag the “suggested” components in.

One thing he didn’t mention, for those that are unaware of triggers, is that you do need to be selecting the correct part of the component to get those triggered “Suggested” items. This goes equally for settings in the Options Panel, most of the time if you can’t figure out why they aren’t there, it’s most likely that you’re selecting the wrong item of the component. Navs are/were really nasty for that.

In this case you need to select the slides then you’ll see that it opens the currently selected Slide’s section in the Overview panel and the “Suggested” items show up above it.

Now just drag the word “caption” from that list and drop it right on top of the word “Slide” that you want it in and it will go to the bottom of the Slide’s content automatically. Seems it’s the only place it can go, I didn’t fool with it much to find all the settings for placement so hopefully below the image works for you too lol.

Do this for each slide in the slider (or to make it easier add it to the current ones and if you need more, duplicate the last one and it will already be there).

Hope that helps!

10

Ah, thank you - my eyes just literally didn’t see the Suggested option there.

Is there any way to have the caption below the slide image? When dealing with different photos and needing to add descriptions, having text over the top is unreadable no matter what text color is used.

Or is the only way to fade in a partial dark gradient at the bottom of each slide and set text to white?

11

This! ^^^

I haven’t looked over the new documentation yet, but it took me quite a while to discover that you had to expand the Overview tree until you got to the Nav component before you’d get the options to set the Navbar buttons to left, center or right. This is something that is VERY basic in most website builders, and it should be very simple and easy to do in BSS, but instead it’s buried deep in the Navbar component.

I think it would be a good thing for the devs to consider making that option appear as part of the top level Navbar options, because I’ve seen the question come up more than once here in Forum.

12

There’s always a “way” to do almost anything if you put your thinking cap on. For example…

https://fortitudecontracting.com/fortitude-contracting-before-after-gallery.html

This is a standard Bootstrap 4.x Carousel that I’ve modified via CSS so the captions and controls are below the slider.

If you look in the online component library, there is a component called “Ultimate Testimonial Slider” you’ll see how I turned the Bootstrap 4.x Carousel into a scrolling reviews/testimonials slider with a picture, a “star” rating, the testimonial, the person’s name and the date, and I changed the appearance of the standard slide indicators from dashed white lines to little round dots. (Unfortunately, it will only look correct in Bootstrap 4.x. I don’t know if I’m going to bother updating it to work in BS5.)

You’ll may have noted that the Bootstrap Carousel enlarges the width the image to whatever the Carousel’s parent container happens to be, but the height of the carousel is determined by the height of the image or content inside the slide container. The result is that anything below the Carousel is abruptly shifted up or down on the page, which another reason why I’m not particularly fond of the Bootstrap Carousel.) Whenever I have used the Bootstrap Carousel in the past and had content with differing heights, I added this nifty little JQuery script to ease the height change…

$('.carousel').on('slide.bs.carousel', function(e) {
  $(this).find('.carousel-inner').animate({
    height: $(e.relatedTarget).height()
  }, 500);
});

You can see it in action on this website (scroll all the way down to the bottom of the page and then advance through the testimonials)

See how the height changes nice and gradually. A better user experience.

But now that JQuery isn’t supported in BS5, I’ll have to look for a pure javascript solution, or figure out how to use CSS transitions. I really am not that motivated to customize the Bootstrap Carousel because I just don’t find it to be a very good image slider. It’s convenient, but there are others sliders out there that are way more powerful and customizable (Owl Slider, for example.)

Also, the Bootstrap Carousel supports more variables than are accessible through Bootstrap Studio’s visual controls. You can change the speed of the sliding/fading effect, the amount of time spent on each slide, and other things. Maybe over time some more of the variables will make their way into the UI, because right now the only way to change them is by customizing the SCSS or CSS.

But getting back to your original question about putting the caption outside the Carousel, it’s possible, but the main problem is that the caption is nested inside the slide container. The Carousel itself is setup so that anything larger than the inner carousel container gets hidden thanks to overflow hidden rule in the Carousel’s CSS…

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

The captions are positioned absolutely, so you can move them below the Carousel container by changing the bottom rule to something like,

.carousel-caption {
  bottom: -7.5rem;
}

But you won’t see them because they’re outside the container, which has overflow hidden on it, so I suppose one solution might be to add padding to the bottom of the carousel like this…

.carousel-inner {
  padding-bottom: 7.5rem;
}

Then you’ll be able to see your captions (the text is white by default, so you’ll have to change the color if you’re working on a plain white background.) The problem with adding padding is that now the forward and backward controls will extend below the Carousel as well, and they’ll move up and down with different images heights, so if you wanted to keep them in the same place, and no taller than the actual image, you’d have to mess around with absolute positioning, etc.

This is already far more than I should have gotten into in this post, which has completely drifted off original topic, and probably this whole thread should be moved to the Webdesign Help category, since it’s not a Bug. (Maybe @martin can move it when he gets a chance.)

Honestly, I think the simplest for your caption problem is to just use CSS to put a sort of “faux” outline around your caption. As long as the font size is not too small, and it’s a reasonably readable font, this is probably the simplest, most oft used method. There are other techniques like using the CSS outline rule and layering text on top of itself with a peudo class, or even using SVG text (which would require a custom code Component in place of the HTML in the caption. So if you have a white text caption, simple add the following rule to the carousel-caption class, and you’ll get a black outline around all the text…

.carousel-caption {
text-shadow*:* -1px -1px 0 #000,0 -1px 0 #000,1px -1px 0 #000,1px 0 0 #000,1px 1px 0 #000,0 1px 0 #000,-1px 1px 0 #000,-1px 0 0 #000;
}

You should see the below result in your Carousel.

slide-example
slide-example1221×787 181 KB

If you want, you can target just the Slide Title…
.carousel-caption h3

Or just the Slide Caption…
.carousel-caption p

If you only need the Slide Title, you can always delete or hide the paragraph element. And of course you can change the thickness of the outline, the color, the size of the text, etc… via CSS.

13

@martin
Starting with Plutarch’s post, this thread should probably be moved to the Webdesign Help Category.

14

Thanks PN - really appreciate the insight. You always go above and beyond to help.