Grid system

For the purposes of this theme we used 12-column system where the smallest section is 70px wide. You can see example of all columns you can use on illustration bellow. You can use any combination of the columns you want as long as the sum of their numbers is twelve (for example span8 and span4).

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
5
7
6
6
7
5
8
4
9
3
10
2
11
1
12

Icons Graciously provided by Glyphicons

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal

Image Position

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia.

Toggle

Morbi in dui quis est pulvinar ullamcorper

Nulla facilisi. Integer lacinia sollicitudin massa. Morbi in dui quis est pulvinar ullamcorper. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue.

Integer lacinia sollicitudin massa ultricies

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue.

Vestibulum tincidunt malesuada tellus

Integer lacinia sollicitudin massa. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue.

Tabs

Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue. Nam elit agna,endrerit sit amet, tincidunt ac, viverra sed, nulla.

Quisque diam lorem, interdum vitae,dapibus ac, scelerisque vitae, pede.

Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue. Nam elit agna,endrerit sit amet, tincidunt ac, viverra sed, nulla.

Quisque diam lorem, interdum vitae,dapibus ac, scelerisque vitae, pede.

Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue. Nam elit agna,endrerit sit amet, tincidunt ac, viverra sed, nulla.

Quisque diam lorem, interdum vitae,dapibus ac, scelerisque vitae, pede.

Accordion

Morbi in dui quis est pulvinar ullamcorper

Nulla facilisi. Integer lacinia sollicitudin massa. Morbi in dui quis est pulvinar ullamcorper. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue.

Integer lacinia sollicitudin massa ultricies

Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue.

Vestibulum tincidunt malesuada tellus

Integer lacinia sollicitudin massa. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue.

Buttons

Button class="" Description
btn Standard gray button with gradient
btn btn_color Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-info Used as an alternate to the default styles
btn btn-success Indicates a successful or positive action
btn btn-warning Indicates caution should be taken with this action
btn btn-danger Indicates a dangerous or potentially negative action
btn btn-inverse Alternate dark gray button, not tied to a semantic action or use

Message Box Styles

Info Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio libero.
Success Style
Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
Warning Style
Class aptent taciti sociosqu ad litora torquent per conubia nostra, inceptos.
Error Style
Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.