Glyphicons

Available glyphs

Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.

asterisk
plus
euro
minus
cloud
envelope
pencil
glass
music
search
heart
star
star-empty
user
film
th-large
th
th-list
ok
remove
zoom-in
zoom-out
off
signal
cog
trash
home
file
time
road
download-alt
download
upload
inbox
play-circle
repeat
refresh
list-alt
lock
flag
headphones
volume-off
volume-down
volume-up
qrcode
barcode
tag
tags
book
bookmark
print
camera
font
bold
italic
text-height
text-width
align-left
align-center
align-right
align-justify
list
indent-left
indent-right
facetime-video
picture
map-marker
adjust
tint
edit
share
check
move
step-backward
fast-forward
backward
play
pause
stop
forward
fast-backward
step-forward
eject
chevron-left
chevron-right
plus-sign
minus-sign
remove-sign
ok-sign
question-sign
info-sign
screenshot
remove-circle
ok-circle
ban-circle
arrow-left
arrow-right
arrow-up
arrow-down
share-alt
resize-full
resize-small
exclamation-sign
gift
leaf
fire
eye-open
eye-close
warning-sign
plane
calendar
random
comment
magnet
chevron-up
chevron-down
retweet
shopping-cart
folder-close
folder-open
resize-vertical
resize-horizontal
hdd
bullhorn
bell
certificate
thumbs-up
thumbs-down
hand-right
hand-left
hand-up
hand-down
circle-arrow-right
circle-arrow-left
circle-arrow-up
circle-arrow-down
globe
wrench
tasks
filter
briefcase
fullscreen
dashboard
paperclip
heart-empty
link
phone
pushpin
usd
gbp
sort
sort-by-alphabet
sort-by-alphabet-alt
sort-by-order
sort-by-order-alt
sort-by-attributes
sort-by-attributes-alt
unchecked
expand
collapse-down
collapse-up
log-in
flash
log-out
new-window
record
save
open
saved
import
export
send
floppy-disk
floppy-saved
floppy-remove
floppy-save
floppy-open
credit-card
transfer
cutlery
header
compressed
earphone
phone-alt
tower
stats
sd-video
hd-video
subtitles
sound-stereo
sound-dolby
sound-5-1
sound-6-1
sound-7-1
copyright-mark
registration-mark
cloud-download
cloud-upload
tree-conifer
tree-deciduous
cd
save-file
open-file
level-up
copy
paste
alert
equalizer
king
queen
pawn
bishop
knight
baby-formula
tent
blackboard
bed
apple
erase
hourglass
lamp
duplicate
piggy-bank
scissors
bitcoin
btc
xbt
yen
jpy
ruble
rub
scale
ice-lolly
ice-lolly-tasted
education
option-horizontal
option-vertical
menu-hamburger
modal-window
oil
grain
sunglasses
text-size
text-color
text-background
object-align-top
object-align-bottom
object-align-horizontal
object-align-left
object-align-vertical
object-align-right
triangle-right
triangle-left
triangle-bottom
triangle-top
console
superscript
subscript
menu-left
menu-right
menu-down
menu-up

+icon("search")
+icon-primary("search")
+icon-info("search")
+icon-warning("search")
+icon-danger("search")
+icon-success("search")

Buttons

Link Buttons

Default Link Button Primary Link Button Info Link Button

Warning Link Button Danger Link Button Success Link Button

+a-btn("#") Default Link Button
+a-btn-primary("#") Primary Link Button
+a-btn-info("#") Info Link Button
+a-btn-warning("#") Warning Link Button
+a-btn-danger("#") Danger Link Button
+a-btn-success("#") Success Link Button

Buttons

+btn("Default Button")
+btn-primary("Primary Button")
+btn-info("Info Button")
+btn-warning(" Warning Button")
+btn-danger("Danger Button")
+btn-success("Success Button")

Large Buttons

+btn-lg("Default Large Button")
+btn-lg-primary("Primary Large Button")
+btn-lg-info("Info Large Button")
+btn-lg-warning("Warning Large Button")
+btn-lg-danger("Danger Large Button")
+btn-lg-success("Success Large Button")

Small Buttons

+btn-sm("Default Small Button")
+btn-sm-info("Info Small Button")
+btn-sm-info("Info Small Button")
+btn-sm-warning("Warning Small Button")
+btn-sm-danger("Danger Small Button")
+btn-sm-success("Success Small Button")

Extra Small Buttons

+btn-xs("Default Extra Small Button")
+btn-xs-primary("Primary Extra Small Button")
+btn-xs-info("Info Extra Small Button")
+btn-xs-warning("Warning Extra Small Button")
+btn-xs-danger("Danger Extra Small Button")
+btn-xs-success("Success Extra Small Button")

