Table Styles

Version Code name Release date
3.9 Smith 16 April 2014
3.8 Parker 12 December 2013
3.7 Basie 24 October 2013
3.6 Oscar 1 August 2013

 

Highlight Text Style

To use the highlight, you simply need to add a span with the class highlight. This can be done in the Text editor view. See an example below:

<span class="highlight">This will be highlighted</span>

 

List example

  • Design Consulting
  • Brand Development
  • Web Design & Development
  • User Interface Desig

 

Two Columns

Graphics is a huge passion of mine. It enables me to stay spontaneous and gives me an opportunity for creative fulfillment.
The ability of creating new interesting solutions makes sense only when we are cooperating with other people.

<div class="twocolumn">Put your text here</div>

 

Three Columns

Graphics is a huge passion of mine. It enables me to stay spontaneous and gives me an opportunity for creative fulfillment.
The ability of creating new interesting solutions makes sense only when we are cooperating with other people.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="threecolumn">Put your text here</div>

 

Four Columns

Graphics is a huge passion of mine. It enables me to stay spontaneous and gives me an opportunity for creative fulfillment.
The ability of creating new interesting solutions makes sense only when we are cooperating with other people.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div class="fourcolumn">Put your text here</div>

 

Buttons

Use any of the available button classes to quickly create a styled button.

Default Primary Success Info Warning Danger Link

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

 

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

Large button Large button

Default button Default button

Small button Small button

Extra small button Extra small button

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

 

Vimeo Video


 

YouTube Video