Typography


Grid system

Code explained


.col-1

.col-1

.col-1

.col-1

.col-2

.col-2

.col-1

.col-2

.col-1

.col-3

.col-1

.col-4

Headings

Code explained

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

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.

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.

Columns

Code explained

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

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.

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.


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.

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.


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

Code

Code explained

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


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

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.


Form

Code explained




Male

Female

I have a bike

I have a car





Buttons

Code explained











Progress Bar

Code explained

 
 
 
 
 
Photoshop
HTML & CSS
JavaScript
PHP


Slider

Code explained

Video

Code explained


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


Leave a reply

.
.