Input Buttons

+input-btn("Default Input Button")
+input-btn-primary("Primary Input Button")
+input-btn-info("Info Input Button")
+input-btn-warning("Warning Input Button")
+input-btn-danger("Danger Input Button")
+input-btn-success("Success Input Button")

Submit Buttons

+submit("Default Submit Button")
+submit-primary("Primary Submit Button")
+submit-info("Info Submit Button")
+submit-warning("Warning Submit Button")
+submit-danger("Danger Submit Button")
+submit-success("Success Submit Button")

Images

+img-responsive("images/slide1.jpg","Responsive Image")

+img-responsive-center("images/slide1.jpg","Responsive Image")

+img-rounded("images/img_rounded.jpg","Image with round corners")
+img-circle("images/img_circle.jpg","Circle image")
+img-thumbnail("images/img_thumbnail.jpg","Image with thumbnail borders")

Alerts

Simple Alerts

This is an info alert

Well done! You successfully read this important alert message.

This is a danger alert

This is a success alert

This is a warning alert

+alert-info("This is an info alert")
+alert-info("<strong>Well done!</strong> You successfully read this important alert message.")
+alert-danger("This is a danger alert")
+alert-success("This is a success alert")
+alert-warning("This is a warning alert")

Alerts with icons

This is an info alert

This is an info alert with custom icon

This is a danger alert

This is a success alert

This is a warning alert

 +alert-i-info("This is an info alert")
 +alert-i-info("This is an info alert with custom icon","heart")
 +alert-i-danger("This is a danger alert")
 +alert-i-success("This is a success alert")
 +alert-i-warning("This is a warning alert")

Dismissible Alerts

This is an info alert

This is a danger alert

This is a success alert

This is a warning alert

 +alert-x-info("This is an info alert")
 +alert-x-danger("This is a danger alert")
 +alert-x-success("This is a success alert")
 +alert-x-warning("This is a warning alert")

Dismissible Alerts with icons

This is an info alert

This is a danger alert

This is a success alert

This is a warning alert

 +alert-ix-info("This is an info alert")
 +alert-ix-danger("This is a danger alert")
 +alert-ix-success("This is a success alert")
 +alert-ix-warning("This is a warning alert")

Dropdowns

 +dropdown("My Dropdown Menu",[
 	{text:"Bootstrap",url:"http://www.getbootstrap.com"},
 	{text:"JADE",url:"http://www.jade-lang.com"},
 	{text:"NodeJS",url:"http://www.nodejs.org"}
 ])

	+dropup("My DropUp Menu",[
		{text:"Bootstrap",url:"http://www.getbootstrap.com"},
		{text:"JADE",url:"http://www.jade-lang.com"},
		{text:"NodeJS",url:"http://www.nodejs.org"}
	])

Forms

 +input("text","txtName","Name","Name")
 +checkbox("Check me out")
 +radio("My Radio Button")
 +submit("Register")
 +input-group("$","%")
   +input-simple("text","txtName","Name","Name")
 +input-group("$")
   +input-simple("text","txtName","Name","Name")
 +input-group("","%")
   +input-simple("text","txtName","Name","Name")

Checkboxes - Inline

 +checkbox-inline("1")
 +checkbox-inline("2")
 +checkbox-inline("3")

Radio Buttons - Inline

+radio-inline("1")
+radio-inline("2")
+radio-inline("3")

+icon-btn("search")

Labels

DefaultPrimarySuccessInfoWarningDanger

+label-default("Default")
+label-primary("Primary")
+label-success("Success")
+label-info("Info")
+label-warning("Warning")
+label-danger("Danger")

Badges

Inbox 42

 +badge("42")

Nav-Tabs

+nav-tabs([{text:"Home",href:"#"},{text:"Profile",href:"#"},{text:"Message",href:"#"}],0)

Nav-Tabs Justified

+nav-tabs-justified([{text:"Home",href:"#"},{text:"Profile",href:"#"},{text:"Message",href:"#"}],0)

Nav-Pills

+nav-pills([{text:"Home",href:"#"},{text:"Profile",href:"#"},{text:"Message",href:"#"}],0)

Nav-Pills Justified

+nav-pills-justified([{text:"Home",href:"#"},{text:"Profile",href:"#"},{text:"Message",href:"#"}],0)

Nav-Stacked

+nav-stacked([{text:"Home",href:"#"},{text:"Profile",href:"#"},{text:"Message",href:"#"}],0)

Tabs

Home

This is Home tab

Profile

This is Profile tab

Messages

This is Messages tab

Settings

