18/6/2015

ComponentsBootstrap

Components
Overadozenreusablecomponentsbuilttoprovideiconography,
dropdowns,inputgroups,navigation,alerts,andmuchmore.

(//srv.carbonads.net/ads/click/x/GTND423ICESD5KJJF6A4YKQWCKBD5K3LCESI4Z3JCE
segment=placement:getbootstrapcom)
Yourbrainhasaround
70,000thoughtsaday.
Use1tocompletely
automateyourbusiness.
(//srv.carbonads.net/ads/click/x/GTND423ICESD5KJJF6A4YKQW
segment=placement:getbootstrapcom)
adsviaCarbon
(http://carbonads.com)

Glyphicons
Availableglyphs
Includesover250glyphsinfontformatfromtheGlyphiconHalflingsset.Glyphicons
(http://glyphicons.com/)Halflingsarenormallynotavailableforfree,buttheircreatorhasmadethem
availableforBootstrapfreeofcost.Asathankyou,weonlyaskthatyouincludealinkbackto
Glyphicons(http://glyphicons.com/)wheneverpossible.

glyphiconglyphiconasterisk

glyphiconglyphiconplus

glyphiconglyphiconeuro

glyphiconglyphiconeur

http://getbootstrap.com/components/

1/72

18/6/2015

ComponentsBootstrap

glyphiconglyphiconminus

glyphiconglyphiconcloud

glyphiconglyphiconenvelope

glyphiconglyphiconpencil

glyphiconglyphiconglass

glyphiconglyphiconmusic

glyphiconglyphiconsearch

glyphiconglyphiconheart

glyphiconglyphiconstar

glyphiconglyphiconstarempty

glyphiconglyphiconuser

glyphiconglyphiconfilm

glyphiconglyphiconthlarge

glyphiconglyphiconth

glyphiconglyphiconthlist

glyphiconglyphiconok

glyphiconglyphiconremove

glyphiconglyphiconzoomin

glyphiconglyphiconzoomout

glyphiconglyphiconoff

glyphiconglyphiconsignal

glyphiconglyphiconcog

glyphiconglyphicontrash

glyphiconglyphiconhome

glyphiconglyphiconfile

glyphiconglyphicontime

glyphiconglyphiconroad

glyphiconglyphicondownload
alt

glyphiconglyphicondownload

glyphiconglyphiconupload

glyphiconglyphiconinbox

glyphiconglyphiconplaycircle

http://getbootstrap.com/components/

2/72

18/6/2015

ComponentsBootstrap

glyphiconglyphiconrepeat

glyphiconglyphiconrefresh

glyphiconglyphiconlistalt

glyphiconglyphiconlock

glyphiconglyphiconflag

glyphiconglyphicon
headphones

glyphiconglyphiconvolumeoff

glyphiconglyphiconvolume
down

glyphiconglyphiconvolumeup

glyphiconglyphiconqrcode

glyphiconglyphiconbarcode

glyphiconglyphicontag

glyphiconglyphicontags

glyphiconglyphiconbook

glyphiconglyphiconbookmark

glyphiconglyphiconprint

glyphiconglyphiconcamera

glyphiconglyphiconfont

glyphiconglyphiconbold

glyphiconglyphiconitalic

glyphiconglyphicontextheight

glyphiconglyphicontextwidth

glyphiconglyphiconalignleft

glyphiconglyphiconaligncenter

glyphiconglyphiconalignright

glyphiconglyphiconalignjustify

glyphiconglyphiconlist

glyphiconglyphiconindentleft

glyphiconglyphiconindentright

glyphiconglyphiconfacetime
video

glyphiconglyphiconpicture

glyphiconglyphiconmapmarker

http://getbootstrap.com/components/

3/72

18/6/2015

ComponentsBootstrap

glyphiconglyphiconadjust

glyphiconglyphicontint

glyphiconglyphiconedit

glyphiconglyphiconshare

glyphiconglyphiconcheck

glyphiconglyphiconmove

glyphiconglyphiconstep
backward

glyphiconglyphiconfast
backward

glyphiconglyphiconbackward

glyphiconglyphiconplay

glyphiconglyphiconpause

glyphiconglyphiconstop

glyphiconglyphiconforward

glyphiconglyphiconfastforward

glyphiconglyphiconstep
forward

glyphiconglyphiconeject

glyphiconglyphiconchevronleft

glyphiconglyphiconchevron
right

glyphiconglyphiconplussign

glyphiconglyphiconminussign

glyphiconglyphiconremove
sign

glyphiconglyphiconoksign

glyphiconglyphiconquestion
sign

glyphiconglyphiconinfosign

glyphiconglyphiconscreenshot

glyphiconglyphiconremove
circle

glyphiconglyphiconokcircle

glyphiconglyphiconbancircle

glyphiconglyphiconarrowleft

glyphiconglyphiconarrowright

glyphiconglyphiconarrowup

glyphiconglyphiconarrowdown

http://getbootstrap.com/components/

4/72

18/6/2015

ComponentsBootstrap

glyphiconglyphiconsharealt

glyphiconglyphiconresizefull

glyphiconglyphiconresizesmall

glyphiconglyphicon
exclamationsign

glyphiconglyphicongift

glyphiconglyphiconleaf

glyphiconglyphiconfire

glyphiconglyphiconeyeopen

glyphiconglyphiconeyeclose

glyphiconglyphiconwarning
sign

glyphiconglyphiconplane

glyphiconglyphiconcalendar

glyphiconglyphiconrandom

glyphiconglyphiconcomment

glyphiconglyphiconmagnet

glyphiconglyphiconchevronup

glyphiconglyphiconchevron
down

glyphiconglyphiconretweet

glyphiconglyphiconshopping
cart

glyphiconglyphiconfolderclose

glyphiconglyphiconfolderopen

glyphiconglyphiconresize
vertical

glyphiconglyphiconresize
horizontal

glyphiconglyphiconhdd

glyphiconglyphiconbullhorn

glyphiconglyphiconbell

glyphiconglyphiconcertificate

glyphiconglyphiconthumbsup

glyphiconglyphiconthumbs
down

glyphiconglyphiconhandright

glyphiconglyphiconhandleft

glyphiconglyphiconhandup

http://getbootstrap.com/components/

5/72

18/6/2015

ComponentsBootstrap

glyphiconglyphiconhanddown

glyphiconglyphiconcirclearrow
right

glyphiconglyphiconcirclearrow
left

glyphiconglyphiconcirclearrow
up

glyphiconglyphiconcirclearrow
down

glyphiconglyphiconglobe

glyphiconglyphiconwrench

glyphiconglyphicontasks

glyphiconglyphiconfilter

glyphiconglyphiconbriefcase

glyphiconglyphiconfullscreen

glyphiconglyphicondashboard

glyphiconglyphiconpaperclip

glyphiconglyphiconheart
empty

glyphiconglyphiconlink

glyphiconglyphiconphone

glyphiconglyphiconpushpin

glyphiconglyphiconusd

glyphiconglyphicongbp

glyphiconglyphiconsort

glyphiconglyphiconsortby
alphabet

glyphiconglyphiconsortby
alphabetalt

glyphiconglyphiconsortby
order

glyphiconglyphiconsortby
orderalt

glyphiconglyphiconsortby
attributes

glyphiconglyphiconsortby
attributesalt

glyphiconglyphiconunchecked

glyphiconglyphiconexpand

glyphiconglyphiconcollapse
down

glyphiconglyphiconcollapseup

glyphiconglyphiconlogin

glyphiconglyphiconflash

http://getbootstrap.com/components/

6/72

18/6/2015

ComponentsBootstrap

glyphiconglyphiconlogout

glyphiconglyphiconnew
window

glyphiconglyphiconrecord

glyphiconglyphiconsave

glyphiconglyphiconopen

glyphiconglyphiconsaved

glyphiconglyphiconimport

glyphiconglyphiconexport

glyphiconglyphiconsend

glyphiconglyphiconfloppydisk

glyphiconglyphiconfloppy
saved

glyphiconglyphiconfloppy
remove

glyphiconglyphiconfloppysave

glyphiconglyphiconfloppy
open

glyphiconglyphiconcreditcard

glyphiconglyphicontransfer

glyphiconglyphiconcutlery

glyphiconglyphiconheader

glyphiconglyphicon
compressed

glyphiconglyphiconearphone

glyphiconglyphiconphonealt

glyphiconglyphicontower

glyphiconglyphiconstats

glyphiconglyphiconsdvideo

glyphiconglyphiconhdvideo

glyphiconglyphiconsubtitles

glyphiconglyphiconsound
stereo

glyphiconglyphiconsound
dolby

glyphiconglyphiconsound51

glyphiconglyphiconsound61

glyphiconglyphiconsound71

glyphiconglyphiconcopyright
mark

http://getbootstrap.com/components/

7/72

18/6/2015

ComponentsBootstrap

glyphiconglyphiconregistration
mark

glyphiconglyphiconcloud
download

glyphiconglyphiconcloud
upload

glyphiconglyphicontreeconifer

glyphiconglyphicontree
deciduous

glyphiconglyphiconcd

glyphiconglyphiconsavefile

glyphiconglyphiconopenfile

glyphiconglyphiconlevelup

glyphiconglyphiconcopy

glyphiconglyphiconpaste

glyphiconglyphiconalert

glyphiconglyphiconequalizer

glyphiconglyphiconking

glyphiconglyphiconqueen

glyphiconglyphiconpawn

glyphiconglyphiconbishop

glyphiconglyphiconknight

glyphiconglyphiconbaby
formula

glyphiconglyphicontent

glyphiconglyphiconblackboard

glyphiconglyphiconbed

glyphiconglyphiconapple

glyphiconglyphiconerase

glyphiconglyphiconhourglass

glyphiconglyphiconlamp

glyphiconglyphiconduplicate

glyphiconglyphiconpiggybank

glyphiconglyphiconscissors

glyphiconglyphiconbitcoin

glyphiconglyphiconbtc

glyphiconglyphiconxbt

http://getbootstrap.com/components/

8/72

18/6/2015

ComponentsBootstrap

glyphiconglyphiconyen

glyphiconglyphiconjpy

glyphiconglyphiconruble

glyphiconglyphiconrub

glyphiconglyphiconscale

glyphiconglyphiconicelolly

glyphiconglyphiconicelolly
tasted

glyphiconglyphiconeducation

glyphiconglyphiconoption
horizontal

glyphiconglyphiconoption
vertical

glyphiconglyphiconmenu
hamburger

glyphiconglyphiconmodal
window

glyphiconglyphiconoil

glyphiconglyphicongrain

glyphiconglyphiconsunglasses

glyphiconglyphicontextsize

glyphiconglyphicontextcolor

glyphiconglyphicontext
background

glyphiconglyphiconobject
aligntop

glyphiconglyphiconobject
alignbottom

glyphiconglyphiconobject
alignhorizontal

glyphiconglyphiconobject
alignleft

glyphiconglyphiconobject
alignvertical

glyphiconglyphiconobject
alignright

glyphiconglyphicontriangle
right

glyphiconglyphicontriangleleft

glyphiconglyphicontriangle
bottom

glyphiconglyphicontriangletop

glyphiconglyphiconconsole

glyphiconglyphiconsuperscript

glyphiconglyphiconsubscript

glyphiconglyphiconmenuleft

http://getbootstrap.com/components/

9/72

18/6/2015

ComponentsBootstrap

glyphiconglyphiconmenuright

glyphiconglyphiconmenudown

glyphiconglyphiconmenuup

Howtouse
Forperformancereasons,alliconsrequireabaseclassandindividualiconclass.Touse,placethe
followingcodejustaboutanywhere.Besuretoleaveaspacebetweentheiconandtextforproper
padding.

Don'tmixwithothercomponents
Iconclassescannotbedirectlycombinedwithothercomponents.Theyshouldnotbeusedalong
withotherclassesonthesameelement.Instead,addanested <span> andapplytheicon
classestothe <span> .

Onlyforuseonemptyelements
Iconclassesshouldonlybeusedonelementsthatcontainnotextcontentandhavenochild
elements.

Changingtheiconfontlocation
Bootstrapassumesiconfontfileswillbelocatedinthe ../fonts/ directory,relativetothe
compiledCSSfiles.MovingorrenamingthosefontfilesmeansupdatingtheCSSinoneofthree
ways:
Changethe @iconfontpath and/or @iconfontname variablesinthesourceLessfiles.
UtilizetherelativeURLsoption(http://lesscss.org/usage/#commandlineusagerelative
urls)providedbytheLesscompiler.
Changethe url() pathsinthecompiledCSS.
Usewhateveroptionbestsuitsyourspecificdevelopmentsetup.

Accessibleicons
ModernversionsofassistivetechnologieswillannounceCSSgeneratedcontent,aswellas
specificUnicodecharacters.Toavoidunintendedandconfusingoutputinscreenreaders
(particularlywheniconsareusedpurelyfordecoration),wehidethemwiththe aria
http://getbootstrap.com/components/

10/72

18/6/2015

ComponentsBootstrap

hidden="true" attribute.

Ifyou'reusinganicontoconveymeaning(ratherthanonlyasadecorativeelement),ensurethat
thismeaningisalsoconveyedtoassistivetechnologiesforinstance,includeadditionalcontent,
visuallyhiddenwiththe .sronly class.
Ifyou'recreatingcontrolswithnoothertext(suchasa <button> thatonlycontainsanicon),you
shouldalwaysprovidealternativecontenttoidentifythepurposeofthecontrol,sothatitwillmake
sensetousersofassistivetechnologies.Inthiscase,youcouldaddan arialabel attributeon
thecontrolitself.

<spanclass="glyphiconglyphiconsearch"ariahidden="true"></span>

Examples
Usetheminbuttons,buttongroupsforatoolbar,navigation,orprependedforminputs.
EXA MPLE

Star

Star

Star

Star

<buttontype="button"class="btnbtndefault"arialabel="LeftAlign">
<spanclass="glyphiconglyphiconalignleft"ariahidden="true"></span>
</button>
<buttontype="button"class="btnbtndefaultbtnlg">
<spanclass="glyphiconglyphiconstar"ariahidden="true"></span>Star
</button>

Aniconusedinanalerttoconveythatit'sanerrormessage,withadditional .sronly texttoconvey

thishinttousersofassistivetechnologies.
EXA MPLE

Enteravalidemailaddress

http://getbootstrap.com/components/

11/72

18/6/2015

ComponentsBootstrap

<divclass="alertalertdanger"role="alert">
<spanclass="glyphiconglyphiconexclamationsign"ariahidden="true"></span>
<spanclass="sronly">Error:</span>
Enteravalidemailaddress
</div>

Dropdowns
Toggleable,contextualmenufordisplayinglistsoflinks.Madeinteractivewiththedropdown
JavaScriptplugin(../javascript/#dropdowns).

Example
Wrapthedropdown'striggerandthedropdownmenuwithin .dropdown ,oranotherelementthat
declares position:relative; .Thenaddthemenu'sHTML.
EXA MPLE

Dropdown
Action
Anotheraction
Somethingelsehere

<divclass="dropdown">
<buttonclass="btnbtndefaultdropdowntoggle"type="button"id="dropdownMenu1"
datatoggle="dropdown"ariahaspopup="true"ariaexpanded="true">
Dropdown
<spanclass="caret"></span>
</button>
<ulclass="dropdownmenu"arialabelledby="dropdownMenu1">
<li><ahref="#">Action</a></li>
<li><ahref="#">Anotheraction</a></li>
<li><ahref="#">Somethingelsehere</a></li>
<li><ahref="#">Separatedlink</a></li>
</ul>
</div>

Dropdownmenuscanbechangedtoexpandupwards(insteadofdownwards)byadding .dropup tothe

parent.
http://getbootstrap.com/components/

12/72

18/6/2015

ComponentsBootstrap

EXA MPLE

Dropup

<divclass="dropup">
<buttonclass="btnbtndefaultdropdowntoggle"type="button"id="dropdownMenu2"
datatoggle="dropdown"ariahaspopup="true"ariaexpanded="false">
Dropup
<spanclass="caret"></span>
</button>
<ulclass="dropdownmenu"arialabelledby="dropdownMenu2">
<li><ahref="#">Action</a></li>
<li><ahref="#">Anotheraction</a></li>
<li><ahref="#">Somethingelsehere</a></li>
<li><ahref="#">Separatedlink</a></li>
</ul>
</div>

Alignment
Bydefault,adropdownmenuisautomaticallypositioned100%fromthetopandalongtheleftsideofits
parent.Add .dropdownmenuright toa .dropdownmenu torightalignthedropdownmenu.

Mayrequireadditionalpositioning
DropdownsareautomaticallypositionedviaCSSwithinthenormalflowofthedocument.This
meansdropdownsmaybecroppedbyparentswithcertain overflow propertiesorappearoutof
boundsoftheviewport.Addresstheseissuesonyourownastheyarise.

Deprecated .pullright alignment

Asofv3.1.0,we'vedeprecated .pullright ondropdownmenus.Torightalignamenu,use
.dropdownmenuright .Rightalignednavcomponentsinthenavbaruseamixinversionofthis
classtoautomaticallyalignthemenu.Tooverrideit,use .dropdownmenuleft .

<ulclass="dropdownmenudropdownmenuright"arialabelledby="dLabel">
...
</ul>

Headers
Addaheadertolabelsectionsofactionsinanydropdownmenu.
http://getbootstrap.com/components/

13/72

18/6/2015

ComponentsBootstrap

EXA MPLE

Dropdown
Dropdownheader

Action
Anotheraction
Somethingelsehere
Dropdownheader

Separatedlink

<ulclass="dropdownmenu"arialabelledby="dropdownMenu3">
...
<liclass="dropdownheader">Dropdownheader</li>
...
</ul>

Divider
Addadividertoseparateseriesoflinksinadropdownmenu.
EXA MPLE

Dropdown
Action
Anotheraction
Somethingelsehere
Separatedlink

<ulclass="dropdownmenu"arialabelledby="dropdownMenuDivider">
...
<lirole="separator"class="divider"></li>
...
</ul>

Disabledmenuitems
Add .disabled toa <li> inthedropdowntodisablethelink.
http://getbootstrap.com/components/

14/72

18/6/2015

ComponentsBootstrap

EXA MPLE

Dropdown
Regularlink
Disabledlink
Anotherlink

<ulclass="dropdownmenu"arialabelledby="dropdownMenu4">
<li><ahref="#">Regularlink</a></li>
<liclass="disabled"><ahref="#">Disabledlink</a></li>
<li><ahref="#">Anotherlink</a></li>
</ul>

Buttongroups
Groupaseriesofbuttonstogetheronasinglelinewiththebuttongroup.Addonoptional
JavaScriptradioandcheckboxstylebehaviorwithourbuttonsplugin(../javascript/#buttons).

Tooltips&popoversinbuttongroupsrequirespecialsetting
Whenusingtooltipsorpopoversonelementswithina .btngroup ,you'llhavetospecifythe
option container:'body' toavoidunwantedsideeffects(suchastheelementgrowingwider
and/orlosingitsroundedcornerswhenthetooltiporpopoveristriggered).

Ensurecorrect role andprovidealabel

Inorderforassistivetechnologiessuchasscreenreaderstoconveythataseriesofbuttons
isgrouped,anappropriate role attributeneedstobeprovided.Forbuttongroups,thiswouldbe
role="group" ,whiletoolbarsshouldhavea role="toolbar" .
Oneexceptionaregroupswhichonlycontainasinglecontrol(forinstancethejustifiedbutton
groupswith <button> elements)oradropdown.
Inaddition,groupsandtoolbarsshouldbegivenanexplicitlabel,asmostassistivetechnologies
willotherwisenotannouncethem,despitethepresenceofthecorrect role attribute.Inthe
examplesprovidedhere,weuse arialabel ,butalternativessuchas arialabelledby can
alsobeused.
http://getbootstrap.com/components/

15/72

18/6/2015

ComponentsBootstrap

Basicexample
Wrapaseriesofbuttonswith .btn in .btngroup .
EXA MPLE

Left

Middle

Right

<divclass="btngroup"role="group"arialabel="...">
<buttontype="button"class="btnbtndefault">Left</button>
<buttontype="button"class="btnbtndefault">Middle</button>
<buttontype="button"class="btnbtndefault">Right</button>
</div>

Buttontoolbar
Combinesetsof <divclass="btngroup"> intoa <divclass="btntoolbar"> formorecomplex
components.
EXA MPLE

<divclass="btntoolbar"role="toolbar"arialabel="...">
<divclass="btngroup"role="group"arialabel="...">...</div>
<divclass="btngroup"role="group"arialabel="...">...</div>
<divclass="btngroup"role="group"arialabel="...">...</div>
</div>

Sizing
Insteadofapplyingbuttonsizingclassestoeverybuttoninagroup,justadd .btngroup* toeach
.btngroup ,includingwhennestingmultiplegroups.
EXA MPLE

Left
Left
Left

Middle
Middle
Middle

Right

Right
Right

http://getbootstrap.com/components/

16/72

18/6/2015

ComponentsBootstrap

Left Middle Right

<divclass="btngroupbtngrouplg"role="group"arialabel="...">...</div>
<divclass="btngroup"role="group"arialabel="...">...</div>
<divclass="btngroupbtngroupsm"role="group"arialabel="...">...</div>
<divclass="btngroupbtngroupxs"role="group"arialabel="...">...</div>

Nesting
Placea .btngroup withinanother .btngroup whenyouwantdropdownmenusmixedwithaseriesof
buttons.
EXA MPLE

Dropdown

<divclass="btngroup"role="group"arialabel="...">
<buttontype="button"class="btnbtndefault">1</button>
<buttontype="button"class="btnbtndefault">2</button>
<divclass="btngroup"role="group">
<buttontype="button"class="btnbtndefaultdropdowntoggle"data
toggle="dropdown"ariahaspopup="true"ariaexpanded="false">
Dropdown
<spanclass="caret"></span>
</button>
<ulclass="dropdownmenu">
<li><ahref="#">Dropdownlink</a></li>
<li><ahref="#">Dropdownlink</a></li>
</ul>
</div>
</div>

Verticalvariation
Makeasetofbuttonsappearverticallystackedratherthanhorizontally.Splitbuttondropdownsare
notsupportedhere.

http://getbootstrap.com/components/

17/72

18/6/2015

ComponentsBootstrap

EXA MPLE

Button
Button
Dropdown
Button
Button
Dropdown
Dropdown
Dropdown

<divclass="btngroupvertical"role="group"arialabel="...">
...
</div>

Justifiedbuttongroups
Makeagroupofbuttonsstretchatequalsizestospantheentirewidthofitsparent.Alsoworkswith
buttondropdownswithinthebuttongroup.

Handlingborders
DuetothespecificHTMLandCSSusedtojustifybuttons(namely display:tablecell ),the
bordersbetweenthemaredoubled.Inregularbuttongroups, marginleft:1px isusedto
stackthebordersinsteadofremovingthem.However, margin doesn'tworkwith display:
tablecell .Asaresult,dependingonyourcustomizationstoBootstrap,youmaywishtoremove
orrecolortheborders.

IE8andborders
InternetExplorer8doesn'trenderbordersonbuttonsinajustifiedbuttongroup,whetherit'son
<a> or <button> elements.Togetaroundthat,wrapeachbuttoninanother .btngroup .
See#12476(https://github.com/twbs/bootstrap/issues/12476)formoreinformation.

With <a> elements

Justwrapaseriesof .btn sin .btngroup.btngroupjustified .
http://getbootstrap.com/components/

18/72

18/6/2015

ComponentsBootstrap

EXA MPLE

Left

Middle

Right

Left

Middle

Dropdown

<divclass="btngroupbtngroupjustified"role="group"arialabel="...">
...
</div>

Linksactingasbuttons
Ifthe <a> elementsareusedtoactasbuttonstriggeringinpagefunctionality,ratherthan
navigatingtoanotherdocumentorsectionwithinthecurrentpagetheyshouldalsobegivenan
appropriate role="button" .

With <button> elements

Tousejustifiedbuttongroupswith <button> elements,youmustwrapeachbuttoninabutton
group.Mostbrowsersdon'tproperlyapplyourCSSforjustificationto <button> elements,butsincewe
supportbuttondropdowns,wecanworkaroundthat.
EXA MPLE

Left

Middle

Right

<divclass="btngroupbtngroupjustified"role="group"arialabel="...">
<divclass="btngroup"role="group">
<buttontype="button"class="btnbtndefault">Left</button>
</div>
<divclass="btngroup"role="group">
<buttontype="button"class="btnbtndefault">Middle</button>
</div>
<divclass="btngroup"role="group">
<buttontype="button"class="btnbtndefault">Right</button>
</div>
</div>

http://getbootstrap.com/components/

19/72

18/6/2015

ComponentsBootstrap

Buttondropdowns
Useanybuttontotriggeradropdownmenubyplacingitwithina .btngroup andproviding
thepropermenumarkup.

Plugindependency
Buttondropdownsrequirethedropdownplugin(../javascript/#dropdowns)tobeincludedinyour
versionofBootstrap.

Singlebuttondropdowns
Turnabuttonintoadropdowntogglewithsomebasicmarkupchanges.
EXA MPLE

Default

Primary

Success

Info

Warning

Danger

<!Singlebutton>
<divclass="btngroup">
<buttontype="button"class="btnbtndefaultdropdowntoggle"datatoggle="dropdown"
ariahaspopup="true"ariaexpanded="false">
Action<spanclass="caret"></span>
</button>
<ulclass="dropdownmenu">
<li><ahref="#">Action</a></li>
<li><ahref="#">Anotheraction</a></li>
<li><ahref="#">Somethingelsehere</a></li>
<lirole="separator"class="divider"></li>
<li><ahref="#">Separatedlink</a></li>
</ul>
</div>

Splitbuttondropdowns
Similarly,createsplitbuttondropdownswiththesamemarkupchanges,onlywithaseparatebutton.
EXA MPLE

Default

Primary

http://getbootstrap.com/components/

Success

Info

Warning

Danger
20/72

18/6/2015

ComponentsBootstrap

<!Splitbutton>
<divclass="btngroup">
<buttontype="button"class="btnbtndanger">Action</button>
<buttontype="button"class="btnbtndangerdropdowntoggle"datatoggle="dropdown"
ariahaspopup="true"ariaexpanded="false">
<spanclass="caret"></span>
<spanclass="sronly">ToggleDropdown</span>
</button>
<ulclass="dropdownmenu">
<li><ahref="#">Action</a></li>
<li><ahref="#">Anotheraction</a></li>
<li><ahref="#">Somethingelsehere</a></li>
<lirole="separator"class="divider"></li>
<li><ahref="#">Separatedlink</a></li>
</ul>
</div>

Sizing
Buttondropdownsworkwithbuttonsofallsizes.
EXA MPLE

Largebutton
Smallbutton
Extrasmallbutton

http://getbootstrap.com/components/

21/72

18/6/2015

ComponentsBootstrap

<!Largebuttongroup>
<divclass="btngroup">
<buttonclass="btnbtndefaultbtnlgdropdowntoggle"type="button"data
toggle="dropdown"ariahaspopup="true"ariaexpanded="false">
Largebutton<spanclass="caret"></span>
</button>
<ulclass="dropdownmenu">
...
</ul>
</div>
<!Smallbuttongroup>
<divclass="btngroup">
<buttonclass="btnbtndefaultbtnsmdropdowntoggle"type="button"data
toggle="dropdown"ariahaspopup="true"ariaexpanded="false">
Smallbutton<spanclass="caret"></span>
</button>
<ulclass="dropdownmenu">
...
</ul>
</div>
<!Extrasmallbuttongroup>
<divclass="btngroup">
<buttonclass="btnbtndefaultbtnxsdropdowntoggle"type="button"data
toggle="dropdown"ariahaspopup="true"ariaexpanded="false">
Extrasmallbutton<spanclass="caret"></span>
</button>
<ulclass="dropdownmenu">
...
</ul>
</div>

Dropupvariation
Triggerdropdownmenusaboveelementsbyadding .dropup totheparent.
EXA MPLE

Dropup

Rightdropup

http://getbootstrap.com/components/

22/72

18/6/2015

ComponentsBootstrap

<divclass="btngroupdropup">
<buttontype="button"class="btnbtndefault">Dropup</button>
<buttontype="button"class="btnbtndefaultdropdowntoggle"datatoggle="dropdown"
ariahaspopup="true"ariaexpanded="false">
<spanclass="caret"></span>
<spanclass="sronly">ToggleDropdown</span>
</button>
<ulclass="dropdownmenu">
<!Dropdownmenulinks>
</ul>
</div>

Inputgroups
Extendformcontrolsbyaddingtextorbuttonsbefore,after,oronbothsidesofanytext
based <input> .Use .inputgroup withan .inputgroupaddon toprependorappend
elementstoasingle .formcontrol .

Textual <input> sonly

Avoidusing <select> elementshereastheycannotbefullystyledinWebKitbrowsers.
Avoidusing <textarea> elementshereastheir rows attributewillnotberespectedinsome
cases.

Tooltips&popoversininputgroupsrequirespecialsetting
Whenusingtooltipsorpopoversonelementswithinan .inputgroup ,you'llhavetospecifythe
option container:'body' toavoidunwantedsideeffects(suchastheelementgrowingwider
and/orlosingitsroundedcornerswhenthetooltiporpopoveristriggered).

Don'tmixwithothercomponents
Donotmixformgroupsorgridcolumnclassesdirectlywithinputgroups.Instead,nesttheinput
groupinsideoftheformgrouporgridrelatedelement.

Alwaysaddlabels
http://getbootstrap.com/components/

23/72

18/6/2015

ComponentsBootstrap

Screenreaderswillhavetroublewithyourformsifyoudon'tincludealabelforeveryinput.For
theseinputgroups,ensurethatanyadditionallabelorfunctionalityisconveyedtoassistive
technologies.
Theexacttechniquetobeused( <label> elementshiddenusingthe .sronly class,oruseof
the arialabel , arialabelledby , ariadescribedby , title or placeholder attribute)and
whatadditionalinformationwillneedtobeconveyedwillvarydependingontheexacttypeof
interfacewidgetyou'reimplementing.Theexamplesinthissectionprovideafewsuggested,
casespecificapproaches.

Basicexample
Placeoneaddonorbuttononeithersideofaninput.Youmayalsoplaceoneonbothsidesofaninput.
Wedonotsupportmultipleaddonsonasingleside.
Wedonotsupportmultipleformcontrolsinasingleinputgroup.
EXA MPLE

Username

Recipient'susername

@example.com

.00

<divclass="inputgroup">
<spanclass="inputgroupaddon"id="basicaddon1">@</span>
<inputtype="text"class="formcontrol"placeholder="Username"aria
describedby="basicaddon1">
</div>
<divclass="inputgroup">
<inputtype="text"class="formcontrol"placeholder="Recipient'susername"aria
describedby="basicaddon2">
<spanclass="inputgroupaddon"id="basicaddon2">@example.com</span>
</div>
<divclass="inputgroup">
<spanclass="inputgroupaddon">$</span>
<inputtype="text"class="formcontrol"arialabel="Amount(tothenearestdollar)">
<spanclass="inputgroupaddon">.00</span>
</div>
http://getbootstrap.com/components/

24/72

18/6/2015

ComponentsBootstrap

Sizing
Addtherelativeformsizingclassestothe .inputgroup itselfandcontentswithinwillautomatically
resizenoneedforrepeatingtheformcontrolsizeclassesoneachelement.
EXA MPLE

Username

Username

Username

<divclass="inputgroupinputgrouplg">
<spanclass="inputgroupaddon"id="sizingaddon1">@</span>
<inputtype="text"class="formcontrol"placeholder="Username"aria
describedby="sizingaddon1">
</div>
<divclass="inputgroup">
<spanclass="inputgroupaddon"id="sizingaddon2">@</span>
<inputtype="text"class="formcontrol"placeholder="Username"aria
describedby="sizingaddon2">
</div>
<divclass="inputgroupinputgroupsm">
<spanclass="inputgroupaddon"id="sizingaddon3">@</span>
<inputtype="text"class="formcontrol"placeholder="Username"aria
describedby="sizingaddon3">
</div>

Checkboxesandradioaddons
Placeanycheckboxorradiooptionwithinaninputgroup'saddoninsteadoftext.
EXA MPLE

http://getbootstrap.com/components/

25/72

18/6/2015

ComponentsBootstrap

<divclass="row">
<divclass="collg6">
<divclass="inputgroup">
<spanclass="inputgroupaddon">
<inputtype="checkbox"arialabel="...">
</span>
<inputtype="text"class="formcontrol"arialabel="...">
</div><!/inputgroup>
</div><!/.collg6>
<divclass="collg6">
<divclass="inputgroup">
<spanclass="inputgroupaddon">
<inputtype="radio"arialabel="...">
</span>
<inputtype="text"class="formcontrol"arialabel="...">
</div><!/inputgroup>
</div><!/.collg6>
</div><!/.row>

Buttonaddons
Buttonsininputgroupsareabitdifferentandrequireoneextralevelofnesting.Insteadof .input
groupaddon ,you'llneedtouse .inputgroupbtn towrapthebuttons.Thisisrequiredduetodefault
browserstylesthatcannotbeoverridden.
EXA MPLE

Go!

Searchfor...

Searchfor...

http://getbootstrap.com/components/

Go!

26/72

18/6/2015

ComponentsBootstrap

<divclass="row">
<divclass="collg6">
<divclass="inputgroup">
<spanclass="inputgroupbtn">
<buttonclass="btnbtndefault"type="button">Go!</button>
</span>
<inputtype="text"class="formcontrol"placeholder="Searchfor...">
</div><!/inputgroup>
</div><!/.collg6>
<divclass="collg6">
<divclass="inputgroup">
<inputtype="text"class="formcontrol"placeholder="Searchfor...">
<spanclass="inputgroupbtn">
<buttonclass="btnbtndefault"type="button">Go!</button>
</span>
</div><!/inputgroup>
</div><!/.collg6>
</div><!/.row>

Buttonswithdropdowns
EXA MPLE

Action
Action

http://getbootstrap.com/components/

27/72

18/6/2015

ComponentsBootstrap

<divclass="row">
<divclass="collg6">
<divclass="inputgroup">
<divclass="inputgroupbtn">
<buttontype="button"class="btnbtndefaultdropdowntoggle"data
toggle="dropdown"ariahaspopup="true"ariaexpanded="false">Action<span
class="caret"></span></button>
<ulclass="dropdownmenu">
<li><ahref="#">Action</a></li>
<li><ahref="#">Anotheraction</a></li>
<li><ahref="#">Somethingelsehere</a></li>
<lirole="separator"class="divider"></li>
<li><ahref="#">Separatedlink</a></li>
</ul>
</div><!/btngroup>
<inputtype="text"class="formcontrol"arialabel="...">
</div><!/inputgroup>
</div><!/.collg6>
<divclass="collg6">
<divclass="inputgroup">
<inputtype="text"class="formcontrol"arialabel="...">
<divclass="inputgroupbtn">
<buttontype="button"class="btnbtndefaultdropdowntoggle"data
toggle="dropdown"ariahaspopup="true"ariaexpanded="false">Action<span
class="caret"></span></button>
<ulclass="dropdownmenudropdownmenuright">
<li><ahref="#">Action</a></li>
<li><ahref="#">Anotheraction</a></li>
<li><ahref="#">Somethingelsehere</a></li>
<lirole="separator"class="divider"></li>
<li><ahref="#">Separatedlink</a></li>
</ul>
</div><!/btngroup>
</div><!/inputgroup>
</div><!/.collg6>
</div><!/.row>

Segmentedbuttons

Action

http://getbootstrap.com/components/

Action

EXA MPLE

28/72

18/6/2015

ComponentsBootstrap

<divclass="inputgroup">
<divclass="inputgroupbtn">
<!Buttonanddropdownmenu>
</div>
<inputtype="text"class="formcontrol"arialabel="...">
</div>
<divclass="inputgroup">
<inputtype="text"class="formcontrol"arialabel="...">
<divclass="inputgroupbtn">
<!Buttonanddropdownmenu>
</div>
</div>

Navs
NavsavailableinBootstraphavesharedmarkup,startingwiththebase .nav class,aswell
assharedstates.Swapmodifierclassestoswitchbetweeneachstyle.

UsingnavsfortabpanelsrequiresJavaScripttabsplugin
Fortabswithtabbableareas,youmustusethetabsJavaScriptplugin(../javascript/#tabs).The
markupwillalsorequireadditional role andARIAattributesseetheplugin'sexamplemarkup
(../javascript/#tabsusage)forfurtherdetails.

Makenavsusedasnavigationaccessible
Ifyouareusingnavstoprovideanavigationbar,besuretoadda role="navigation" tothe
mostlogicalparentcontainerofthe <ul> ,orwrapa <nav> elementaroundthewhole
navigation.Donotaddtheroletothe <ul> itself,asthiswouldpreventitfrombeingannounced
asanactuallistbyassistivetechnologies.

Tabs
Notethe .navtabs classrequiresthe .nav baseclass.
EXA MPLE

http://getbootstrap.com/components/

29/72

18/6/2015

Home

ComponentsBootstrap

Profile

Messages

<ulclass="navnavtabs">
<lirole="presentation"class="active"><ahref="#">Home</a></li>
<lirole="presentation"><ahref="#">Profile</a></li>
<lirole="presentation"><ahref="#">Messages</a></li>
</ul>

Pills
TakethatsameHTML,butuse .navpills instead:
EXA MPLE

Home

Profile

Messages

<ulclass="navnavpills">
<lirole="presentation"class="active"><ahref="#">Home</a></li>
<lirole="presentation"><ahref="#">Profile</a></li>
<lirole="presentation"><ahref="#">Messages</a></li>
</ul>

Pillsarealsoverticallystackable.Justadd .navstacked .
EXA MPLE

Home
Profile
Messages

<ulclass="navnavpillsnavstacked">
...
</ul>

Justified
Easilymaketabsorpillsequalwidthsoftheirparentatscreenswiderthan768pxwith .navjustified .
Onsmallerscreens,thenavlinksarestacked.
Justifiednavbarnavlinksarecurrentlynotsupported.
http://getbootstrap.com/components/

30/72

18/6/2015

ComponentsBootstrap

Safariandresponsivejustifiednavs
Asofv8.0,Safariexhibitsabuginwhichresizingyourbrowserhorizontallycausesrendering
errorsinthejustifiednavthatarecleareduponrefreshing.Thisbugisalsoshowninthejustified
navexample(../examples/justifiednav/).

EXA MPLE

Home
Profile
Messages

Home
Profile
Messages

<ulclass="navnavtabsnavjustified">
...
</ul>
<ulclass="navnavpillsnavjustified">
...
</ul>

Disabledlinks
Foranynavcomponent(tabsorpills),add .disabled forgraylinksandnohovereffects.

Linkfunctionalitynotimpacted
Thisclasswillonlychangethe <a> 'sappearance,notitsfunctionality.UsecustomJavaScriptto
disablelinkshere.

EXA MPLE

http://getbootstrap.com/components/

31/72

18/6/2015

ComponentsBootstrap

Clickablelink

Clickablelink

Disabledlink

<ulclass="navnavpills">
...
<lirole="presentation"class="disabled"><ahref="#">Disabledlink</a></li>
...
</ul>

Usingdropdowns
AdddropdownmenuswithalittleextraHTMLandthedropdownsJavaScriptplugin
(../javascript/#dropdowns).

Tabswithdropdowns
EXA MPLE

Home

Help

Dropdown

<ulclass="navnavtabs">
...
<lirole="presentation"class="dropdown">
<aclass="dropdowntoggle"datatoggle="dropdown"href="#"role="button"aria
haspopup="true"ariaexpanded="false">
Dropdown<spanclass="caret"></span>
</a>
<ulclass="dropdownmenu">
...
</ul>
</li>
...
</ul>

Pillswithdropdowns
EXA MPLE

Home

Help

http://getbootstrap.com/components/

Dropdown

32/72

18/6/2015

ComponentsBootstrap

<ulclass="navnavpills">
...
<lirole="presentation"class="dropdown">
<aclass="dropdowntoggle"datatoggle="dropdown"href="#"role="button"aria
haspopup="true"ariaexpanded="false">
Dropdown<spanclass="caret"></span>
</a>
<ulclass="dropdownmenu">
...
</ul>
</li>
...
</ul>

Navbar
Defaultnavbar
Navbarsareresponsivemetacomponentsthatserveasnavigationheadersforyourapplicationorsite.
Theybegincollapsed(andaretoggleable)inmobileviewsandbecomehorizontalastheavailable
viewportwidthincreases.
Justifiednavbarnavlinksarecurrentlynotsupported.

Overflowingcontent
SinceBootstrapdoesn'tknowhowmuchspacethecontentinyournavbarneeds,youmightrun
intoissueswithcontentwrappingintoasecondrow.Toresolvethis,youcan:
a. Reducetheamountorwidthofnavbaritems.
b. Hidecertainnavbaritemsatcertainscreensizesusingresponsiveutilityclasses
(../css/#responsiveutilities).
c. Changethepointatwhichyournavbarswitchesbetweencollapsedandhorizontalmode.
Customizethe @gridfloatbreakpoint variableoraddyourownmediaquery.

RequiresJavaScriptplugin
IfJavaScriptisdisabledandtheviewportisnarrowenoughthatthenavbarcollapses,itwillbe
impossibletoexpandthenavbarandviewthecontentwithinthe .navbarcollapse .

http://getbootstrap.com/components/

33/72

18/6/2015

ComponentsBootstrap

Theresponsivenavbarrequiresthecollapseplugin(../javascript/#collapse)tobeincludedinyour
versionofBootstrap.

Changingthecollapsedmobilenavbarbreakpoint
Thenavbarcollapsesintoitsverticalmobileviewwhentheviewportisnarrowerthan @grid
floatbreakpoint ,andexpandsintoitshorizontalnonmobileviewwhentheviewportisatleast
@gridfloatbreakpoint inwidth.AdjustthisvariableintheLesssourcetocontrolwhenthe
navbarcollapses/expands.Thedefaultvalueis 768px (thesmallest"small"or"tablet"screen).

Makenavbarsaccessible
Besuretousea <nav> elementor,ifusingamoregenericelementsuchasa <div> ,adda
role="navigation" toeverynavbartoexplicitlyidentifyitasalandmarkregionforusersof
assistivetechnologies.

EXA MPLE

<navclass="navbarnavbardefault">
<divclass="containerfluid">
<!Brandandtogglegetgroupedforbettermobiledisplay>
<divclass="navbarheader">
<buttontype="button"class="navbartogglecollapsed"datatoggle="collapse"
datatarget="#bsexamplenavbarcollapse1"ariaexpanded="false">
<spanclass="sronly">Togglenavigation</span>
<spanclass="iconbar"></span>
<spanclass="iconbar"></span>
<spanclass="iconbar"></span>
</button>
<aclass="navbarbrand"href="#">Brand</a>
</div>
<!Collectthenavlinks,forms,andothercontentfortoggling>
<divclass="collapsenavbarcollapse"id="bsexamplenavbarcollapse1">
<ulclass="navnavbarnav">
<liclass="active"><ahref="#">Link<spanclass="sronly">(current)</span></a>
</li>
<li><ahref="#">Link</a></li>
<liclass="dropdown">
<ahref="#"class="dropdowntoggle"datatoggle="dropdown"role="button"
ariahaspopup="true"ariaexpanded="false">Dropdown<spanclass="caret"></span></a>
<ulclass="dropdownmenu">
<li><ahref="#">Action</a></li>
<li><ahref="#">Anotheraction</a></li>
http://getbootstrap.com/components/

34/72

18/6/2015

ComponentsBootstrap

<li><ahref="#">Anotheraction</a></li>
<li><ahref="#">Somethingelsehere</a></li>
<lirole="separator"class="divider"></li>
<li><ahref="#">Separatedlink</a></li>
<lirole="separator"class="divider"></li>
<li><ahref="#">Onemoreseparatedlink</a></li>
</ul>
</li>
</ul>
<formclass="navbarformnavbarleft"role="search">
<divclass="formgroup">
<inputtype="text"class="formcontrol"placeholder="Search">
</div>
<buttontype="submit"class="btnbtndefault">Submit</button>
</form>
<ulclass="navnavbarnavnavbarright">
<li><ahref="#">Link</a></li>
<liclass="dropdown">
<ahref="#"class="dropdowntoggle"datatoggle="dropdown"role="button"
ariahaspopup="true"ariaexpanded="false">Dropdown<spanclass="caret"></span></a>
<ulclass="dropdownmenu">
<li><ahref="#">Action</a></li>
<li><ahref="#">Anotheraction</a></li>
<li><ahref="#">Somethingelsehere</a></li>
<lirole="separator"class="divider"></li>
<li><ahref="#">Separatedlink</a></li>
</ul>
</li>
</ul>
</div><!/.navbarcollapse>
</div><!/.containerfluid>
</nav>

Brandimage
Replacethenavbarbrandwithyourownimagebyswappingthetextforan <img> .Sincethe .navbar
brand hasitsownpaddingandheight,youmayneedtooverridesomeCSSdependingonyourimage.
EXA MPLE

http://getbootstrap.com/components/

35/72

18/6/2015

ComponentsBootstrap

<navclass="navbarnavbardefault">
<divclass="containerfluid">
<divclass="navbarheader">
<aclass="navbarbrand"href="#">
<imgalt="Brand"src="...">
</a>
</div>
</div>
</nav>

Forms
Placeformcontentwithin .navbarform forproperverticalalignmentandcollapsedbehaviorinnarrow
viewports.Usethealignmentoptionstodecidewhereitresideswithinthenavbarcontent.
Asaheadsup, .navbarform sharesmuchofitscodewith .forminline viamixin.Someform
controls,likeinputgroups,mayrequirefixedwidthstobeshowupproperlywithinanavbar.
EXA MPLE

<formclass="navbarformnavbarleft"role="search">
<divclass="formgroup">
<inputtype="text"class="formcontrol"placeholder="Search">
</div>
<buttontype="submit"class="btnbtndefault">Submit</button>
</form>

Mobiledevicecaveats
Therearesomecaveatsregardingusingformcontrolswithinfixedelementsonmobiledevices.
Seeourbrowsersupportdocs(../gettingstarted/#supportfixedpositionkeyboards)fordetails.

Alwaysaddlabels
Screenreaderswillhavetroublewithyourformsifyoudon'tincludealabelforeveryinput.For
theseinlineforms,youcanhidethelabelsusingthe .sronly class.Therearefurther
alternativemethodsofprovidingalabelforassistivetechnologies,suchasthe arialabel ,
arialabelledby or title attribute.Ifnoneoftheseispresent,screenreadersmayresortto
usingthe placeholder attribute,ifpresent,butnotethatuseof placeholder asareplacement
forotherlabellingmethodsisnotadvised.

Buttons
http://getbootstrap.com/components/

36/72

18/6/2015

ComponentsBootstrap

Addthe .navbarbtn classto <button> elementsnotresidingina <form> toverticallycenterthemin

thenavbar.
EXA MPLE

<buttontype="button"class="btnbtndefaultnavbarbtn">Signin</button>

Contextspecificusage
Likethestandardbuttonclasses(../css/#buttons), .navbarbtn canbeusedon <a> and
<input> elements.However,neither .navbarbtn northestandardbuttonclassesshouldbe
usedon <a> elementswithin .navbarnav .

Text
Wrapstringsoftextinanelementwith .navbartext ,usuallyona <p> tagforproperleadingandcolor.
EXA MPLE

<pclass="navbartext">SignedinasMarkOtto</p>

Nonnavlinks
Forfolksusingstandardlinksthatarenotwithintheregularnavbarnavigationcomponent,usethe
.navbarlink classtoaddthepropercolorsforthedefaultandinversenavbaroptions.
EXA MPLE

<pclass="navbartextnavbarright">Signedinas<ahref="#"class="navbarlink">Mark
Otto</a></p>

Componentalignment
Alignnavlinks,forms,buttons,ortext,usingthe .navbarleft or .navbarright utilityclasses.Both
classeswilladdaCSSfloatinthespecifieddirection.Forexample,toalignnavlinks,putthemina
separate <ul> withtherespectiveutilityclassapplied.
Theseclassesaremixinedversionsof .pullleft and .pullright ,butthey'rescopedtomedia
queriesforeasierhandlingofnavbarcomponentsacrossdevicesizes.
http://getbootstrap.com/components/

37/72

18/6/2015

ComponentsBootstrap

Rightaligningmultiplecomponents
Navbarscurrentlyhavealimitationwithmultiple .navbarright classes.Toproperlyspace
content,weusenegativemarginonthelast .navbarright element.Whentherearemultiple
elementsusingthatclass,thesemarginsdon'tworkasintended.
We'llrevisitthiswhenwecanrewritethatcomponentinv4.

Fixedtotop
Add .navbarfixedtop andincludea .container or .containerfluid tocenterandpadnavbar
content.
EXA MPLE

<navclass="navbarnavbardefaultnavbarfixedtop">
<divclass="container">
...
</div>
</nav>

Bodypaddingrequired
Thefixednavbarwilloverlayyourothercontent,unlessyouadd padding tothetopofthe
<body> .Tryoutyourownvaluesoruseoursnippetbelow.Tip:Bydefault,thenavbaris50px
high.
body{paddingtop:70px;}

MakesuretoincludethisafterthecoreBootstrapCSS.

Fixedtobottom
Add .navbarfixedbottom andincludea .container or .containerfluid tocenterandpadnavbar
content.
EXA MPLE

<navclass="navbarnavbardefaultnavbarfixedbottom">
<divclass="container">
...
</div>
</nav>
http://getbootstrap.com/components/

38/72

18/6/2015

ComponentsBootstrap

Bodypaddingrequired
Thefixednavbarwilloverlayyourothercontent,unlessyouadd padding tothebottomofthe
<body> .Tryoutyourownvaluesoruseoursnippetbelow.Tip:Bydefault,thenavbaris50px
high.
body{paddingbottom:70px;}

MakesuretoincludethisafterthecoreBootstrapCSS.

Statictop
Createafullwidthnavbarthatscrollsawaywiththepagebyadding .navbarstatictop andincludea
.container or .containerfluid tocenterandpadnavbarcontent.
Unlikethe .navbarfixed* classes,youdonotneedtochangeanypaddingonthe body .
EXA MPLE

<navclass="navbarnavbardefaultnavbarstatictop">
<divclass="container">
...
</div>
</nav>

Invertednavbar
Modifythelookofthenavbarbyadding .navbarinverse .
EXA MPLE

<navclass="navbarnavbarinverse">
...
</nav>

Breadcrumbs
Indicatethecurrentpage'slocationwithinanavigationalhierarchy.
http://getbootstrap.com/components/

39/72

18/6/2015

ComponentsBootstrap

SeparatorsareautomaticallyaddedinCSSthrough :before and content .

EXA MPLE

Home

Home / Library

Home / Library / Data

<olclass="breadcrumb">
<li><ahref="#">Home</a></li>
<li><ahref="#">Library</a></li>
<liclass="active">Data</li>
</ol>

Pagination
Providepaginationlinksforyoursiteorappwiththemultipagepaginationcomponent,orthe
simplerpageralternative.

Defaultpagination
SimplepaginationinspiredbyRdio,greatforappsandsearchresults.Thelargeblockishardtomiss,
easilyscalable,andprovideslargeclickareas.
EXA MPLE

http://getbootstrap.com/components/

40/72

18/6/2015

ComponentsBootstrap

<nav>
<ulclass="pagination">
<li>
<ahref="#"arialabel="Previous">
<spanariahidden="true">&laquo;</span>
</a>
</li>
<li><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
<li><ahref="#">3</a></li>
<li><ahref="#">4</a></li>
<li><ahref="#">5</a></li>
<li>
<ahref="#"arialabel="Next">
<spanariahidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

Disabledandactivestates
Linksarecustomizablefordifferentcircumstances.Use .disabled forunclickablelinksand .active to
indicatethecurrentpage.
EXA MPLE

<nav>
<ulclass="pagination">
<liclass="disabled"><ahref="#"arialabel="Previous"><spanaria
hidden="true">&laquo;</span></a></li>
<liclass="active"><ahref="#">1<spanclass="sronly">(current)</span></a></li>
...
</ul>
</nav>

Youcanoptionallyswapoutactiveordisabledanchorsfor <span> ,oromittheanchorinthecaseofthe

previous/nextarrows,toremoveclickfunctionalitywhileretainingintendedstyles.

http://getbootstrap.com/components/

41/72

18/6/2015

ComponentsBootstrap

<nav>
<ulclass="pagination">
<liclass="disabled">
<span>
<spanariahidden="true">&laquo;</span>
</span>
</li>
<liclass="active">
<span>1<spanclass="sronly">(current)</span></span>
</li>
...
</ul>
</nav>

Sizing
Fancylargerorsmallerpagination?Add .paginationlg or .paginationsm foradditionalsizes.
EXA MPLE

<nav><ulclass="paginationpaginationlg">...</ul></nav>
<nav><ulclass="pagination">...</ul></nav>
<nav><ulclass="paginationpaginationsm">...</ul></nav>

Pager
Quickpreviousandnextlinksforsimplepaginationimplementationswithlightmarkupandstyles.It's
greatforsimplesiteslikeblogsormagazines.

Defaultexample
Bydefault,thepagercenterslinks.
EXA MPLE

http://getbootstrap.com/components/

42/72

18/6/2015

ComponentsBootstrap

Previous

Next

<nav>
<ulclass="pager">
<li><ahref="#">Previous</a></li>
<li><ahref="#">Next</a></li>
</ul>
</nav>

Alignedlinks
Alternatively,youcanaligneachlinktothesides:
EXA MPLE

Older

Newer

<nav>
<ulclass="pager">
<liclass="previous"><ahref="#"><spanariahidden="true">&larr;</span>Older</a>
</li>
<liclass="next"><ahref="#">Newer<spanariahidden="true">&rarr;</span></a></li>
</ul>
</nav>

Optionaldisabledstate
Pagerlinksalsousethegeneral .disabled utilityclassfromthepagination.
EXA MPLE

Older

Newer

<nav>
<ulclass="pager">
<liclass="previousdisabled"><ahref="#"><spanariahidden="true">&larr;</span>
Older</a></li>
<liclass="next"><ahref="#">Newer<spanariahidden="true">&rarr;</span></a></li>
</ul>
</nav>
http://getbootstrap.com/components/

43/72

18/6/2015

ComponentsBootstrap

Labels
Example
EXA MPLE

Exampleheading
Exampleheading
Exampleheading
Exampleheading
Exampleheading
Exampleheading

New

New

New

New

New

New

<h3>Exampleheading<spanclass="labellabeldefault">New</span></h3>

Availablevariations
Addanyofthebelowmentionedmodifierclassestochangetheappearanceofalabel.
EXA MPLE
Default

Primary

Success

Info

Warning

Danger

<spanclass="labellabeldefault">Default</span>
<spanclass="labellabelprimary">Primary</span>
<spanclass="labellabelsuccess">Success</span>
<spanclass="labellabelinfo">Info</span>
<spanclass="labellabelwarning">Warning</span>
<spanclass="labellabeldanger">Danger</span>

Havetonsoflabels?
http://getbootstrap.com/components/

44/72

18/6/2015

ComponentsBootstrap

Renderingproblemscanarisewhenyouhavedozensofinlinelabelswithinanarrowcontainer,
eachcontainingitsown inlineblock element(likeanicon).Thewayaroundthisissetting
display:inlineblock; .Forcontextandanexample,see#13219
(https://github.com/twbs/bootstrap/issues/13219).

Badges
Easilyhighlightneworunreaditemsbyaddinga <spanclass="badge"> tolinks,Bootstrap
navs,andmore.
EXA MPLE

Inbox 42

Messages 4

<ahref="#">Inbox<spanclass="badge">42</span></a>
<buttonclass="btnbtnprimary"type="button">
Messages<spanclass="badge">4</span>
</button>

Selfcollapsing
Whentherearenoneworunreaditems,badgeswillsimplycollapse(viaCSS's :empty selector)
providednocontentexistswithin.

Crossbrowsercompatibility
Badgeswon'tselfcollapseinInternetExplorer8becauseitlackssupportforthe :empty
selector.

Adaptstoactivenavstates
Builtinstylesareincludedforplacingbadgesinactivestatesinpillnavigations.
EXA MPLE

http://getbootstrap.com/components/

45/72

18/6/2015

Home 42

ComponentsBootstrap

Profile

Messages 3

<ulclass="navnavpills"role="tablist">
<lirole="presentation"class="active"><ahref="#">Home<span
class="badge">42</span></a></li>
<lirole="presentation"><ahref="#">Profile</a></li>
<lirole="presentation"><ahref="#">Messages<spanclass="badge">3</span></a></li>
</ul>

Jumbotron
Alightweight,flexiblecomponentthatcanoptionallyextendtheentireviewporttoshowcasekeycontent
onyoursite.
EXA MPLE

Hello,world!
Thisisasimpleherounit,asimplejumbotronstylecomponentfor
callingextraattentiontofeaturedcontentorinformation.
Learnmore

<divclass="jumbotron">
<h1>Hello,world!</h1>
<p>...</p>
<p><aclass="btnbtnprimarybtnlg"href="#"role="button">Learnmore</a></p>
</div>

Tomakethejumbotronfullwidth,andwithoutroundedcorners,placeitoutsideall .container sand

insteadadda .container within.

http://getbootstrap.com/components/

46/72

18/6/2015

ComponentsBootstrap

<divclass="jumbotron">
<divclass="container">
...
</div>
</div>

Pageheader
Asimpleshellforan h1 toappropriatelyspaceoutandsegmentsectionsofcontentonapage.Itcan
utilizethe h1 'sdefault small element,aswellasmostothercomponents(withadditionalstyles).
EXA MPLE

ExamplepageheaderSubtextforheader
<divclass="pageheader">
<h1>Examplepageheader<small>Subtextforheader</small></h1>
</div>

Thumbnails
ExtendBootstrap'sgridsystem(../css/#grid)withthethumbnailcomponenttoeasilydisplay
gridsofimages,videos,text,andmore.
Ifyou'relookingforPinterestlikepresentationofthumbnailsofvaryingheightsand/orwidths,you'llneed
touseathirdpartypluginsuchasMasonry(http://masonry.desandro.com),Isotope
(http://isotope.metafizzy.co),orSalvattore(http://salvattore.com).

Defaultexample
http://getbootstrap.com/components/

47/72

18/6/2015

ComponentsBootstrap

Bydefault,Bootstrap'sthumbnailsaredesignedtoshowcaselinkedimageswithminimalrequired
markup.
EXA MPLE

171x180

171x180

171x180

171x180

<divclass="row">
<divclass="colxs6colmd3">
<ahref="#"class="thumbnail">
<imgsrc="..."alt="...">
</a>
</div>
...
</div>

Customcontent
Withabitofextramarkup,it'spossibletoaddanykindofHTMLcontentlikeheadings,paragraphs,or
buttonsintothumbnails.
EXA MPLE

http://getbootstrap.com/components/

48/72

18/6/2015

ComponentsBootstrap

242x200

Thumbnaillabel
Crasjustoodio,dapibusacfacilisisin,egestasegetquam.Donecidelitnonmiportagravidaateget
metus.Nullamiddoloridnibhultriciesvehiculautidelit.
Button Button

242x200

Thumbnaillabel
Crasjustoodio,dapibusacfacilisisin,egestasegetquam.Donecidelitnonmiportagravidaateget
metus.Nullamiddoloridnibhultriciesvehiculautidelit.
Button Button

http://getbootstrap.com/components/

49/72

18/6/2015

ComponentsBootstrap

242x200

Thumbnaillabel
Crasjustoodio,dapibusacfacilisisin,egestasegetquam.Donecidelitnonmiportagravidaateget
metus.Nullamiddoloridnibhultriciesvehiculautidelit.
Button Button

<divclass="row">
<divclass="colsm6colmd4">
<divclass="thumbnail">
<imgsrc="..."alt="...">
<divclass="caption">
<h3>Thumbnaillabel</h3>
<p>...</p>
<p><ahref="#"class="btnbtnprimary"role="button">Button</a><ahref="#"
class="btnbtndefault"role="button">Button</a></p>
</div>
</div>
</div>
</div>

Alerts
Providecontextualfeedbackmessagesfortypicaluseractionswiththehandfulofavailable
andflexiblealertmessages.

Examples
http://getbootstrap.com/components/

50/72

18/6/2015

ComponentsBootstrap

Wrapanytextandanoptionaldismissbuttonin .alert andoneofthefourcontextualclasses(e.g.,

.alertsuccess )forbasicalertmessages.

Nodefaultclass
Alertsdon'thavedefaultclasses,onlybaseandmodifierclasses.Adefaultgrayalertdoesn't
maketoomuchsense,soyou'rerequiredtospecifyatypeviacontextualclass.Choosefrom
success,info,warning,ordanger.

EXA MPLE

Welldone!Yousuccessfullyreadthisimportantalertmessage.

Headsup!Thisalertneedsyourattention,butit'snotsuperimportant.

Warning!Bettercheckyourself,you'renotlookingtoogood.

Ohsnap!Changeafewthingsupandtrysubmittingagain.

<divclass="alertalertsuccess"role="alert">...</div>
<divclass="alertalertinfo"role="alert">...</div>
<divclass="alertalertwarning"role="alert">...</div>
<divclass="alertalertdanger"role="alert">...</div>

Dismissiblealerts
Buildonanyalertbyaddinganoptional .alertdismissible andclosebutton.

RequiresJavaScriptalertplugin
Forfullyfunctioning,dismissiblealerts,youmustusethealertsJavaScriptplugin
(../javascript/#alerts).

EXA MPLE

http://getbootstrap.com/components/

51/72

18/6/2015

ComponentsBootstrap

Warning!Bettercheckyourself,you'renotlookingtoogood.

<divclass="alertalertwarningalertdismissible"role="alert">
<buttontype="button"class="close"datadismiss="alert"arialabel="Close"><span
ariahidden="true">&times;</span></button>
<strong>Warning!</strong>Bettercheckyourself,you'renotlookingtoogood.
</div>

Ensureproperbehavioracrossalldevices
Besuretousethe <button> elementwiththe datadismiss="alert" dataattribute.

Linksinalerts
Usethe .alertlink utilityclasstoquicklyprovidematchingcoloredlinkswithinanyalert.
EXA MPLE

Welldone!Yousuccessfullyreadthisimportantalertmessage.

Headsup!Thisalertneedsyourattention,butit'snotsuperimportant.

Warning!Bettercheckyourself,you'renotlookingtoogood.

Ohsnap!Changeafewthingsupandtrysubmittingagain.

<divclass="alertalertsuccess"role="alert">
<ahref="#"class="alertlink">...</a>
</div>
<divclass="alertalertinfo"role="alert">
<ahref="#"class="alertlink">...</a>
</div>
<divclass="alertalertwarning"role="alert">
<ahref="#"class="alertlink">...</a>
</div>
<divclass="alertalertdanger"role="alert">
<ahref="#"class="alertlink">...</a>
</div>
http://getbootstrap.com/components/

52/72

18/6/2015

ComponentsBootstrap

Progressbars
Provideuptodatefeedbackontheprogressofaworkfloworactionwithsimpleyetflexible
progressbars.

Crossbrowsercompatibility
ProgressbarsuseCSS3transitionsandanimationstoachievesomeoftheireffects.These
featuresarenotsupportedinInternetExplorer9andbeloworolderversionsofFirefox.Opera12
doesnotsupportanimations.

Basicexample
Defaultprogressbar.
EXA MPLE

<divclass="progress">
<divclass="progressbar"role="progressbar"ariavaluenow="60"ariavaluemin="0"
ariavaluemax="100"style="width:60%;">
<spanclass="sronly">60%Complete</span>
</div>
</div>

Withlabel
Removethe <span> with .sronly classfromwithintheprogressbartoshowavisiblepercentage.
EXA MPLE
60%

http://getbootstrap.com/components/

53/72

18/6/2015

ComponentsBootstrap

<divclass="progress">
<divclass="progressbar"role="progressbar"ariavaluenow="60"ariavaluemin="0"
ariavaluemax="100"style="width:60%;">
60%
</div>
</div>

Toensurethatthelabeltextremainslegibleevenforlowpercentages,consideraddinga minwidth to
theprogressbar.
EXA MPLE
0%
2%

<divclass="progress">
<divclass="progressbar"role="progressbar"ariavaluenow="0"ariavaluemin="0"
ariavaluemax="100"style="minwidth:2em;">
0%
</div>
</div>
<divclass="progress">
<divclass="progressbar"role="progressbar"ariavaluenow="2"ariavaluemin="0"
ariavaluemax="100"style="minwidth:2em;width:2%;">
2%
</div>
</div>

Contextualalternatives
Progressbarsusesomeofthesamebuttonandalertclassesforconsistentstyles.
EXA MPLE

http://getbootstrap.com/components/

54/72

18/6/2015

ComponentsBootstrap

<divclass="progress">
<divclass="progressbarprogressbarsuccess"role="progressbar"ariavaluenow="40"
ariavaluemin="0"ariavaluemax="100"style="width:40%">
<spanclass="sronly">40%Complete(success)</span>
</div>
</div>
<divclass="progress">
<divclass="progressbarprogressbarinfo"role="progressbar"ariavaluenow="20"
ariavaluemin="0"ariavaluemax="100"style="width:20%">
<spanclass="sronly">20%Complete</span>
</div>
</div>
<divclass="progress">
<divclass="progressbarprogressbarwarning"role="progressbar"ariavaluenow="60"
ariavaluemin="0"ariavaluemax="100"style="width:60%">
<spanclass="sronly">60%Complete(warning)</span>
</div>
</div>
<divclass="progress">
<divclass="progressbarprogressbardanger"role="progressbar"ariavaluenow="80"
ariavaluemin="0"ariavaluemax="100"style="width:80%">
<spanclass="sronly">80%Complete(danger)</span>
</div>
</div>

Striped
Usesagradienttocreateastripedeffect.NotavailableinIE9andbelow.
EXA MPLE

http://getbootstrap.com/components/

55/72

18/6/2015

ComponentsBootstrap

<divclass="progress">
<divclass="progressbarprogressbarsuccessprogressbarstriped"
role="progressbar"ariavaluenow="40"ariavaluemin="0"ariavaluemax="100"
style="width:40%">
<spanclass="sronly">40%Complete(success)</span>
</div>
</div>
<divclass="progress">
<divclass="progressbarprogressbarinfoprogressbarstriped"role="progressbar"
ariavaluenow="20"ariavaluemin="0"ariavaluemax="100"style="width:20%">
<spanclass="sronly">20%Complete</span>
</div>
</div>
<divclass="progress">
<divclass="progressbarprogressbarwarningprogressbarstriped"
role="progressbar"ariavaluenow="60"ariavaluemin="0"ariavaluemax="100"
style="width:60%">
<spanclass="sronly">60%Complete(warning)</span>
</div>
</div>
<divclass="progress">
<divclass="progressbarprogressbardangerprogressbarstriped"
role="progressbar"ariavaluenow="80"ariavaluemin="0"ariavaluemax="100"
style="width:80%">
<spanclass="sronly">80%Complete(danger)</span>
</div>
</div>

Animated
Add .active to .progressbarstriped toanimatethestripesrighttoleft.NotavailableinIE9and
below.
EXA MPLE

Toggleanimation

<divclass="progress">
<divclass="progressbarprogressbarstripedactive"role="progressbar"aria
valuenow="45"ariavaluemin="0"ariavaluemax="100"style="width:45%">
<spanclass="sronly">45%Complete</span>
</div>
</div>

http://getbootstrap.com/components/

56/72

18/6/2015

ComponentsBootstrap

Stacked
Placemultiplebarsintothesame .progress tostackthem.
EXA MPLE

<divclass="progress">
<divclass="progressbarprogressbarsuccess"style="width:35%">
<spanclass="sronly">35%Complete(success)</span>
</div>
<divclass="progressbarprogressbarwarningprogressbarstriped"style="width:
20%">
<spanclass="sronly">20%Complete(warning)</span>
</div>
<divclass="progressbarprogressbardanger"style="width:10%">
<spanclass="sronly">10%Complete(danger)</span>
</div>
</div>

Mediaobject
Abstractobjectstylesforbuildingvarioustypesofcomponents(likeblogcomments,Tweets,
etc)thatfeaturealeftorrightalignedimagealongsidetextualcontent.

Defaultmedia
Thedefaultmediadisplaysamediaobject(images,video,audio)totheleftorrightofacontentblock.
EXA MPLE

Mediaheading
Crassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Cras
purusodio,vestibuluminvulputateat,tempusviverraturpis.Fuscecondimentumnuncacnisi
vulputatefringilla.Doneclaciniaconguefelisinfaucibus.

Mediaheading
Crassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Cras
purusodio,vestibuluminvulputateat,tempusviverraturpis.Fuscecondimentumnuncacnisi
vulputatefringilla.Doneclaciniaconguefelisinfaucibus.
http://getbootstrap.com/components/

57/72

18/6/2015

ComponentsBootstrap

Nestedmediaheading
Crassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.
Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.Fuscecondimentumnuncacnisi
vulputatefringilla.Doneclaciniaconguefelisinfaucibus.

Mediaheading
Crassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Cras
purusodio,vestibuluminvulputateat,tempusviverraturpis.

Mediaheading
Crassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.
Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.
<divclass="media">
<divclass="medialeft">
<ahref="#">
<imgclass="mediaobject"src="..."alt="...">
</a>
</div>
<divclass="mediabody">
<h4class="mediaheading">Mediaheading</h4>
...
</div>
</div>

Theclasses .pullleft and .pullright alsoexistandwerepreviouslyusedaspartofthemedia

component,butaredeprecatedforthatuseasofv3.3.0.Theyareapproximatelyequivalentto .media
left and .mediaright ,exceptthat .mediaright shouldbeplacedafterthe .mediabody inthehtml.

Mediaalignment
Theimagesorothermediacanbealignedtop,middle,orbottom.Thedefaultistopaligned.
EXA MPLE

Topalignedmedia
Crassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Cras
purusodio,vestibuluminvulputateat,tempusviverraturpis.Fuscecondimentumnuncacnisi
vulputatefringilla.Doneclaciniaconguefelisinfaucibus.
Donecsedodiodui.Nullamquisrisusegeturnamollisornareveleuleo.Cumsociisnatoquepenatibus
etmagnisdisparturientmontes,nasceturridiculusmus.

Middlealignedmedia

http://getbootstrap.com/components/

58/72

18/6/2015

ComponentsBootstrap

Crassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Cras
purusodio,vestibuluminvulputateat,tempusviverraturpis.Fuscecondimentumnuncacnisi
vulputatefringilla.Doneclaciniaconguefelisinfaucibus.
Donecsedodiodui.Nullamquisrisusegeturnamollisornareveleuleo.Cumsociisnatoquepenatibus
etmagnisdisparturientmontes,nasceturridiculusmus.

Bottomalignedmedia
Crassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Cras
purusodio,vestibuluminvulputateat,tempusviverraturpis.Fuscecondimentumnuncacnisi
vulputatefringilla.Doneclaciniaconguefelisinfaucibus.
Donecsedodiodui.Nullamquisrisusegeturnamollisornareveleuleo.Cumsociisnatoquepenatibus
etmagnisdisparturientmontes,nasceturridiculusmus.

<divclass="media">
<divclass="medialeftmediamiddle">
<ahref="#">
<imgclass="mediaobject"src="..."alt="...">
</a>
</div>
<divclass="mediabody">
<h4class="mediaheading">Middlealignedmedia</h4>
...
</div>
</div>

Medialist
Withabitofextramarkup,youcanusemediainsidelist(usefulforcommentthreadsorarticleslists).
EXA MPLE

Mediaheading
Crassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Cras
purusodio,vestibuluminvulputateat,tempusviverraturpis.

Nestedmediaheading
Crassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.
Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.

Nestedmediaheading
Crassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.
Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.

Nestedmediaheading
http://getbootstrap.com/components/

59/72

18/6/2015

ComponentsBootstrap

Crassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.
Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.

<ulclass="medialist">
<liclass="media">
<divclass="medialeft">
<ahref="#">
<imgclass="mediaobject"src="..."alt="...">
</a>
</div>
<divclass="mediabody">
<h4class="mediaheading">Mediaheading</h4>
...
</div>
</li>
</ul>

Listgroup
Listgroupsareaflexibleandpowerfulcomponentfordisplayingnotonlysimplelistsof
elements,butcomplexoneswithcustomcontent.

Basicexample
Themostbasiclistgroupissimplyanunorderedlistwithlistitems,andtheproperclasses.Builduponit
withtheoptionsthatfollow,oryourownCSSasneeded.
EXA MPLE

Crasjustoodio
Dapibusacfacilisisin
Morbileorisus
Portaacconsecteturac
Vestibulumateros

http://getbootstrap.com/components/

60/72

18/6/2015

ComponentsBootstrap

<ulclass="listgroup">
<liclass="listgroupitem">Crasjustoodio</li>
<liclass="listgroupitem">Dapibusacfacilisisin</li>
<liclass="listgroupitem">Morbileorisus</li>
<liclass="listgroupitem">Portaacconsecteturac</li>
<liclass="listgroupitem">Vestibulumateros</li>
</ul>

Badges
Addthebadgescomponenttoanylistgroupitemanditwillautomaticallybepositionedontheright.
EXA MPLE

Crasjustoodio

14

Dapibusacfacilisisin

Morbileorisus

<ulclass="listgroup">
<liclass="listgroupitem">
<spanclass="badge">14</span>
Crasjustoodio
</li>
</ul>

Linkeditems
Linkifylistgroupitemsbyusinganchortagsinsteadoflistitems(thatalsomeansaparent <div>
insteadofan <ul> ).Noneedforindividualparentsaroundeachelement.
EXA MPLE

Crasjustoodio
Dapibusacfacilisisin
Morbileorisus
Portaacconsecteturac
Vestibulumateros
http://getbootstrap.com/components/

61/72

18/6/2015

ComponentsBootstrap

<divclass="listgroup">
<ahref="#"class="listgroupitemactive">
Crasjustoodio
</a>
<ahref="#"class="listgroupitem">Dapibusacfacilisisin</a>
<ahref="#"class="listgroupitem">Morbileorisus</a>
<ahref="#"class="listgroupitem">Portaacconsecteturac</a>
<ahref="#"class="listgroupitem">Vestibulumateros</a>
</div>

Buttonitems
Listgroupitemsmaybebuttonsinsteadoflistitems(thatalsomeansaparent <div> insteadofan
<ul> ).Noneedforindividualparentsaroundeachelement.Don'tusethestandard .btn classes
here.
EXA MPLE

Crasjustoodio
Dapibusacfacilisisin
Morbileorisus
Portaacconsecteturac
Vestibulumateros

<divclass="listgroup">
<buttontype="button"class="listgroupitem">Crasjustoodio</button>
<buttontype="button"class="listgroupitem">Dapibusacfacilisisin</button>
<buttontype="button"class="listgroupitem">Morbileorisus</button>
<buttontype="button"class="listgroupitem">Portaacconsecteturac</button>
<buttontype="button"class="listgroupitem">Vestibulumateros</button>
</div>

Disableditems
Add .disabled toa .listgroupitem tograyitouttoappeardisabled.
EXA MPLE

Crasjustoodio
http://getbootstrap.com/components/

62/72

18/6/2015

ComponentsBootstrap

Dapibusacfacilisisin
Morbileorisus
Portaacconsecteturac
Vestibulumateros

<divclass="listgroup">
<ahref="#"class="listgroupitemdisabled">
Crasjustoodio
</a>
<ahref="#"class="listgroupitem">Dapibusacfacilisisin</a>
<ahref="#"class="listgroupitem">Morbileorisus</a>
<ahref="#"class="listgroupitem">Portaacconsecteturac</a>
<ahref="#"class="listgroupitem">Vestibulumateros</a>
</div>

Contextualclasses
Usecontextualclassestostylelistitems,defaultorlinked.Alsoincludes .active state.
EXA MPLE

Dapibusacfacilisisin
Crassitametnibhlibero
Portaacconsecteturac
Vestibulumateros

Dapibusacfacilisisin
Crassitametnibhlibero
Portaacconsecteturac
Vestibulumateros

http://getbootstrap.com/components/

63/72

18/6/2015

ComponentsBootstrap

<ulclass="listgroup">
<liclass="listgroupitemlistgroupitemsuccess">Dapibusacfacilisisin</li>
<liclass="listgroupitemlistgroupiteminfo">Crassitametnibhlibero</li>
<liclass="listgroupitemlistgroupitemwarning">Portaacconsecteturac</li>
<liclass="listgroupitemlistgroupitemdanger">Vestibulumateros</li>
</ul>
<divclass="listgroup">
<ahref="#"class="listgroupitemlistgroupitemsuccess">Dapibusacfacilisis
in</a>
<ahref="#"class="listgroupitemlistgroupiteminfo">Crassitametnibh
libero</a>
<ahref="#"class="listgroupitemlistgroupitemwarning">Portaacconsectetur
ac</a>
<ahref="#"class="listgroupitemlistgroupitemdanger">Vestibulumateros</a>
</div>

Customcontent
AddnearlyanyHTMLwithin,evenforlinkedlistgroupsliketheonebelow.
EXA MPLE

Listgroupitemheading
Donecidelitnonmiportagravidaategetmetus.
Maecenasseddiamegetrisusvariusblandit.

Listgroupitemheading
Donecidelitnonmiportagravidaategetmetus.
Maecenasseddiamegetrisusvariusblandit.

Listgroupitemheading
Donecidelitnonmiportagravidaategetmetus.
Maecenasseddiamegetrisusvariusblandit.

<divclass="listgroup">
<ahref="#"class="listgroupitemactive">
<h4class="listgroupitemheading">Listgroupitemheading</h4>
<pclass="listgroupitemtext">...</p>
</a>
</div>

http://getbootstrap.com/components/

64/72

18/6/2015

ComponentsBootstrap

Panels
Whilenotalwaysnecessary,sometimesyouneedtoputyourDOMinabox.Forthose
situations,trythepanelcomponent.

Basicexample
Bydefault,allthe .panel doesisapplysomebasicborderandpaddingtocontainsomecontent.
EXA MPLE

Basicpanelexample

<divclass="panelpaneldefault">
<divclass="panelbody">
Basicpanelexample
</div>
</div>

Panelwithheading
Easilyaddaheadingcontainertoyourpanelwith .panelheading .Youmayalsoincludeany <h1>
<h6> witha .paneltitle classtoaddaprestyledheading.
Forproperlinkcoloring,besuretoplacelinksinheadingswithin .paneltitle .
EXA MPLE

Panelheadingwithouttitle
Panelcontent

Paneltitle
Panelcontent

http://getbootstrap.com/components/

65/72

18/6/2015

ComponentsBootstrap

<divclass="panelpaneldefault">
<divclass="panelheading">Panelheadingwithouttitle</div>
<divclass="panelbody">
Panelcontent
</div>
</div>
<divclass="panelpaneldefault">
<divclass="panelheading">
<h3class="paneltitle">Paneltitle</h3>
</div>
<divclass="panelbody">
Panelcontent
</div>
</div>

Panelwithfooter
Wrapbuttonsorsecondarytextin .panelfooter .Notethatpanelfootersdonotinheritcolorsand
borderswhenusingcontextualvariationsastheyarenotmeanttobeintheforeground.
EXA MPLE

Panelcontent
Panelfooter

<divclass="panelpaneldefault">
<divclass="panelbody">
Panelcontent
</div>
<divclass="panelfooter">Panelfooter</div>
</div>

Contextualalternatives
Likeothercomponents,easilymakeapanelmoremeaningfultoaparticularcontextbyaddinganyof
thecontextualstateclasses.
EXA MPLE

Paneltitle
Panelcontent
http://getbootstrap.com/components/

66/72

18/6/2015

ComponentsBootstrap

Paneltitle
Panelcontent

Paneltitle
Panelcontent

Paneltitle
Panelcontent

Paneltitle
Panelcontent

<divclass="panelpanelprimary">...</div>
<divclass="panelpanelsuccess">...</div>
<divclass="panelpanelinfo">...</div>
<divclass="panelpanelwarning">...</div>
<divclass="panelpaneldanger">...</div>

Withtables
Addanynonbordered .table withinapanelforaseamlessdesign.Ifthereisa .panelbody ,weadd
anextrabordertothetopofthetableforseparation.
EXA MPLE

Panelheading
Somedefaultpanelcontenthere.Nullavitaeelitlibero,apharetraaugue.Aeneanlaciniabibendum
nullasedconsectetur.Aeneaneuleoquam.Pellentesqueornaresemlaciniaquamvenenatis
vestibulum.Nullamiddoloridnibhultriciesvehiculautidelit.

FirstName

http://getbootstrap.com/components/

LastName

Username
67/72

18/6/2015

ComponentsBootstrap

Mark

Otto

@mdo

Jacob

Thornton

@fat

Larry

theBird

@twitter

<divclass="panelpaneldefault">
<!Defaultpanelcontents>
<divclass="panelheading">Panelheading</div>
<divclass="panelbody">
<p>...</p>
</div>
<!Table>
<tableclass="table">
...
</table>
</div>

Ifthereisnopanelbody,thecomponentmovesfrompanelheadertotablewithoutinterruption.
EXA MPLE

Panelheading
#

FirstName

LastName

Username

Mark

Otto

@mdo

Jacob

Thornton

@fat

Larry

theBird

@twitter

<divclass="panelpaneldefault">
<!Defaultpanelcontents>
<divclass="panelheading">Panelheading</div>
<!Table>
<tableclass="table">
...
</table>
</div>

Withlistgroups
http://getbootstrap.com/components/

68/72

18/6/2015

ComponentsBootstrap

Easilyincludefullwidthlistgroupswithinanypanel.
EXA MPLE

Panelheading
Somedefaultpanelcontenthere.Nullavitaeelitlibero,apharetraaugue.Aeneanlaciniabibendum
nullasedconsectetur.Aeneaneuleoquam.Pellentesqueornaresemlaciniaquamvenenatis
vestibulum.Nullamiddoloridnibhultriciesvehiculautidelit.

Crasjustoodio
Dapibusacfacilisisin
Morbileorisus
Portaacconsecteturac
Vestibulumateros

<divclass="panelpaneldefault">
<!Defaultpanelcontents>
<divclass="panelheading">Panelheading</div>
<divclass="panelbody">
<p>...</p>
</div>
<!Listgroup>
<ulclass="listgroup">
<liclass="listgroupitem">Crasjustoodio</li>
<liclass="listgroupitem">Dapibusacfacilisisin</li>
<liclass="listgroupitem">Morbileorisus</li>
<liclass="listgroupitem">Portaacconsecteturac</li>
<liclass="listgroupitem">Vestibulumateros</li>
</ul>
</div>

Responsiveembed
http://getbootstrap.com/components/

69/72

18/6/2015

ComponentsBootstrap

Allowbrowserstodeterminevideoorslideshowdimensionsbasedonthewidthoftheircontainingblock
bycreatinganintrinsicratiothatwillproperlyscaleonanydevice.
Rulesaredirectlyappliedto <iframe> , <embed> , <video> ,and <object> elementsoptionallyusean
explicitdescendantclass .embedresponsiveitem whenyouwanttomatchthestylingforother
attributes.
ProTip!Youdon'tneedtoinclude frameborder="0" inyour <iframe> sasweoverridethatforyou.
EXA MPLE

<!16:9aspectratio>
<divclass="embedresponsiveembedresponsive16by9">
<iframeclass="embedresponsiveitem"src="..."></iframe>
</div>
<!4:3aspectratio>
<divclass="embedresponsiveembedresponsive4by3">
<iframeclass="embedresponsiveitem"src="..."></iframe>
</div>

Wells
http://getbootstrap.com/components/

70/72

18/6/2015

ComponentsBootstrap

Defaultwell
Usethewellasasimpleeffectonanelementtogiveitaninseteffect.
EXA MPLE

Look,I'minawell!

<divclass="well">...</div>

Optionalclasses
Controlpaddingandroundedcornerswithtwooptionalmodifierclasses.
EXA MPLE

Look,I'minalargewell!

<divclass="wellwelllg">...</div>

EXA MPLE

Look,I'minasmallwell!

<divclass="wellwellsm">...</div>

Star

82,316

Fork

32,991

Follow@getbootstrap(https://twitter.com/getbootstrap)

Tweet(https://twitter.com/share)

http://getbootstrap.com/components/

71/72

18/6/2015

ComponentsBootstrap

Designedandbuiltwithalltheloveintheworldby@mdo(https://twitter.com/mdo)and@fat
(https://twitter.com/fat).
Maintainedbythecoreteam(https://github.com/orgs/twbs/people)withthehelpofourcontributors
(https://github.com/twbs/bootstrap/graphs/contributors).
CodelicensedunderMIT(https://github.com/twbs/bootstrap/blob/master/LICENSE),documentation
underCCBY3.0(https://creativecommons.org/licenses/by/3.0/).
Currentlyv3.3.5 GitHub(https://github.com/twbs/bootstrap) Examples(../getting
started/#examples) v2.3.2docs(../2.3.2/) About(../about/) Expo(http://expo.getbootstrap.com)
Blog(http://blog.getbootstrap.com) Issues(https://github.com/twbs/bootstrap/issues) Releases
(https://github.com/twbs/bootstrap/releases)

http://getbootstrap.com/components/

72/72