Looking for something?

Typography

[col_grid_wrap]

[col_grid]
[col_size class=”col-4 typo-first-grid” padding=”yes”]

Grid system

Code explained

[/col_size]
[/col_grid]

[col_grid]
[col_size class=”col-1 textcenter” padding=”yes”].col-1[/col_size]
[col_size class=”col-1 textcenter” padding=”yes”].col-1[/col_size]
[col_size class=”col-1 textcenter” padding=”yes”].col-1[/col_size]
[col_size class=”col-1 textcenter” padding=”yes”].col-1[/col_size]
[/col_grid]

[col_grid]

[col_size class=”col-2 textcenter” padding=”yes”].col-2[/col_size]
[col_size class=”col-2 textcenter” padding=”yes”].col-2[/col_size]
[/col_grid]

[col_grid]

[col_size class=”col-1 textcenter” padding=”yes”].col-1[/col_size]
[col_size class=”col-2 textcenter” padding=”yes”].col-2[/col_size]
[col_size class=”col-1 textcenter” padding=”yes”].col-1[/col_size]
[/col_grid]

[col_grid]

[col_size class=”col-3 textcenter” padding=”yes”].col-3[/col_size]
[col_size class=”col-1 textcenter” padding=”yes”].col-1[/col_size]
[/col_grid]

[col_grid]

[col_size class=”col-4 textcenter” padding=”yes”].col-4[/col_size]

[/col_grid]

[col_grid]
[col_size class=”col-2″ padding=”yes”]

Headings

Code explained

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

[/col_size]
[col_size class=”col-2″ padding=”yes”]

Alert Messages

Code explained

×
 
General message. Your message goes here… Lorem ipsum dolor sit amet.
×
 
Error message. Your message goes here… Lorem ipsum dolor sit amet.
×
 
Info message. Your message goes here… Lorem ipsum dolor sit amet.
×
 
Success message. Your message goes here… Lorem ipsum dolor sit amet.

[/col_size]
[/col_grid]
[col_grid]
[col_size class=”col-2″ padding=”yes”]

HTML Styles

Code explained

This is text link lorem ipsum dolor sit amet, consectetur adipiscing elit. This is underlined text morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique. This is highlighted text sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.

[/col_size]
[col_size class=”col-2″ padding=”yes”]

Columns

Code explained

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

[/col_size]
[/col_grid]

[col_grid]
[col_size class=”col-2″ padding=”yes”]

Lists

Code explained

  • Fusce dapibus, tellus.
  • Etiam porta sem malesuada magna.
  • Donec ullamcorper nulla non metus.
  • Duis mollis, est non.
  1. Fusce dapibus, tellus.
  2. Etiam porta sem malesuada magna.
  3. Donec ullamcorper nulla non metus.
  4. Duis mollis, est non.

[/col_size]
[col_size class=”col-2″ padding=”yes”]

Labels & Badges

Code explained

Default Lorem ipsum dolor sit amet.

Success Lorem ipsum dolor sit amet.

Warning Lorem ipsum dolor sit amet.

Important Lorem ipsum dolor sit amet.

Info Lorem ipsum dolor sit amet.

1 Lorem ipsum dolor sit amet.

2 Lorem ipsum dolor sit amet.

4 Lorem ipsum dolor sit amet.

6 Lorem ipsum dolor sit amet.

7 Lorem ipsum dolor sit amet.

[/col_size]
[/col_grid]
[col_grid]
[col_size class=”col-2″ padding=”yes”]

Tabs

Code explained

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.

[/col_size]
[col_size class=”col-2″ padding=”yes”]

Accordion

Code explained


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.

[/col_size]
[/col_grid]
[col_grid]
[col_size class=”col-2″ padding=”yes”]

Blockquote

Code explained

This is a sample Blockquote. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Someone famous Source Title

[/col_size]
[col_size class=”col-2″ padding=”yes”]

Code

Code explained

pre {
  width: 100%;
  margin: 0 0 15px 0;
  padding: 0 10px;
  background-color: #F2F2F2;
}

[/col_size]
[/col_grid]
[col_grid]
[col_size class=”col-2″ padding=”yes”]

Table

Code explained

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

[/col_size]
[col_size class=”col-2″ padding=”yes”]

Dropcaps

Code explained

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.

[/col_size]
[/col_grid]
[col_grid]
[col_size class=”col-4″ padding=”yes”]

Form

Code explained




MaleFemale

I have a bike

I have a car




[/col_size][/col_grid]
[col_grid]
[col_size class=”col-2″ padding=”yes”]

Buttons

Code explained











[/col_size]
[col_size class=”col-2″ padding=”yes”]

Progress Bar

Code explained

Photoshop
HTML & CSS
JavaScript
PHP

[/col_size]
[/col_grid]
[col_grid]
[col_size class=”col-2″ padding=”yes”]

Slider

Code explained

[/col_size]
[col_size class=”col-2″ padding=”yes”]

Video

Code explained

[/col_size]
[/col_grid]
[col_grid]
[col_size class=”col-4″ padding=”yes”]

Icons

Code explained

  • 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
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

[/col_size]
[/col_grid]
[/col_grid_wrap]