This is Settings tab

 +tab-list(["Home","Profile","Messages","Settings"],0)
	+tab("Home","active")
		h1 Home
		p This is Home tab
	+tab("Profile")
		h1 Profile
		p This is Profile tab
	+tab("Messages")
		h1 Messages
		p This is Messages tab
	+tab("Settings")
		h1 Settings
		p This is Settings tab

Panels

Primary Panel

This is primary panel

 +panel-primary("Primary Panel")
 	p This is primary panel

Default Panel

This is default panel

 +panel-default("Default Panel")
 	p This is default panel

Success Panel

This is success panel

 +panel-success("Success Panel")
 	p This is success panel

Info Panel

This is info panel

 +panel-info("Info Panel")
 	p This is info panel

Warning Panel

This is warning panel

 +panel-warning("Warning Panel")
 	p This is warning panel

Danger Panel

This is danger panel

 +panel-danger("Danger Panel")
 	p This is danger panel

Modal

 button.btn.btn-primary(data-toggle="modal",data-target="#myModal") Launch demo modal
 +modal("Modal title","myModal")
	p This is modal content

Tooltips

These toolips are rendered using a default anchor element with href attribute set as "#", based on the position parameter the tooltip is shown accordingly.

Show Left Tooltip

 +tooltip-left("This is a tooltip on the left")

Show Right Tooltip

 +tooltip-right("This is a tooltip on the right")

Show Top Tooltip

 +tooltip-top("This is a tooltip on the top")

Show Bottom Tooltip

 +tooltip-bottom("This is a tooltip on the bottom")

Collapse

Flexible plugin that utilizes a handful of classes for easy toggle behavior.

Example - Accordion primary

Accordion Title1

This is first accordion content

Accordion Title2

This is second accordion content

Accordion Title3

This is third accordion content

Example - Accordion mixed

Title1

This is first accordion content

Title2

This is second accordion content

Title3

This is third accordion content

Title4

This is fourth accordion content

Title5

This is fifth accordion content

Title6

This is sixth accordion content

+accordion("sample")
	+accordion-item-primary("Title1","sample","true")
		|  This is first accordion content
	+accordion-item-default("Title2","sample")
		|  This is second accordion content
	+accordion-item-default("Title3","sample")
		|  This is third accordion content

Carousel

A slideshow component for cycling through elements, like a carousel. Nested carousels are not supported.

Example - Image with Caption

+carousel("Carousel ID",[
	{image:"images/slide1.jpg",p:"Carousel Caption #1"},
	{image:"images/slide2.jpg",p:"Carousel Caption #2"},
	{image:"images/slide3.jpg",p:"Carousel Caption #3"},
	{image:"images/slide4.jpg",p:"Carousel Caption #4"}
])

Example - Image only Carousel

+carousel("Carousel ID_2",[
	{image:"images/slide1.jpg"},
	{image:"images/slide2.jpg"},
	{image:"images/slide3.jpg"},
	{image:"images/slide4.jpg"}
])

Example - Carousel with Action buttons

+carousel("Carousel ID_3",[
	{image:"images/slide1.jpg",h1:"Headline #1",p:"Carousel Caption #1",button:{caption:"Sign up today",url:"#"}},
	{image:"images/slide1.jpg",h1:"Headline #2",p:"Carousel Caption #2",button:{caption:"Sign up today",url:"#"}},
	{image:"images/slide1.jpg",h1:"Headline #3",p:"Carousel Caption #3",button:{caption:"Sign up today",url:"#"}},
	{image:"images/slide1.jpg",h1:"Headline #4",p:"Carousel Caption #4",button:{caption:"Sign up today",url:"#"}}
])

Single Toggle

+toggle-primary("Single toggle")
+toggle-default("Single toggle")
+toggle-info("Single toggle")
+toggle-success("Single toggle")
+toggle-warning("Single toggle")
+toggle-danger("Single toggle")

Checkboxes

Checkbox1 Checkbox2 Checkbox3

+checkbox-toggle-primary([{caption:"Checkbox1"},{caption:"Checkbox2"},{caption:"Checkbox3"}],0)

Checkbox1 Checkbox2 Checkbox3

+checkbox-toggle-info([{caption:"Checkbox1"},{caption:"Checkbox2"},{caption:"Checkbox3"}],0)

Checkbox1 Checkbox2 Checkbox3

+checkbox-toggle-success([{caption:"Checkbox1"},{caption:"Checkbox2"},{caption:"Checkbox3"}],0)

Checkbox1 Checkbox2 Checkbox3

+checkbox-toggle-warning([{caption:"Checkbox1"},{caption:"Checkbox2"},{caption:"Checkbox3"}],0)

Checkbox1 Checkbox2 Checkbox3

+checkbox-toggle-danger([{caption:"Checkbox1"},{caption:"Checkbox2"},{caption:"Checkbox3"}],0)

