When writing a book about Less and have to answer a question about adding a background gradient to JBST’s navbar the answer was found easy. Bootstrap’s navbar is styled with two CSS classes the .navbar class sets it’s structure while the .navbar-default or .navbar-inverse classes add colors and other styling. Bootstrap’s mixins contain also mixin for CSS3 background gradients. With the preceding knowledge adding a background-gradient will be as simple as writing in Less:
.navbar-default {
#gradient > .vertical(lighten(@navbar-default-bg,10%),darken(@navbar-default-bg,10%));
}
You should append this code to bootstrap.less and recompile Bootstrap. After recompiling the default navbar will be look like that shown below:
Who don’t want to recompile Bootstrap can try to use the compiled CSS directly:
.navbar-default {
background-image: -webkit-linear-gradient(top, #ffffff 0%, #dfdfdf 100%);
background-image: linear-gradient(to bottom, #ffffff 0%, #dfdfdf 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffdfdfdf', GradientType=0);
}
In the above you should find the values for #ffffff (white, lightest color) and #dfdfdf (darkest color) yourself.
With Less changing the default background will be easy to:
.navbar-default {
#gradient > .vertical(lighten(@navbar-default-bg,10%),darken(@navbar-default-bg,10%));
}
@navbar-default-bg: purple;
The above will give you a purple gradient as background. Or the horizontal gradient variant:
.navbar-default {
#gradient > .horizontal(lighten(@navbar-default-bg,10%),darken(@navbar-default-bg,10%));
}
@navbar-default-bg: red;
All the above don’t restrict you to use the @navbar-default-bg only, you can choose your own colors or even use the three colored horizontal gradient:
.navbar-default {
#gradient > .horizontal-three-colors(red;white;50%;blue);
}
Which makes your navbar let’s look like shown below:
Buttons
You can also add a gradient to the Bootstrap’s default button with Less in the same way. The CSS classes of these buttons have the same structure as the navbar, the .btn class makes the button and a second class adds it’s styles. Except from the link button there are six default button styles in Bootstrap. To add a gradient to these button you can use the Less code shown below:
// add gradient to alternate buttons
// --------------------------------------------------
.btn-default {
#gradient > .vertical(lighten(@btn-default-bg,10%),darken(@btn-default-bg,10%));
}
.btn-primary {
#gradient > .vertical(lighten(@btn-primary-bg,10%),darken(@btn-primary-bg,10%));
}
// Success appears as green
.btn-success {
#gradient > .vertical(lighten(@btn-success-bg,10%),darken(@btn-success-bg,10%));
}
// Info appears as blue-green
.btn-info {
#gradient > .vertical(lighten(@btn-info-bg,10%),darken(@btn-info-bg,10%));
}
// Warning appears as orange
.btn-warning {
#gradient > .vertical(lighten(@btn-warning-bg,10%),darken(@btn-warning-bg,10%));
}
// Danger and error appear as red
.btn-danger {
#gradient > .vertical(lighten(@btn-danger-bg,10%),darken(@btn-danger-bg,10%));
}
After appending this to to bootstrap.less and recompiling Bootstrap your buttons will look like:
Also for button you are not restricted to Bootstrap’s default colors, try for instance:
.btn-custom {
.button-variant(black; white; white);
#gradient > .horizontal-three-colors(red;white;50%;blue);
}
Also read: