Wells Style .well-
Well, is applicable to any block of your application. Boo offers different styles of this element and different combinations.
Base .bg-...
Just use the header class .simple-header.
Default Well
Lorem ipsum dolor sit amet consectetuer aliquam dolor dictumst est volutpat. Non id congue habitant sem at. .well
Impressed Well
Lorem ipsum dolor sit amet consectetuer aliquam dolor dictumst est volutpat. Non id congue habitant sem at. .well .well-impressed
Nice Well
Lorem ipsum dolor sit amet consectetuer aliquam dolor dictumst est volutpat. Non id congue habitant sem at. .well well-nice
Black Well
Lorem ipsum dolor sit amet consectetuer aliquam dolor dictumst est volutpat. Non id congue habitant sem at. .well .well-black
Next Wells Color Style .bg-...
Other color variations using inking classes. Three levels of color .bg-blue combine -light -medium -strong
Blue
Lorem ipsum dolor sit amet consectetuer aliquam dolor dictumst est volutpat. Non id congue habitant sem at .bg-blue-light
Green
Lorem ipsum dolor sit amet consectetuer aliquam dolor dictumst est volutpat. Non id congue habitant sem at .bg-green-light.
Yellow
Lorem ipsum dolor sit amet consectetuer aliquam dolor dictumst est volutpat. Non id congue habitant sem at .bg-yellow-light.
Gray
Lorem ipsum dolor sit amet consectetuer aliquam dolor dictumst est volutpat. Non id congue habitant sem at .bg-gray-light.
Well as box .well-box
Combine bootstrap elements .well .navbar.
.alert-content.
Lorem ipsum dolor sit amet consectetuer aliquam dolor dictumst est volutpat. Non id congue habitant sem at ante tellus odio Nam ullamcorper.
| class | description |
|---|---|
.well |
bootstrap element |
.well-nice |
style element well |
.well-box |
style element well |
.navbar |
bootstrap element |
.navbar-inverse |
bootstrap element - change color |
.navbar-inner .no-bg |
remove navbar background |
.title |
class for title |
.nav |
bootstrap element - navigation |
.btn-toolbar |
bootstrap element - button bar |
.navbar-form |
bootstrap element - search |
.section-content |
content block |
.section-content .item |
item content - if you build content into multiple blocks |
.table-content |
use for table in well-box |
.alert-content |
use for alert in well-box |
.section-content There is a place for your content.
For .navbar-inner use class .no-bg remove navbar background gradient
.well in .well Lorem ipsum dolor sit amet consectetuer aliquam dolor dictumst est volutpat. Non id congue habitant sem at ante tellus odio Nam ullamcorper.| class | description |
|---|---|
.well |
bootstrap element |
.well-nice |
style element well |
.well-box |
style element well |
.navbar |
bootstrap element |
.section-content .item Lorem ipsum dolor sit amet consectetuer aliquam dolor dictumst est volutpat. Non id congue habitant sem at ante tellus odio Nam ullamcorper.
.section-content Lorem ipsum dolor sit amet consectetuer aliquam dolor dictumst est volutpat. Non id congue habitant sem at ante tellus odio Nam ullamcorper.
.section-content Lorem ipsum dolor sit amet consectetuer aliquam dolor dictumst est volutpat. Non id congue habitant sem at ante tellus odio Nam ullamcorper.
Lorem ipsum dolor sit amet consectetuer aliquam dolor dictumst est volutpat. Non id congue habitant sem at ante tellus odio Nam ullamcorper.
Here .section-content Lorem ipsum dolor sit amet consectetuer aliquam dolor dictumst est volutpat. Non id congue habitant sem at ante tellus odio Nam ullamcorper.
For .navbar-inner use class .no-bg remove navbar background gradient
$22,903 84%
The content below are loaded
$22,903 84%
The content below are loaded
... as navigation
Use wells class on a simple navigation.
Use it on anything
be as highlighting the title, calculation, statistics, and more ...