Follow us on Twitter and Facebook

/// Shortcodes

Buttons

Button Shortcode Description
[mybtn url="#"]Text[/mybtn] Button with YUOR colors
[btn url="#"]Text[/btn] Standard gray button with gradient
[btn url="#" style="btn-primary"]Text[/btn] Provides extra visual weight and identifies the primary action in a set of buttons
[btn url="#" style="btn-info"]Text[/btn] Used as an alternate to the default styles
[btn url="#" style="btn-success"]Text[/btn] Indicates a successful or positive action
[btn url="#" style="btn-warning"]Text[/btn] Indicates caution should be taken with this action
[btn url="#" style="btn-danger"]Text[/btn] Indicates a dangerous or potentially negative action
[btn url="#" style="btn-inverse"]Text[/btn] Alternate dark gray button, not tied to a semantic action or use
[btn url="#" style="btn-inverse"][icon image="icon-ok" style="icon-white"][/btn] Button with incons

/// Multiple sizes

Button Shortcode
[btn size="large" url="#"]Large[/btn]
[btn url="#"]Text[/btn]
[btn size="small" url="#"]Small[/btn]
[btn size="mini" url="#"]Mini[/btn]

Separators

Separator Shortcode

[hr]

[hr style="dash"]

  • 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

/// Built as a sprite

Instead of making every icon an extra request, we’ve compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

/// How to use

Bootstrap uses an [i] tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

[i image="icon-search"][/i]

There are also styles available for inverted (white) icons, made ready with one extra class:

[i iamge="icon-search" style="icon-white"][/i]

There are 120 classes to choose from for your icons. Just add an [i] tag with the right classes and you’re set. You can find the full list in sprites.less or right here in this document.

Heads up!
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the [i] tag for proper spacing.

/// Use cases

Icons are great, but where would one use them? Here are a few ideas:

  • As visuals for your sidebar navigation
  • For a purely icon-driven navigation
  • For buttons to help convey the meaning of an action
  • With links to share context on a user’s destination

Essentially, anywhere you can put an [i] tag, you can put an icon.

Inline labels Label and annotate text

Labels Markup
Default [label]Default[/label]
Success [label style="label-success"]Success[/label]
Warning [label style="label-warning"]Warning[/label]
Important [label style="label-important"]Important[/label]
Info [label style="label-info"]Info[/label]
Inverse [label style="label-inverse"]Inverse[/label]

Badges Indicators and unread counts

/// About

Badges are small, simple components for displaying an indicator or count of some sort. They’re commonly found in email clients like Mail.app or on mobile apps for push notifications.

/// Available classes

Name Example Markup
Default 1 [badge]1[/badge]
Success 2 [badge style="badge-success"]2[/badge]
Warning 4 [badge style="badge-warning"]4[/badge]
Error 6 [badge style="badge-error"]6[/badge]
Info 8 [badge style="badge-info"]8[/badge]
Inverse 10 [badge style="badge-inverse"]10[/badge]


Allerts

Default

×Oh snap! Change a few things up and try submitting again.
[alert ]
  ...
[/alert]

Error or danger

×Oh snap! Change a few things up and try submitting again.
[alert style="alert-error"]
  ...
[/alert]

Success

×Well done! You successfully read this important alert message.
[alert style="alert-success"]
  ...
[/alert]

Information

×Heads up! This alert needs your attention, but it’s not super important.
[alert style="alert-info"]
  ...
[/alert]

Progress bars

[progress_bar width="20%"]
[/progress_bar]

[progress_bar style="progress-success" width="20%"]
[/progress_bar]

[progress_bar style="progress-warning" width="20%"]
[/progress_bar]

[progress_bar style="progress-danger" width="20%"]
[/progress_bar]

Wells

Use the well as a simple effect on an element to give it an inset effect.

Look, I’m in a well!

[well]
  ...
[/well]


Dropcaps

Dropcaps Markup
V alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. [dropcap1]L[/dropcap1]orem ipsum… ]
V alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. [dropcap2]L[/dropcap2]orem ipsum… ]
V alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. [dropcap3]L[/dropcap3]orem ipsum… ]
V alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. [dropcap4]L[/dropcap4]orem ipsum… ]
V alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. [dropcap5]L[/dropcap5]orem ipsum… ]

Blockquote

Blockquote Markup

Valera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

Some author
[blockquote1]Some text[/blockquote1]

Valera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

[blockquote1]Some text[/blockquote1]

Valera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

[blockquote2]Some text[/blockquote2]

Valera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

[blockquote3]Some text[/blockquote3]

Valera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

[blockquote4]Some text[/blockquote4]

Valera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

[blockquote5]Some text[/blockquote5]

Valera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

[blockquote6]Some text[/blockquote6]

Valera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

[blockquote7]Some text[/blockquote7]

Valera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

[blockquote8]Some text[/blockquote8]

Images shortcodes

Image Shortcode
[style_image image="..." alt="" size="one_fourth"]
[style_image image="..." alt="" size="one_third"]
[style_image image="..." alt="" size="one_half"]
[style_image image="..." alt="" size="two_third"]

Portfolio shortcodes

Visit link
The Last One

About project

[4col_portfolio show_posts=4]


Visit link
The Last One

About project

[3col_portfolio show_posts=3]


Visit link
The Last One

About project

[2col_portfolio show_posts=2]


Sliders

/// Testimonials

/// Blog slider


  • Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words.

    Jhon Doe
  • It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

    Some CEO

[well]
[tslider]

<li>
[blockquote author="Jhon Doe"]Some text[/blockquote]
</li>

<li>
[blockquote author="Jhon Doe"]Some text[/blockquote]
</li>

[/tslider]
[/well]


[blog show_posts=3]