When building commonly use html elements and styles Bootstrap. There are only a few classes and utilities that will help you create a style Boo

CSS files and structure

1. bootstrap.css - lib
2. bootstrap-responsive.css - lib
3. icon-fugue.css - lib fugue icon (use minifield)
4. boo-extension.css - Imports all alternative stylesheets
5. boo.css - Corection bootstrap and boo style
6. style.css - Here place for your styles
7. boo-coloring.css - set color
8. boo-utility.css - Boo utility for correction and styling
9. style.css - Your style

extension.css file imports all alternative stylesheets, so you don't need to include all .css files in each HTML page, simply add/remove necessary line in main.css (first lines):

/* FONTS */
/* Picto font & Icon */
@import "../fonts/fontello/css/fontello.css";
@import "../fonts/awesome/css/font-awesome.css";

@import "icon-fugue.min.css";

/* PLUGINS */ 
@import "../plugins/pl-extension/google-code-prettify/prettify.css";

@import "../plugins/bootstrap-datepicker/css/datepicker-theme.css";
@import "../plugins/bootstrap-colorpicker/css/colorpicker-theme.css";
@import "../plugins/bootstrap-daterangepicker/css/daterangepicker-theme.css";
@import "../plugins/bootstrap-timepicker/css/timepicker.css";
@import "../plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css";
@import "../plugins/bootstrap-fuelux/css/fuelux-bootheme.css";
@import "../plugins/bootstrap-progressbar/css/bootstrap-progressbar.css";
@import "../plugins/bootstrap-wysihtml5/src/bootstrap-wysihtml5.css";
@import "../plugins/bootstrap-fileupload/css/bootstrap-fileupload.css";
@import "../plugins/bootstrap-modal/css/bootstrap-modal-bootheme.css";
@import "../plugins/bootstrap-wizard/css/bootstrap-wizard-combi-bootheme.css";
@import "../plugins/bootstrap-toggle-button/css/bootstrap-toggle-buttons-theme.css";
@import "../plugins/bootstrap-image-gallery/css/bootstrap-image-gallery-bootheme.css";

@import "../plugins/pl-system-info/qtip2/dist/jquery.qtip.css";
@import "../plugins/pl-system-info/gritter/css/jquery.gritter-boothemes.css";
@import "../plugins/pl-system-info/notyfy/themes/boo-notyfylight.css";

@import "../plugins/pl-form/uniform/css/uniform-theme.css";
@import "../plugins/pl-form/select2/select-theme.css";
@import "../plugins/pl-form/duallistbox/dualListBox-bootheme.css";

@import "../plugins/pl-file/file-upload/css/jquery.fileupload-ui-bootheme.css";

@import "../plugins/pl-component/fullcalendar/fullcalendar-theme.css";
@import "../plugins/pl-component/rangeslider/css/rangeboo.css";

@import "../plugins/pl-gallery/wookmark/style-bootheme.css";
@import "../plugins/pl-gallery/nailthumb/jquery.nailthumb.1.1.css";
@import "../plugins/pl-gallery/nailthumb/showLoading/css/showLoading.css";

@import "../plugins/pl-visualization/percentageloader/percentageloader.css";
@import "../plugins/pl-visualization/knob/knob.css";

@font-face {
        font-family: 'ForteMT';
        src: url('../fonts/forte/forte.eot');
        src: url('../fonts/forte/forte.eot?#iefix') format('embedded-opentype'),
             url('../fonts/forte/forte.woff') format('woff'),
             url('../fonts/forte/forte.ttf') format('truetype'),
             url('../fonts/forte/forte.svg#forte') format('svg');
        font-weight: normal;
        font-style: normal;
}
      

and inside HTML page include file:

<!-- Le styles -->
<link href="assets/css/lib/bootstrap.css" rel="stylesheet">
<link href="assets/css/lib/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/boo-extension.css" rel="stylesheet">
<link href="assets/css/boo.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/boo-coloring.css" rel="stylesheet">
<link href="assets/css/boo-utility.css" rel="stylesheet">
      

Headings

All HTML headings, <h1> through <h6> are available.

For header add class .simple-header to <h2> - <h6> element.

