Boo Admin

Custom CSS and HTML

Use and application of CSS classes and HTML to components

Bootstrap Components

Detailed documentation for components, see bootstrap documentation

Examples of how to compile your code block.
Use bootstrap standard features only add class Boo

Wells

Classes

Class Description
.well Default bootatrap class class="well"
.well-nice Add style to element class="well well-nice" (combine class)
.well-impressed Add style to element class="well well-impressed" (combine class)
.well-black Add style to element class="well well-black" (combine class)
.well-box Use well as block with navigation, menubar, table ... class="well well-box" (combine class)
.simple-header Basic header for well <h3 class="simple-header"> (combine class)
.header-small Basic small header for well <h6 class="simple-header header-small"> (combine class)
.section-content Content for well-box class="section-content"
.item Class for the content if you want more blocks below class="section-content item" (combine class). Do not apply on the last block
.bg- For color background Use the class .bg- see coloring class="well bg-blue-light" (combine class). Possible use also on content.

Use

Base headings for wells

All HTML headings, <h1> through <h6> are available. Combine with .simple-header to display simple header to be well

h4. Heading 4

looks like a simple header for div with class .well 

<div class="well">
    <h4 class="simple-header">h4. Heading 4</h4>
    <p>looks like a simple header for div with class <code>.well</code> </p>
</div>

Well Nice

A little well improve on class .well-nice

h3. Heading 3

and ... it looks better (Boo has a different background :)) 

<div class="well well-nice">
    <h3 class="simple-header">h4. Heading 3</h3>
    <p>and ... it looks better (Boo has a different background :)) </p>
</div>

Well Black

... or .well-black

h3. Heading 3

we needed a contrasting element 

<div class="well well-black">
    <h3 class="simple-header">h4. Heading 3</h3>
    <p>we needed a contrasting element </p>
</div>

Well Impressed & color

... or use background staining and extruded type for well .well-impressed .bg-blue-medium

h3. Heading 3

and a color ... 

<div class="well well-impressed bg-blue-medium">
    <h3 class="simple-header">h4. Heading 3</h3>
    <p>and a color ... </p>
</div>

Combine well and navbar - well-box

Navbar

$22,903 84%

The content below are loaded

$22,903 84%

The content below are loaded

<div class="well well-box well-nice">
    <div class="navbar">
        <div class="navbar-inner">
            <h4 class="title">Navbar</h4>
            <ul class="nav pull-right">
                <li><a href="#">Link</a></li>
                <li class="divider-vertical"></li>
                <li> ... </li>
            </ul>
            <!-- // nav --> 
        </div>
    </div>
    <div class="section-content item">
        ...
    </div>
    <div class="section-content">
        ...
    </div>
</div>
<!-- // well-box -->

Widgets

Boo offers three types of styles to display the widget

Classes

Class Description
.widget Used construction but is without design - clean block class="widget"
.widget-simple Well is similar in style and design but has more options to apply styles, elements, js. class="widget widget-simple" (combine class)
.widget-box Box has the appearance of a separate head class="widget widget-box" (combine class)
.widget-table Use only wrapped table to .widger-box class="widget widget-box widget-table" (combine class)
.widget-header First block in widget class="widger-header". Head for where to place the widget title and menubar (.btn-toolbar)
.widget-content Content for the widget. Required if you use tabs class="widget-content tab-content" (combine class)
.widget-body Next content for the widget.
.widget-footer Footer for action bar.

Use

Widget

Use only class .widget to element.

Widget header SIMPLE

Widget Body

Widget footer

<div class="widget">
    <div class="widget-header">
        <h4> ... </h4>
    </div>
    <div class="widget-content">
        <div class="widget-body"> ... </div>
    </div>
    <!-- content -->
    <div class="widget-footer"> ... </div>
</div>
<div class="widget">
    <div class="widget-header">
        <h4> ... </h4>
    </div>
    <div class="widget-content">
        <div class="widget-body"> ... </div>
        <div class="widget-footer"> ... </div>
    </div>
    <!-- content -->
</div>

Widget Simple

Use combine class .widget .widget-simple to element.

Widget header SIMPLE

Widget Body

Widget footer

<div class="widget widget-simple">
    ...
</div>

Widget Box

Use combine class .widget .widget-box to element.

Widget header BOX

Widget Body

Widget footer

<div class="widget widget-box">
    ...
</div>

You may only use content widget without body tag but maybe for tabs is necessary to use packaging points. The .content are also bound by other classes for correct rendering block.

Pagination

Class Description
.pagination Default bootatrap class
.pagination-btn Add style as btn class="pagination pagination-btn" (combine class)
.pagination-boo Add style as btn-boo class="pagination pagination-boo" (combine class)

Example

<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>

<div class="pagination pagination-btn">
  ...
</div>

<div class="pagination pagination-boo">
  ...
</div>