Buttons & icons

buttons, icons, dropdowns and more ...

Button group with dropup/dropdown toggle .btn-group


Default button dropdowns .dropdown-toggle


Smaller button dropdowns .btn-sm .dropdown-toggle


Extra small button dropdowns .btn-xs .dropdown-toggle


Multiple Level Dropdown New!

Custom created Multiple Level dropdown that works with ease! Simply use the class .dropdown-menu .multi-level

Block buttons .btn .btn-block


Block group buttons .btn-group .btn-group-justified

Default round buttons .btn-circle

Large round buttons .btn-circle .btn-lg

Extra Large round buttons .btn-circle .btn-xl

Buttons with loading indicator

To use this button import css and js:ladda-themeless.min.css,ladda.min.js,spin.min.js


Default buttons .ladda-button & data-style="expand-*"


Zoom buttons .ladda-button & data-style="zoom-*"


Slide buttons .ladda-button & data-style="slide-*"


Built-in progress bar use div container with .progress-btn css class


Size buttons .btn-xs,.btn-sm,.btn-lg

To use iconpicker in a form just add attribute name="" in button tag or div tag.

For glyphicon picker data-icon="glyphicon-camera" data-iconset="glyphicon" role="iconpicker"


For font awesome picker data-icon="fa-wifi" data-iconset="fontawesome" role="iconpicker"


data-placement="left"

data-placement="top"

data-placement="bottom"

data-placement="right"


Other Options:
data-arrow-class="btn-success"

data-arrow-prev-icon-class="glyphicon glyphicon-chevron-left"

data-arrow-next-icon-class="glyphicon glyphicon-chevron-right"

data-cols="10"
data-rows="4"

The icons below are the most basic ones, without any icons or additional css applied to it

Buttons come in 6 different default color sets .btn .btn-* .btn-default, .btn-primary, .btn-success... etc

Default Primary Success Info Warning Danger Disabled Link
Button Sizing

Large buttons to attract call to action .btn .btn-lg

Large button Large button

The Default button .btn .btn-default

Default button Default button

Small button for elegance .btn .btn-sm

Small button Small button

Extra small button for added info .btn .btn-xs

Mini button Mini button
Button Groups

Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btn in .btn-group .

Horizontal Group With Icons Multiple Button Groups

Make a set of buttons appear vertically stacked rather than horizontally by putting it in .btn-group-vertical .

Vertical Group With Dropdown With Icons Multiple Button Groups
Save

Use Label Buttons with .btn-label

Outline Buttons

Add the class .btn-outline to button style.

Primary Button Success Button Warning Button Danger Button Default Button

Examples to use buttons with font awesome icons.

Examples to use buttons with glyphicon halflings icons.

Toolbar icon example

        <div class="col-sm-4">
            <button class="btn btn-app btn-block">
                <i class="fa fa-comments-o"></i>
                Comments <span class="badge badge-danger"> 4 </span>
            </button>
        </div>
        
  • fa-adjust
  • fa-asterisk
  • fa-ban
  • fa-bar-chart-o
  • fa-barcode
  • fa-flask
  • fa-beer
  • fa-bell-o
  • fa-bell
  • fa-bolt
  • fa-book
  • fa-bookmark
  • fa-bookmark-o
  • fa-briefcase
  • fa-bullhorn
  • fa-calendar
  • fa-camera
  • fa-camera-retro
  • fa-certificate
  • fa-check-square-o
  • fa-square-o
  • fa-circle
  • fa-circle-o
  • fa-cloud
  • fa-cloud-download
  • fa-cloud-upload
  • fa-coffee
  • fa-cog
  • fa-cogs
  • fa-comment
  • fa-comment-o
  • fa-comments
  • fa-comments-o
  • fa-credit-card
  • fa-tachometer
  • fa-desktop
  • fa-arrow-circle-o-down
  • fa-download
  • fa-pencil-square-o
  • fa-envelope
  • fa-envelope-o
  • fa-exchange
  • fa-exclamation-circle
  • fa-external-link
  • fa-eye-slash
  • fa-eye
  • fa-video-camera
  • fa-fighter-jet
  • fa-film
  • fa-filter
  • fa-fire
  • fa-flag
  • fa-folder
  • fa-folder-open
  • fa-folder-o
  • fa-folder-open-o
  • fa-cutlery
  • fa-gift
  • fa-glass
  • fa-globe
  • fa-users
  • fa-hdd-o
  • fa-headphones
  • fa-heart
  • fa-heart-o
  • fa-home
  • fa-inbox
  • fa-info-circle
  • fa-key
  • fa-leaf
  • fa-laptop
  • fa-gavel
  • fa-lemon-o
  • fa-lightbulb-o
  • fa-lock
  • fa-unlock
  • glyphicon-asterisk
  • glyphicon-plus
  • glyphicon-euro
  • glyphicon-minus
  • glyphicon-cloud
  • glyphicon-envelope
  • glyphicon-pencil
  • glyphicon-glass
  • glyphicon-music
  • glyphicon-search
  • glyphicon-heart
  • glyphicon-star
  • glyphicon-star-empty
  • glyphicon-user
  • glyphicon-film
  • glyphicon-th-large
  • glyphicon-th
  • glyphicon-th-list
  • glyphicon-ok
  • glyphicon-remove
  • glyphicon-zoom-in
  • glyphicon-zoom-out
  • glyphicon-off
  • glyphicon-signal
  • glyphicon-cog
  • glyphicon-trash
  • glyphicon-home
  • glyphicon-file
  • glyphicon-time
  • glyphicon-road
  • glyphicon-download-alt
  • glyphicon-download
  • glyphicon-upload
  • glyphicon-inbox
  • glyphicon-play-circle
  • glyphicon-repeat
  • glyphicon-refresh
  • glyphicon-list-alt
  • glyphicon-lock
  • glyphicon-flag
  • glyphicon-headphones
  • glyphicon-volume-off
  • glyphicon-volume-down
  • glyphicon-volume-up
  • glyphicon-qrcode
  • glyphicon-barcode
  • glyphicon-tag
  • glyphicon-tags
  • glyphicon-book
  • glyphicon-bookmark
  • glyphicon-print
  • glyphicon-camera
  • glyphicon-font
  • glyphicon-bold
  • glyphicon-italic
  • glyphicon-text-height
  • glyphicon-text-width
  • glyphicon-align-left
  • glyphicon-align-center
  • glyphicon-align-right
  • glyphicon-align-justify
  • glyphicon-list
  • glyphicon-indent-left
  • glyphicon-indent-right
  • glyphicon-facetime-video
  • glyphicon-picture
  • glyphicon-map-marker
  • glyphicon-adjust
  • glyphicon-tint
  • glyphicon-edit
  • glyphicon-share
  • glyphicon-check
  • glyphicon-move
  • glyphicon-step-backward
  • glyphicon-fast-backward
  • glyphicon-backward