Bootstrap carousel caption opacity

html css twitter-bootstrap carousel caption
user35986 picture user35986 · Feb 18, 2014 · Viewed 16.4k times · Source

I have created an image Carousel using Twitter Bootstrap 2.3.2 but when resizing the browser/viewing on a smaller screened device the caption background loses it opacity.

An example can be seen on the bootstrap website (try resizing the browser to mobile screen size, the caption background changes to a solid color).

What is causing this?

How can this be overridden?

Answer

don_Bigote picture don_Bigote · Mar 25, 2014

You can adjust the opacity in your CSS, where 0.35 is the opacity. Higher number -> less opacity

.carousel-caption {
    background: rgba(0, 0, 0, 0.35);
}

Related questions

Change arrow colors in Bootstraps carousel

I'm obviously missing something stupidly simple here. I have images with a white background so I want to be able to edit the arrows on the Bootstraps Carousel so they are visible. So many changing the color of the arrows (…

Read More
Bootstrap 3 Carousel Not Working

My carousel from Bootstrap won't display my images or react to the controls. This is my HTML: <!DOCTYPE HTML> <html> <head> <title>Skates R Us</title> <meta name="viewport" …

Read More
bootstrap carousel with photos: optimal image size?

I am experimenting with Bootstrap's carousel and would like to use it with photographs. Question: What is the optimal size for the pictures I should upload for use on the carousel? In the current Bootstrap distribution (v3.2.0) the example carousel.…

Read More