<h3  class="simple-header">h3. Simple header</h3>
<pgt;Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</pgt;

Paragraphs

Global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).

<p>...</p>

Make a paragraph stand out by adding .lead.

<p class="lead">...</p>

<small> for de-emphasizing inline or blocks of text, use the small tag.

<p>
  <small>This line of text is meant to be treated as fine print.</small>
</p>

Individual font size

For set individual font size. (10, 11, 12, 13, 14, 16, 18, 20 ... after two to 42 ) class="f42"

<p class="f16">Lorem ipsum dolor sit amet</p>
<p class="f22">Lorem ipsum dolor sit amet</p>
<p class="f30">Lorem ipsum dolor <span class="f16">sit amet</span></p>
<p class="f36">Lorem ipsum dolor sit amet</p>
<h3 class="f20 simple-header">Lorem ipsum dolor sit amet</h3>
<p>statistic <strong class="f42">1592,5</strong></p>

Bold

<strong> for emphasizing a snippet of text with a heavier font-weight or set individual font font-weight (replacement tag strong) add class="bold" to element.

<strong>rendered as bold text</strong>
or
<p class="bold">rendered as bold text</p>
                

Italics

<em> for emphasizing a snippet of text with italics.

<em>rendered as italicized text</em>

Emphasis classes

Convey meaning through color with a handful of emphasis utility classes.

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

Blockquotes

Wrap <blockquote> for quoting blocks of content from another source within your document.

For more options add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

Use .pull-right for a floated, right-aligned blockquote.

<blockquote class="pull-right">
  ...
</blockquote>

Utility classes for text

see the file utility.css

Lists

Unordered

A list of items in which the order does not explicitly matter.

<ul>
  <li>...</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

<ol>
  <li>...</li>
</ol>

Unstyled

A list of items with no list-style or additional left padding.

<ul class="unstyled">
  <li>...</li>
</ul>

Description

A list of terms with their associated descriptions.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Text color

For colored text, you can use all the names of colors as css class for the element. Color Table to preview

Why use a coloring class?

<h3 class="bg-blue-light"> 
<span class="darkblue f32">Why</span> 
<span class="f16 forestgreen">use</span> 
<span class="bg-green-strong">a coloring</span> 
<span class="yellowgreen">class?<span>
</h3>
or this background
<pre class="prettyprint linenums bg-yellow-medium">
      

There are names of colors used as css class
(no need to use <div class="span12" style="red"> ... </div> write only <div class="span12 red"> ... </div>

or <div class="well bg-blue-light"> ... </div> )

Background color class

Blue

• .bg-blue-light
   
• .bg-blue-light
   
• .bg-blue-light
   

Green

• .bg-green-light
   
• .bg-green-light
   
• .bg-green-light
   

Yellow

• .bg-yellow-light
   
• .bg-yellow-light
   
• .bg-yellow-light
   

Gray

• .bg-gray-light
   
• .bg-gray-light
   
• .bg-gray-light
   

White

<span class="bg-blue-strong"> backround color blue </span> 
<table class="bg-green-light"> backround color green <table>

see the file coloring.css

Use bootstrap to correct styles, correct gaps and fill or remove them completely.

Boo framework

Use an element especially for correcting top and bottom gaps (a combination of size 0 s m x)

class="margin-00"
class="margin-ss"
class="margin-0s"
class="margin-sm"
class="margin-mx"
all combinations of 
0 s m x
or
xxx only

<hr class="margin-sm">
<table class="margin-0x"> 
    ... 
</table>

Margin & Padding with using numbers

Option to add or remove spaces on either side of the element

// gap at the top is a standard 19px, 10px, set    
<div class="well margin-top10"> ... </div>
      

Set the value to the right and left (only fixed 15px)    
<span class="padding-side"> ... </span>
      

class="no-padding-top"
class="no-margin-left"
class="no-..."

remove all
<div class="well no-margin"> ... </div>
      

Default styles

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

<table class="table">
  …
</table>

Supported table markup

List of supported table HTML elements and how they should be used.

<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Optional classes

Add any of the following classes to the .table base class.

Can not be combined classes table-bordered and table-content

see the file boo.css

.boo-table