Checkbox1 Checkbox2 Checkbox3

+checkbox-toggle-default([{caption:"Checkbox1"},{caption:"Checkbox2"},{caption:"Checkbox3"}],0)

Radio toggle

Radio1 Radio2 Radio3

+radio-toggle-primary("radOptions",[{caption:"Radio1"},{caption:"Radio2"},{caption:"Radio3"}],0)

Radio1 Radio2 Radio3

+radio-toggle-info("radOptions2",[{caption:"Radio1"},{caption:"Radio2"},{caption:"Radio3"}],0)

Radio1 Radio2 Radio3

+radio-toggle-success("radOptions3",[{caption:"Radio1"},{caption:"Radio2"},{caption:"Radio3"}],0)

Radio1 Radio2 Radio3

+radio-toggle-warning("radOptions4",[{caption:"Radio1"},{caption:"Radio2"},{caption:"Radio3"}],0)

Radio1 Radio2 Radio3

+radio-toggle-danger("radOptions5",[{caption:"Radio1"},{caption:"Radio2"},{caption:"Radio3"}],0)

Radio1 Radio2 Radio3

+radio-toggle-default("radOptions6",[{caption:"Radio1"},{caption:"Radio2"},{caption:"Radio3"}],0)

Tables

Tables - Default

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

+table(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]])

Tables - Striped

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

+table-striped(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]])

Tables - Bordered

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

+table-bordered(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]])

Tables - Hover

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

+table-hover(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]])

Tables - Condensed

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

+table-condensed(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]])

Tables - Custom Styles

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

+table(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]],"table-striped table-bordered")

1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

+table([],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]],"table-striped table-bordered")

List groups

Simple list groups

Cras justo odio

+list-group(["Cras justo odio","Cras justo odio","Cras justo odio","Cras justo odio","Cras justo odio"])

List group with links

Cras justo odio Cras justo odio Cras justo odio Cras justo odio Cras justo odio

+list-group-links([{text:"Cras justo odio",url:"#"},{text:"Cras justo odio",url:"#"},{text:"Cras justo odio",url:"#"},{text:"Cras justo odio",url:"#"},{text:"Cras justo odio",url:"#"},],0)

+list-group-custom()
  +list-group-item("#","true")
    h4.list-group-item-heading List group item heading
    p.list-group-item-text
      | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

  +list-group-item("#")
    h4.list-group-item-heading List group item heading
    p.list-group-item-text
      | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

  +list-group-item("#")
    h4.list-group-item-heading List group item heading
    p.list-group-item-text
      | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Progress bars

+progress-bar(60)

+progress-bar-info(20)

+progress-bar-warning(60)

+progress-bar-danger(80)

+progress-bar-striped(60)

Navbars

+navbar("Project name","dropdown_menu")

+navbar("Project name","dropdown_menu","inverse")

+navbar("Project name","dropdown_menu")
  +nav_item("index.html","active") Home
  +nav_item("index.html") About
  +nav_item("index.html") Contact

+navbar("Project name","dropdown_menu")
  +nav_item("index.html","active") Home
  +nav_item("about.html") About
  +nav_item("contact.html") Contact
  +nav_item_dropdown("#")(label="Dropdown")
    +nav_item("#") Action
    +nav_item("#") Another Action
    +nav_item("#") Something else here
    +nav_divider
    +nav_header Nav header
    +nav_item("#") Separated link
    +nav_item("#") One more separated link

Components

Glyphicons

Available glyphs

Buttons

Link Buttons

Buttons

Large Buttons

Small Buttons

Extra Small Buttons

Input Buttons

Submit Buttons

Images

Alerts

Simple Alerts

Alerts with icons

Dismissible Alerts

Dismissible Alerts with icons

Dropdowns

Forms

Checkboxes - Inline

Radio Buttons - Inline

Labels

Badges

Nav-Tabs

Nav-Tabs Justified

Nav-Pills

Nav-Pills Justified

Nav-Stacked

Tabs

Home

Profile

Messages

Settings

Panels

Primary Panel

Default Panel

Success Panel

Info Panel

Warning Panel

Danger Panel

Modal

Tooltips

Collapse

Example - Accordion primary

Example - Accordion mixed

Carousel

Example - Image with Caption

Example - Image only Carousel

Example - Carousel with Action buttons

Example headline

Example headline

Example headline

Example headline

Single Toggle

Checkboxes

Radio toggle

Tables

Tables - Default

Tables - Striped

Tables - Bordered

Tables - Hover

Tables - Condensed

Tables - Custom Styles

List groups

Simple list groups

List group with links

Custom list group

List group item heading

List group item heading

List group item heading

Progress bars

Navbars