Make bootstrap well semi transparent

Make bootstrap well semi transparent

I tried to make the bootstrap well semi transparent by adding opacity:0.4 but this results in making the text semitransparent as well. Is there any way to make the well semi transparent without making the body lose opacity as well.


Solution 1:

Change the background-color instead of changing its opacity

.well {
   background-color: rgba(245, 245, 245, 0.4);

With a notice that the value 245 comes from the default background-color of the .well class: #F5F5F5.

Solution 2:

There’s an awesome way of doing this.
You can do it using rgba and ‘background-color` like this:

background-color: rgba(255,255,255,0.4); // I don't know the .well color, so I used white as example

where the 0.4 is the opacity and the 255,255,255 the color codes in rgb.

More about rgba:


Related:  Bootstrap alignment of button and pagination