Basic style for boo table bordered

<!-- Boo table -->
<table class="table boo-table table-striped">
	<caption>Caption for boo table <span>Here text in span</span></caption>
    ...
</table>

.table-content

Content table - a table designed to be placed in the wrapper

<!-- Boo table content -->
<table class="table boo-table table-content table-striped">
	<caption> ... </caption>
    ...
</table>

Table content in base wrapper .boo-table

If you want a table with class table-content was bounded just use container - <div> element with class .table-wrapper.

<!-- Table wrapp -->
<div class="table-wrapper">
    <table class="table boo-table table-content ....">
        ...
    </table>
</div>

For a table, use a colored background .bg-color- classes

More examples of how to wrap the table in can be found on page component-table-boo.html

More classes for table.

Optional row classes

Use contextual classes to color table rows.

...
  <tr class="success">
    <td>1</td>
    <td>TB - Monthly</td>
    <td>01/04/2012</td>
    <td>Approved</td>
  </tr>
...

Forms fully utilize styles bootstrap

If you are not familiar with the bootstrap form, refer to the original documentation

Optional layouts classes

Included with Bootstrap are three optional form layouts for common use cases.

Default Boo style form

Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

<form>
  <fieldset>
    <legend>Legend</legend>
    <label>Label name</label>
    <input type="text" placeholder="Type something…"></fieldset>
  <button type="submit" class="btn">Submit</button>
</form>

Boo dark style

Add class .form-dark to element <form> .

<form class="form-dark">
   ... 
</form>

Search form

Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

<form class="form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Search</button>
</form>

Inline form

Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> Remember me
  </label>
  <button type="submit" class="btn">Sign in</button>
</form>

Horizontal form

Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

• Add .form-horizontal to the form
• Wrap labels and controls in .control-group
• Add .control-label to the label
• Wrap any associated controls in .controls for proper alignment

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>

Boo style for form horizontal

                <form class="form-dark form-horizontal">
                    <fieldset>
                        <legend>Account edit form <small>Default legend</small></legend>
                        <ul class="form-list label-left list-bordered dotted">                            
                            <li class="control-group">
                                <label class="control-label">Label name <span class="required">*</span></label>
                                <div class="controls">
                                    <input type="text" value="">
                                </div>
                            </li>
                            <!-- // form item -->
                            
                            <li class="control-group"> ... </li>
                            <!-- // form item -->
                            
                            <li class="control-group"> ... </li>
                            <!-- // form item -->
                            
                            <li class="section-form">
                                <h4>Contact info</h4>
                            </li>
                            <!-- // section form divider -->
                            
                            <li class="control-group"> ... </li>
                            <!-- // form item -->
                            
                            <li class="control-group"> ... </li>
                            <!-- // form item -->
                            
                        </ul>
                    </fieldset>
                    
                    <!-- // fieldset Input -->
                    <div class="form-actions">
                        <button type="submit" class="btn btn-blue">Submit & Validate</button>
                        <button class="btn cancel">Cancel</button>
                    </div>
                </form>

Supported form controls

Examples of Boo form controls supported in an example form layout bootstrap documentation

Boo Checkboxes and radios Boo style

It uses a plugin uniform. Add class .checkbox or .radio to element

<label class="checkbox">
  <input class="checkbox" type="checkbox" value="">
  Option one is this and that—be sure to include why it's great
</label>

<label class="radio">
  <input class="radio" type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  Option one is this and that—be sure to include why it's great
</label>
<label class="radio" class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  Option two can be something else and selecting it will deselect option one
</label>

More info to plugins section

Selects

It uses a plugin select2 or bootstrap selectpicker.

<select class="selecttwo span3">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select class="selecttwo span3" multiple="multiple">
  ...
</select>

<select class="selectpicker">
  ...
</select>

More info to plugins section

• Control sizing
• Uneditable inputs
• Form actions
• Help text
• Input focus
• Disabled inputs
• Validation states

For information, go to bootstrap documentation

Boo buttons

We wanted to keep the original bootstrap button styles, so alternatives are available in boo style. Original bootstrap buttons here

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

More examples to Boo button elements-button.html Setting for button Bootstrap buttons