Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I change the opacity of the navbar in twitter bootstrap?

I stumbled onto this site: and started thinking. Is this possible using twitter's bootstrap? I don't see an opacity setting in the css file? Is it as easy as adding it.

like image 233
Paul Avatar asked Mar 26 '12 13:03

Paul


People also ask

How do I change the opacity of a nav bar in bootstrap?

in your bootstrap. css find the navbar you are using, for example, if you're using the default navbar search for . navbar-default or . navbar-inverted as per your case and set the opacity simply using the CSS opacity command.

How do I make my navigation bar opaque?

Edit the value (number) for opacity level, 0.0 is fully transparent and 1.0 is fully opaque. If using RGBA instead of HEX VALUES ( #FFFFFF ) or Template Designer ( $(tabs. background.

What is bootstrap opacity?

The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all, . 5 is 50% visible, and 0 is completely transparent. Set the opacity of an element using . opacity-{value} utilities.


3 Answers

In general, this is possible. Testflightapp uses the background-color: rgba attribute with an opacity level.

So if you want to set a background color with opacity to on of you element use this CSS:

elementname {
    background-color: rgba(128, 128, 128, 0.5); /* Red [0-255], Green [0-255], Blue [0-255], Alpha [0-1] */
}

If you want to set the opacity on the element as a whole use:

elementname {
    opacity: 0.5; /* opacity [0-1] */
    -moz-opacity: 0.5; /* opacity [0-1] */
    -webkit-opacity: 0.5; /* opacity [0-1] */
}

This is only supported by browsers that support CSS3.

like image 91
Frank van Wijk Avatar answered Oct 13 '22 20:10

Frank van Wijk


A late answer, but I just found this question whilst looking up something very similar.

If you're using bootstrap with less, so that you're building the css yourself as part of an asset pipeline you should set opacity using the utility macro.

selector {
    .opacity(50);   /* opacity [0->100]  */
}

It'll define the correct browser prefixes, including the IE filter syntax for you.

like image 36
leebriggs Avatar answered Oct 13 '22 21:10

leebriggs


If you are using bootstrap with sass. You can use the opacity mixin.

@include opacity([from 0-100]);

This will take handle all browser compatibilities (if supported) dealing with opacity.

like image 41
dafunkeemonkee Avatar answered Oct 13 '22 21:10

dafunkeemonkee