Components · Bootstrap

18/6/2015 ComponentsBootstrap

http://getbootstrap.com/components/ 1/72

ComponentsOveradozenreusablecomponentsbuilttoprovideiconography,dropdowns,inputgroups,navigation,alerts,andmuchmore.

(//srv.carbonads.net/ads/click/x/GTND423ICESD5KJJF6A4YKQWCKBD5K3LCESI4Z3JCE7IV2JYCVBIKKQKC6BDC23NCA7DTK3EHJNCLSIZ?segment=placement:getbootstrapcom)

Yourbrainhasaround70,000thoughtsaday.Use1tocompletelyautomateyourbusiness.(//srv.carbonads.net/ads/click/x/GTND423ICESD5KJJF6A4YKQWCKBD5K3LCESI4Z3JCE7IV2JYCVBIKKQKC6BDC23NCA7DTK3EHJNCLSIZ?segment=placement:getbootstrapcom)

adsviaCarbon(http://carbonads.com)

glyphiconglyphiconasterisk glyphiconglyphiconplus glyphiconglyphiconeuro glyphiconglyphiconeur

GlyphiconsAvailableglyphsIncludesover250glyphsinfontformatfromtheGlyphiconHalflingsset.Glyphicons(http://glyphicons.com/)Halflingsarenormallynotavailableforfree,buttheircreatorhasmadethemavailableforBootstrapfreeofcost.Asathankyou,weonlyaskthatyouincludealinkbacktoGlyphicons(http://glyphicons.com/)wheneverpossible.

* +



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 glyphiconglyphicondownloadalt

glyphiconglyphicondownload glyphiconglyphiconupload glyphiconglyphiconinbox glyphiconglyphiconplaycircle



glyphiconglyphiconrepeat glyphiconglyphiconrefresh glyphiconglyphiconlistalt glyphiconglyphiconlock

glyphiconglyphiconflag glyphiconglyphiconheadphones

glyphiconglyphiconvolumeoff glyphiconglyphiconvolumedown

glyphiconglyphiconvolumeup glyphiconglyphiconqrcode glyphiconglyphiconbarcode glyphiconglyphicontag

glyphiconglyphicontags glyphiconglyphiconbook glyphiconglyphiconbookmark glyphiconglyphiconprint

glyphiconglyphiconcamera glyphiconglyphiconfont glyphiconglyphiconbold glyphiconglyphiconitalic

glyphiconglyphicontextheight glyphiconglyphicontextwidth glyphiconglyphiconalignleft glyphiconglyphiconaligncenter

glyphiconglyphiconalignright glyphiconglyphiconalignjustify glyphiconglyphiconlist glyphiconglyphiconindentleft

glyphiconglyphiconindentright glyphiconglyphiconfacetimevideo

glyphiconglyphiconpicture glyphiconglyphiconmapmarker



glyphiconglyphiconadjust glyphiconglyphicontint glyphiconglyphiconedit glyphiconglyphiconshare

glyphiconglyphiconcheck glyphiconglyphiconmove glyphiconglyphiconstepbackward

glyphiconglyphiconfastbackward

glyphiconglyphiconbackward glyphiconglyphiconplay glyphiconglyphiconpause glyphiconglyphiconstop

glyphiconglyphiconforward glyphiconglyphiconfastforward glyphiconglyphiconstepforward

glyphiconglyphiconeject

glyphiconglyphiconchevronleft glyphiconglyphiconchevronright

glyphiconglyphiconplussign glyphiconglyphiconminussign

glyphiconglyphiconremovesign

glyphiconglyphiconoksign glyphiconglyphiconquestionsign

glyphiconglyphiconinfosign

glyphiconglyphiconscreenshot glyphiconglyphiconremovecircle

glyphiconglyphiconokcircle glyphiconglyphiconbancircle

glyphiconglyphiconarrowleft glyphiconglyphiconarrowright glyphiconglyphiconarrowup glyphiconglyphiconarrowdown



glyphiconglyphiconsharealt glyphiconglyphiconresizefull glyphiconglyphiconresizesmall glyphiconglyphiconexclamationsign

glyphiconglyphicongift glyphiconglyphiconleaf glyphiconglyphiconfire glyphiconglyphiconeyeopen

glyphiconglyphiconeyeclose glyphiconglyphiconwarningsign

glyphiconglyphiconplane glyphiconglyphiconcalendar

glyphiconglyphiconrandom glyphiconglyphiconcomment glyphiconglyphiconmagnet glyphiconglyphiconchevronup

glyphiconglyphiconchevrondown

glyphiconglyphiconretweet glyphiconglyphiconshoppingcart

glyphiconglyphiconfolderclose

glyphiconglyphiconfolderopen glyphiconglyphiconresizevertical

glyphiconglyphiconresizehorizontal

glyphiconglyphiconhdd

glyphiconglyphiconbullhorn glyphiconglyphiconbell glyphiconglyphiconcertificate glyphiconglyphiconthumbsup

glyphiconglyphiconthumbsdown

glyphiconglyphiconhandright glyphiconglyphiconhandleft glyphiconglyphiconhandup



glyphiconglyphiconhanddown glyphiconglyphiconcirclearrowright

glyphiconglyphiconcirclearrowleft

glyphiconglyphiconcirclearrowup

glyphiconglyphiconcirclearrowdown

glyphiconglyphiconglobe glyphiconglyphiconwrench glyphiconglyphicontasks

glyphiconglyphiconfilter glyphiconglyphiconbriefcase glyphiconglyphiconfullscreen glyphiconglyphicondashboard

glyphiconglyphiconpaperclip glyphiconglyphiconheartempty

glyphiconglyphiconlink glyphiconglyphiconphone

glyphiconglyphiconpushpin glyphiconglyphiconusd glyphiconglyphicongbp glyphiconglyphiconsort

glyphiconglyphiconsortbyalphabet

glyphiconglyphiconsortbyalphabetalt

glyphiconglyphiconsortbyorder

glyphiconglyphiconsortbyorderalt

glyphiconglyphiconsortbyattributes

glyphiconglyphiconsortbyattributesalt

glyphiconglyphiconunchecked glyphiconglyphiconexpand

glyphiconglyphiconcollapsedown

glyphiconglyphiconcollapseup glyphiconglyphiconlogin glyphiconglyphiconflash



glyphiconglyphiconlogout glyphiconglyphiconnewwindow

glyphiconglyphiconrecord glyphiconglyphiconsave

glyphiconglyphiconopen glyphiconglyphiconsaved glyphiconglyphiconimport glyphiconglyphiconexport

glyphiconglyphiconsend glyphiconglyphiconfloppydisk glyphiconglyphiconfloppysaved

glyphiconglyphiconfloppyremove

glyphiconglyphiconfloppysave glyphiconglyphiconfloppyopen

glyphiconglyphiconcreditcard glyphiconglyphicontransfer

glyphiconglyphiconcutlery glyphiconglyphiconheader glyphiconglyphiconcompressed

glyphiconglyphiconearphone

glyphiconglyphiconphonealt glyphiconglyphicontower glyphiconglyphiconstats glyphiconglyphiconsdvideo

glyphiconglyphiconhdvideo glyphiconglyphiconsubtitles glyphiconglyphiconsoundstereo

glyphiconglyphiconsounddolby

glyphiconglyphiconsound51 glyphiconglyphiconsound61 glyphiconglyphiconsound71 glyphiconglyphiconcopyrightmark



glyphiconglyphiconregistrationmark

glyphiconglyphiconclouddownload

glyphiconglyphiconcloudupload

glyphiconglyphicontreeconifer

glyphiconglyphicontreedeciduous

glyphiconglyphiconcd glyphiconglyphiconsavefile glyphiconglyphiconopenfile

glyphiconglyphiconlevelup glyphiconglyphiconcopy glyphiconglyphiconpaste glyphiconglyphiconalert

glyphiconglyphiconequalizer glyphiconglyphiconking glyphiconglyphiconqueen glyphiconglyphiconpawn

glyphiconglyphiconbishop glyphiconglyphiconknight glyphiconglyphiconbabyformula

glyphiconglyphicontent

glyphiconglyphiconblackboard glyphiconglyphiconbed glyphiconglyphiconapple glyphiconglyphiconerase

glyphiconglyphiconhourglass glyphiconglyphiconlamp glyphiconglyphiconduplicate glyphiconglyphiconpiggybank

glyphiconglyphiconscissors glyphiconglyphiconbitcoin glyphiconglyphiconbtc glyphiconglyphiconxbt



glyphiconglyphiconyen glyphiconglyphiconjpy glyphiconglyphiconruble glyphiconglyphiconrub

glyphiconglyphiconscale glyphiconglyphiconicelolly glyphiconglyphiconicelollytasted

glyphiconglyphiconeducation

glyphiconglyphiconoptionhorizontal

glyphiconglyphiconoptionvertical

glyphiconglyphiconmenuhamburger

glyphiconglyphiconmodalwindow

glyphiconglyphiconoil glyphiconglyphicongrain glyphiconglyphiconsunglasses glyphiconglyphicontextsize

glyphiconglyphicontextcolor glyphiconglyphicontextbackground

glyphiconglyphiconobjectaligntop

glyphiconglyphiconobjectalignbottom

glyphiconglyphiconobjectalignhorizontal

glyphiconglyphiconobjectalignleft

glyphiconglyphiconobjectalignvertical

glyphiconglyphiconobjectalignright

glyphiconglyphicontriangleright

glyphiconglyphicontriangleleft glyphiconglyphicontrianglebottom

glyphiconglyphicontriangletop

glyphiconglyphiconconsole glyphiconglyphiconsuperscript glyphiconglyphiconsubscript glyphiconglyphiconmenuleft



glyphiconglyphiconmenuright glyphiconglyphiconmenudown glyphiconglyphiconmenuup

HowtouseForperformancereasons,alliconsrequireabaseclassandindividualiconclass.Touse,placethefollowingcodejustaboutanywhere.Besuretoleaveaspacebetweentheiconandtextforproperpadding.

Don'tmixwithothercomponentsIconclassescannotbedirectlycombinedwithothercomponents.Theyshouldnotbeusedalongwithotherclassesonthesameelement.Instead,addanested andapplytheiconclassestothe .

OnlyforuseonemptyelementsIconclassesshouldonlybeusedonelementsthatcontainnotextcontentandhavenochildelements.

ChangingtheiconfontlocationBootstrapassumesiconfontfileswillbelocatedinthe ../fonts/ directory,relativetothecompiledCSSfiles.MovingorrenamingthosefontfilesmeansupdatingtheCSSinoneofthreeways:

Changethe @iconfontpath and/or @iconfontname variablesinthesourceLessfiles.UtilizetherelativeURLsoption(http://lesscss.org/usage/#commandlineusagerelativeurls)providedbytheLesscompiler.Changethe url() pathsinthecompiledCSS.

Usewhateveroptionbestsuitsyourspecificdevelopmentsetup.

AccessibleiconsModernversionsofassistivetechnologieswillannounceCSSgeneratedcontent,aswellasspecificUnicodecharacters.Toavoidunintendedandconfusingoutputinscreenreaders(particularlywheniconsareusedpurelyfordecoration),wehidethemwiththe aria



hidden="true" attribute.

Ifyou'reusinganicontoconveymeaning(ratherthanonlyasadecorativeelement),ensurethatthismeaningisalsoconveyedtoassistivetechnologiesforinstance,includeadditionalcontent,visuallyhiddenwiththe .sronly class.

Ifyou'recreatingcontrolswithnoothertext(suchasa thatonlycontainsanicon),youshouldalwaysprovidealternativecontenttoidentifythepurposeofthecontrol,sothatitwillmakesensetousersofassistivetechnologies.Inthiscase,youcouldaddan arialabel attributeonthecontrolitself.

ExamplesUsetheminbuttons,buttongroupsforatoolbar,navigation,orprependedforminputs.

Star

Aniconusedinanalerttoconveythatit'sanerrormessage,withadditional .sronly texttoconveythishinttousersofassistivetechnologies.

Star Star StarStar

EXAMPLE

Enteravalidemailaddress

EXAMPLE



Error:Enteravalidemailaddress

DropdownsToggleable,contextualmenufordisplayinglistsoflinks.MadeinteractivewiththedropdownJavaScriptplugin(../javascript/#dropdowns).

ExampleWrapthedropdown'striggerandthedropdownmenuwithin .dropdown ,oranotherelementthatdeclares position:relative; .Thenaddthemenu'sHTML.

DropdownActionAnotheractionSomethingelsehereSeparatedlink

Dropdownmenuscanbechangedtoexpandupwards(insteadofdownwards)byadding .dropup totheparent.

Dropdown

Action

Anotheraction

Somethingelsehere

EXAMPLE



DropupActionAnotheractionSomethingelsehereSeparatedlink

AlignmentBydefault,adropdownmenuisautomaticallypositioned100%fromthetopandalongtheleftsideofitsparent.Add .dropdownmenuright toa .dropdownmenu torightalignthedropdownmenu.

MayrequireadditionalpositioningDropdownsareautomaticallypositionedviaCSSwithinthenormalflowofthedocument.Thismeansdropdownsmaybecroppedbyparentswithcertain overflow propertiesorappearoutofboundsoftheviewport.Addresstheseissuesonyourownastheyarise.

Deprecated .pullright alignmentAsofv3.1.0,we'vedeprecated .pullright ondropdownmenus.Torightalignamenu,use.dropdownmenuright .Rightalignednavcomponentsinthenavbaruseamixinversionofthisclasstoautomaticallyalignthemenu.Tooverrideit,use .dropdownmenuleft .

...

HeadersAddaheadertolabelsectionsofactionsinanydropdownmenu.

Dropup

EXAMPLE



...Dropdownheader...

DividerAddadividertoseparateseriesoflinksinadropdownmenu.

......

DisabledmenuitemsAdd .disabled toa inthedropdowntodisablethelink.

Dropdown

Dropdownheader

Action

Anotheraction

SomethingelsehereDropdownheader

Separatedlink

EXAMPLE

Dropdown

Action

Anotheraction

Somethingelsehere

Separatedlink

EXAMPLE



RegularlinkDisabledlinkAnotherlink

ButtongroupsGroupaseriesofbuttonstogetheronasinglelinewiththebuttongroup.AddonoptionalJavaScriptradioandcheckboxstylebehaviorwithourbuttonsplugin(../javascript/#buttons).

Tooltips&popoversinbuttongroupsrequirespecialsettingWhenusingtooltipsorpopoversonelementswithina .btngroup ,you'llhavetospecifytheoption container:'body' toavoidunwantedsideeffects(suchastheelementgrowingwiderand/orlosingitsroundedcornerswhenthetooltiporpopoveristriggered).

Ensurecorrect role andprovidealabelInorderforassistivetechnologiessuchasscreenreaderstoconveythataseriesofbuttonsisgrouped,anappropriate role attributeneedstobeprovided.Forbuttongroups,thiswouldberole="group" ,whiletoolbarsshouldhavea role="toolbar" .

Oneexceptionaregroupswhichonlycontainasinglecontrol(forinstancethejustifiedbuttongroupswith elements)oradropdown.

Inaddition,groupsandtoolbarsshouldbegivenanexplicitlabel,asmostassistivetechnologieswillotherwisenotannouncethem,despitethepresenceofthecorrect role attribute.Intheexamplesprovidedhere,weuse arialabel ,butalternativessuchas arialabelledby canalsobeused.

Dropdown

Regularlink

Disabledlink

Anotherlink

EXAMPLE



BasicexampleWrapaseriesofbuttonswith .btn in .btngroup .

LeftMiddleRight

ButtontoolbarCombinesetsof intoa formorecomplexcomponents.

.........

SizingInsteadofapplyingbuttonsizingclassestoeverybuttoninagroup,justadd .btngroup* toeach.btngroup ,includingwhennestingmultiplegroups.

Left Middle Right

EXAMPLE

1 2 3 4 5 6 7 8

EXAMPLE

Left Middle Right

Left Middle Right

Left Middle Right

EXAMPLE



............

NestingPlacea .btngroup withinanother .btngroup whenyouwantdropdownmenusmixedwithaseriesofbuttons.

12

DropdownDropdownlinkDropdownlink

VerticalvariationMakeasetofbuttonsappearverticallystackedratherthanhorizontally.Splitbuttondropdownsarenotsupportedhere.

Left Middle Right

1 2 Dropdown

EXAMPLE



...

JustifiedbuttongroupsMakeagroupofbuttonsstretchatequalsizestospantheentirewidthofitsparent.Alsoworkswithbuttondropdownswithinthebuttongroup.

HandlingbordersDuetothespecificHTMLandCSSusedtojustifybuttons(namely display:tablecell ),thebordersbetweenthemaredoubled.Inregularbuttongroups, marginleft:1px isusedtostackthebordersinsteadofremovingthem.However, margin doesn'tworkwith display:tablecell .Asaresult,dependingonyourcustomizationstoBootstrap,youmaywishtoremoveorrecolortheborders.

IE8andbordersInternetExplorer8doesn'trenderbordersonbuttonsinajustifiedbuttongroup,whetherit'son or elements.Togetaroundthat,wrapeachbuttoninanother .btngroup .

See#12476(https://github.com/twbs/bootstrap/issues/12476)formoreinformation.

With elementsJustwrapaseriesof .btn sin .btngroup.btngroupjustified .

Button

Button

Dropdown

Button

Button

Dropdown

Dropdown

Dropdown

EXAMPLE



...

LinksactingasbuttonsIfthe elementsareusedtoactasbuttonstriggeringinpagefunctionality,ratherthannavigatingtoanotherdocumentorsectionwithinthecurrentpagetheyshouldalsobegivenanappropriate role="button" .

With elementsTousejustifiedbuttongroupswith elements,youmustwrapeachbuttoninabuttongroup.Mostbrowsersdon'tproperlyapplyourCSSforjustificationto elements,butsincewesupportbuttondropdowns,wecanworkaroundthat.

LeftMiddleRight

Left Middle Right

Left Middle Dropdown

EXAMPLE

Left Middle Right

EXAMPLE



ButtondropdownsUseanybuttontotriggeradropdownmenubyplacingitwithina .btngroup andprovidingthepropermenumarkup.

PlugindependencyButtondropdownsrequirethedropdownplugin(../javascript/#dropdowns)tobeincludedinyourversionofBootstrap.

SinglebuttondropdownsTurnabuttonintoadropdowntogglewithsomebasicmarkupchanges.

ActionActionAnotheractionSomethingelsehereSeparatedlink

SplitbuttondropdownsSimilarly,createsplitbuttondropdownswiththesamemarkupchanges,onlywithaseparatebutton.

Default Primary Success Info Warning Danger

EXAMPLE


EXAMPLE



ActionToggleDropdownActionAnotheractionSomethingelsehereSeparatedlink

SizingButtondropdownsworkwithbuttonsofallsizes.

Largebutton

Smallbutton

Extrasmallbutton

EXAMPLE



Largebutton...

Smallbutton...

Extrasmallbutton...

DropupvariationTriggerdropdownmenusaboveelementsbyadding .dropup totheparent.

Dropup Rightdropup

EXAMPLE



DropupToggleDropdown

InputgroupsExtendformcontrolsbyaddingtextorbuttonsbefore,after,oronbothsidesofanytextbased .Use .inputgroup withan .inputgroupaddon toprependorappendelementstoasingle .formcontrol .

Textual sonlyAvoidusing elementshereastheycannotbefullystyledinWebKitbrowsers.

Avoidusing elementshereastheir rows attributewillnotberespectedinsomecases.

Tooltips&popoversininputgroupsrequirespecialsettingWhenusingtooltipsorpopoversonelementswithinan .inputgroup ,you'llhavetospecifytheoption container:'body' toavoidunwantedsideeffects(suchastheelementgrowingwiderand/orlosingitsroundedcornerswhenthetooltiporpopoveristriggered).

Don'tmixwithothercomponentsDonotmixformgroupsorgridcolumnclassesdirectlywithinputgroups.Instead,nesttheinputgroupinsideoftheformgrouporgridrelatedelement.

Alwaysaddlabels



Screenreaderswillhavetroublewithyourformsifyoudon'tincludealabelforeveryinput.Fortheseinputgroups,ensurethatanyadditionallabelorfunctionalityisconveyedtoassistivetechnologies.

Theexacttechniquetobeused( elementshiddenusingthe .sronly class,oruseofthe arialabel , arialabelledby , ariadescribedby , title or placeholder attribute)andwhatadditionalinformationwillneedtobeconveyedwillvarydependingontheexacttypeofinterfacewidgetyou'reimplementing.Theexamplesinthissectionprovideafewsuggested,casespecificapproaches.

BasicexamplePlaceoneaddonorbuttononeithersideofaninput.Youmayalsoplaceoneonbothsidesofaninput.

Wedonotsupportmultipleaddonsonasingleside.

Wedonotsupportmultipleformcontrolsinasingleinputgroup.

@

@example.com

$.00

@

@example.com

$ .00

EXAMPLE

Username

Recipient'susername



SizingAddtherelativeformsizingclassestothe .inputgroup itselfandcontentswithinwillautomaticallyresizenoneedforrepeatingtheformcontrolsizeclassesoneachelement.

@

@

@

CheckboxesandradioaddonsPlaceanycheckboxorradiooptionwithinaninputgroup'saddoninsteadoftext.

@

@

@

EXAMPLE

EXAMPLE

Username

Username

Username



ButtonaddonsButtonsininputgroupsareabitdifferentandrequireoneextralevelofnesting.Insteadof .inputgroupaddon ,you'llneedtouse .inputgroupbtn towrapthebuttons.Thisisrequiredduetodefaultbrowserstylesthatcannotbeoverridden.

Go!

EXAMPLE

Searchfor...

Searchfor... Go!



Go!Go!

Buttonswithdropdowns

Action

EXAMPLE

Action



ActionActionAnotheractionSomethingelsehereSeparatedlinkActionActionAnotheractionSomethingelsehereSeparatedlink

Segmentedbuttons

Action

EXAMPLE

Action



NavsNavsavailableinBootstraphavesharedmarkup,startingwiththebase .nav class,aswellassharedstates.Swapmodifierclassestoswitchbetweeneachstyle.

UsingnavsfortabpanelsrequiresJavaScripttabspluginFortabswithtabbableareas,youmustusethetabsJavaScriptplugin(../javascript/#tabs).Themarkupwillalsorequireadditional role andARIAattributesseetheplugin'sexamplemarkup(../javascript/#tabsusage)forfurtherdetails.

MakenavsusedasnavigationaccessibleIfyouareusingnavstoprovideanavigationbar,besuretoadda role="navigation" tothemostlogicalparentcontainerofthe ,orwrapa elementaroundthewholenavigation.Donotaddtheroletothe itself,asthiswouldpreventitfrombeingannouncedasanactuallistbyassistivetechnologies.

TabsNotethe .navtabs classrequiresthe .nav baseclass.

EXAMPLE



HomeProfileMessages

PillsTakethatsameHTML,butuse .navpills instead:

HomeProfileMessages

Pillsarealsoverticallystackable.Justadd .navstacked .

...

JustifiedEasilymaketabsorpillsequalwidthsoftheirparentatscreenswiderthan768pxwith .navjustified .Onsmallerscreens,thenavlinksarestacked.

Justifiednavbarnavlinksarecurrentlynotsupported.

Home Profile Messages

Home Profile Messages

EXAMPLE

Home

Profile

Messages

EXAMPLE



SafariandresponsivejustifiednavsAsofv8.0,Safariexhibitsabuginwhichresizingyourbrowserhorizontallycausesrenderingerrorsinthejustifiednavthatarecleareduponrefreshing.Thisbugisalsoshowninthejustifiednavexample(../examples/justifiednav/).

...

...

DisabledlinksForanynavcomponent(tabsorpills),add .disabled forgraylinksandnohovereffects.

LinkfunctionalitynotimpactedThisclasswillonlychangethe 'sappearance,notitsfunctionality.UsecustomJavaScripttodisablelinkshere.

Home

Profile

Messages

Home

Profile

Messages

EXAMPLE

EXAMPLE



...Disabledlink...

UsingdropdownsAdddropdownmenuswithalittleextraHTMLandthedropdownsJavaScriptplugin(../javascript/#dropdowns).

Tabswithdropdowns

...Dropdown......

Pillswithdropdowns

Clickablelink Clickablelink Disabledlink

Home Help Dropdown

EXAMPLE

Home Help Dropdown

EXAMPLE



...Dropdown......

NavbarDefaultnavbarNavbarsareresponsivemetacomponentsthatserveasnavigationheadersforyourapplicationorsite.Theybegincollapsed(andaretoggleable)inmobileviewsandbecomehorizontalastheavailableviewportwidthincreases.

Justifiednavbarnavlinksarecurrentlynotsupported.

OverflowingcontentSinceBootstrapdoesn'tknowhowmuchspacethecontentinyournavbarneeds,youmightrunintoissueswithcontentwrappingintoasecondrow.Toresolvethis,youcan:

a. Reducetheamountorwidthofnavbaritems.b. Hidecertainnavbaritemsatcertainscreensizesusingresponsiveutilityclasses

(../css/#responsiveutilities).c. Changethepointatwhichyournavbarswitchesbetweencollapsedandhorizontalmode.

Customizethe @gridfloatbreakpoint variableoraddyourownmediaquery.

RequiresJavaScriptpluginIfJavaScriptisdisabledandtheviewportisnarrowenoughthatthenavbarcollapses,itwillbeimpossibletoexpandthenavbarandviewthecontentwithinthe .navbarcollapse .



Theresponsivenavbarrequiresthecollapseplugin(../javascript/#collapse)tobeincludedinyourversionofBootstrap.

ChangingthecollapsedmobilenavbarbreakpointThenavbarcollapsesintoitsverticalmobileviewwhentheviewportisnarrowerthan @gridfloatbreakpoint ,andexpandsintoitshorizontalnonmobileviewwhentheviewportisatleast@gridfloatbreakpoint inwidth.AdjustthisvariableintheLesssourcetocontrolwhenthenavbarcollapses/expands.Thedefaultvalueis 768px (thesmallest"small"or"tablet"screen).

MakenavbarsaccessibleBesuretousea elementor,ifusingamoregenericelementsuchasa ,addarole="navigation" toeverynavbartoexplicitlyidentifyitasalandmarkregionforusersofassistivetechnologies.

TogglenavigationBrand

Link(current)

LinkDropdownActionAnotheraction

EXAMPLE



AnotheractionSomethingelsehereSeparatedlinkOnemoreseparatedlinkSubmitLinkDropdownActionAnotheractionSomethingelsehereSeparatedlink

BrandimageReplacethenavbarbrandwithyourownimagebyswappingthetextforan .Sincethe .navbarbrand hasitsownpaddingandheight,youmayneedtooverridesomeCSSdependingonyourimage.

EXAMPLE



FormsPlaceformcontentwithin .navbarform forproperverticalalignmentandcollapsedbehaviorinnarrowviewports.Usethealignmentoptionstodecidewhereitresideswithinthenavbarcontent.

Asaheadsup, .navbarform sharesmuchofitscodewith .forminline viamixin.Someformcontrols,likeinputgroups,mayrequirefixedwidthstobeshowupproperlywithinanavbar.

Submit

MobiledevicecaveatsTherearesomecaveatsregardingusingformcontrolswithinfixedelementsonmobiledevices.Seeourbrowsersupportdocs(../gettingstarted/#supportfixedpositionkeyboards)fordetails.

AlwaysaddlabelsScreenreaderswillhavetroublewithyourformsifyoudon'tincludealabelforeveryinput.Fortheseinlineforms,youcanhidethelabelsusingthe .sronly class.Therearefurtheralternativemethodsofprovidingalabelforassistivetechnologies,suchasthe arialabel ,arialabelledby or title attribute.Ifnoneoftheseispresent,screenreadersmayresorttousingthe placeholder attribute,ifpresent,butnotethatuseof placeholder asareplacementforotherlabellingmethodsisnotadvised.

Buttons

EXAMPLE



Addthe .navbarbtn classto elementsnotresidingina toverticallycentertheminthenavbar.

Signin

ContextspecificusageLikethestandardbuttonclasses(../css/#buttons), .navbarbtn canbeusedon and elements.However,neither .navbarbtn northestandardbuttonclassesshouldbeusedon elementswithin .navbarnav .

TextWrapstringsoftextinanelementwith .navbartext ,usuallyona tagforproperleadingandcolor.

SignedinasMarkOtto

NonnavlinksForfolksusingstandardlinksthatarenotwithintheregularnavbarnavigationcomponent,usethe.navbarlink classtoaddthepropercolorsforthedefaultandinversenavbaroptions.

SignedinasMarkOtto

ComponentalignmentAlignnavlinks,forms,buttons,ortext,usingthe .navbarleft or .navbarright utilityclasses.BothclasseswilladdaCSSfloatinthespecifieddirection.Forexample,toalignnavlinks,puttheminaseparate withtherespectiveutilityclassapplied.

Theseclassesaremixinedversionsof .pullleft and .pullright ,butthey'rescopedtomediaqueriesforeasierhandlingofnavbarcomponentsacrossdevicesizes.

EXAMPLE

EXAMPLE

EXAMPLE



RightaligningmultiplecomponentsNavbarscurrentlyhavealimitationwithmultiple .navbarright classes.Toproperlyspacecontent,weusenegativemarginonthelast .navbarright element.Whentherearemultipleelementsusingthatclass,thesemarginsdon'tworkasintended.

We'llrevisitthiswhenwecanrewritethatcomponentinv4.

FixedtotopAdd .navbarfixedtop andincludea .container or .containerfluid tocenterandpadnavbarcontent.

...

BodypaddingrequiredThefixednavbarwilloverlayyourothercontent,unlessyouadd padding tothetopofthe .Tryoutyourownvaluesoruseoursnippetbelow.Tip:Bydefault,thenavbaris50pxhigh.

body{paddingtop:70px;}

MakesuretoincludethisafterthecoreBootstrapCSS.

FixedtobottomAdd .navbarfixedbottom andincludea .container or .containerfluid tocenterandpadnavbarcontent.

...

EXAMPLE

EXAMPLE



BodypaddingrequiredThefixednavbarwilloverlayyourothercontent,unlessyouadd padding tothebottomofthe .Tryoutyourownvaluesoruseoursnippetbelow.Tip:Bydefault,thenavbaris50pxhigh.

body{paddingbottom:70px;}

MakesuretoincludethisafterthecoreBootstrapCSS.

StatictopCreateafullwidthnavbarthatscrollsawaywiththepagebyadding .navbarstatictop andincludea.container or .containerfluid tocenterandpadnavbarcontent.

Unlikethe .navbarfixed* classes,youdonotneedtochangeanypaddingonthe body .

...

InvertednavbarModifythelookofthenavbarbyadding .navbarinverse .

...

BreadcrumbsIndicatethecurrentpage'slocationwithinanavigationalhierarchy.

EXAMPLE

EXAMPLE



SeparatorsareautomaticallyaddedinCSSthrough :before and content .

HomeLibraryData

PaginationProvidepaginationlinksforyoursiteorappwiththemultipagepaginationcomponent,orthesimplerpageralternative.

DefaultpaginationSimplepaginationinspiredbyRdio,greatforappsandsearchresults.Thelargeblockishardtomiss,easilyscalable,andprovideslargeclickareas.

Home

Home / Library

Home / Library / Data

EXAMPLE

1 2 3 4 5

EXAMPLE



12345

DisabledandactivestatesLinksarecustomizablefordifferentcircumstances.Use .disabled forunclickablelinksand .active toindicatethecurrentpage.

1(current)...

Youcanoptionallyswapoutactiveordisabledanchorsfor ,oromittheanchorinthecaseoftheprevious/nextarrows,toremoveclickfunctionalitywhileretainingintendedstyles.

2 3 4 5

EXAMPLE

1



1(current)...

SizingFancylargerorsmallerpagination?Add .paginationlg or .paginationsm foradditionalsizes.

.........

PagerQuickpreviousandnextlinksforsimplepaginationimplementationswithlightmarkupandstyles.It'sgreatforsimplesiteslikeblogsormagazines.

DefaultexampleBydefault,thepagercenterslinks.

1 2 3 4 5

1 2 3 4 5

1 2 3 4 5

EXAMPLE

EXAMPLE



PreviousNext

AlignedlinksAlternatively,youcanaligneachlinktothesides:

Older

Newer

OptionaldisabledstatePagerlinksalsousethegeneral .disabled utilityclassfromthepagination.

OlderNewer

Previous Next

Older Newer

EXAMPLE

Older Newer

EXAMPLE



LabelsExample

ExampleheadingNew

AvailablevariationsAddanyofthebelowmentionedmodifierclassestochangetheappearanceofalabel.

DefaultPrimarySuccessInfoWarningDanger

Havetonsoflabels?

Exampleheading NewExampleheading NewExampleheading NewExampleheading NewExampleheading NewExampleheading New

EXAMPLE


EXAMPLE



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

BadgesEasilyhighlightneworunreaditemsbyaddinga tolinks,Bootstrapnavs,andmore.

Inbox42

Messages4

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

CrossbrowsercompatibilityBadgeswon'tselfcollapseinInternetExplorer8becauseitlackssupportforthe :emptyselector.

AdaptstoactivenavstatesBuiltinstylesareincludedforplacingbadgesinactivestatesinpillnavigations.

Inbox 42

Messages 4

EXAMPLE

EXAMPLE



Home42ProfileMessages3

JumbotronAlightweight,flexiblecomponentthatcanoptionallyextendtheentireviewporttoshowcasekeycontentonyoursite.

Hello,world!...Learnmore

Tomakethejumbotronfullwidth,andwithoutroundedcorners,placeitoutsideall .container sandinsteadadda .container within.

Home 42 Profile Messages 3

Hello,world!Thisisasimpleherounit,asimplejumbotronstylecomponentforcallingextraattentiontofeaturedcontentorinformation.

Learnmore

EXAMPLE



...

PageheaderAsimpleshellforan h1 toappropriatelyspaceoutandsegmentsectionsofcontentonapage.Itcanutilizethe h1 'sdefault small element,aswellasmostothercomponents(withadditionalstyles).

ExamplepageheaderSubtextforheader

ThumbnailsExtendBootstrap'sgridsystem(../css/#grid)withthethumbnailcomponenttoeasilydisplaygridsofimages,videos,text,andmore.

Ifyou'relookingforPinterestlikepresentationofthumbnailsofvaryingheightsand/orwidths,you'llneedtouseathirdpartypluginsuchasMasonry(http://masonry.desandro.com),Isotope(http://isotope.metafizzy.co),orSalvattore(http://salvattore.com).

Defaultexample

ExamplepageheaderSubtextforheader

EXAMPLE



Bydefault,Bootstrap'sthumbnailsaredesignedtoshowcaselinkedimageswithminimalrequiredmarkup.

...

CustomcontentWithabitofextramarkup,it'spossibletoaddanykindofHTMLcontentlikeheadings,paragraphs,orbuttonsintothumbnails.

171x180 171x180

171x180 171x180

EXAMPLE

EXAMPLE



242x200

ThumbnaillabelCrasjustoodio,dapibusacfacilisisin,egestasegetquam.Donecidelitnonmiportagravidaategetmetus.Nullamiddoloridnibhultriciesvehiculautidelit.

Button Button

242x200


Button Button



Thumbnaillabel...ButtonButton

AlertsProvidecontextualfeedbackmessagesfortypicaluseractionswiththehandfulofavailableandflexiblealertmessages.

Examples

242x200


Button Button



Wrapanytextandanoptionaldismissbuttonin .alert andoneofthefourcontextualclasses(e.g.,.alertsuccess )forbasicalertmessages.

NodefaultclassAlertsdon'thavedefaultclasses,onlybaseandmodifierclasses.Adefaultgrayalertdoesn'tmaketoomuchsense,soyou'rerequiredtospecifyatypeviacontextualclass.Choosefromsuccess,info,warning,ordanger.

............

DismissiblealertsBuildonanyalertbyaddinganoptional .alertdismissible andclosebutton.

RequiresJavaScriptalertpluginForfullyfunctioning,dismissiblealerts,youmustusethealertsJavaScriptplugin(../javascript/#alerts).

Welldone!Yousuccessfullyreadthisimportantalertmessage.

Headsup!Thisalertneedsyourattention,butit'snotsuperimportant.

Warning!Bettercheckyourself,you'renotlookingtoogood.

Ohsnap!Changeafewthingsupandtrysubmittingagain.

EXAMPLE

EXAMPLE




EnsureproperbehavioracrossalldevicesBesuretousethe elementwiththe datadismiss="alert" dataattribute.

LinksinalertsUsethe .alertlink utilityclasstoquicklyprovidematchingcoloredlinkswithinanyalert.

...

...

...

...


Welldone!Yousuccessfullyreadthisimportantalertmessage.

Headsup!Thisalertneedsyourattention,butit'snotsuperimportant.


Ohsnap!Changeafewthingsupandtrysubmittingagain.

EXAMPLE



ProgressbarsProvideuptodatefeedbackontheprogressofaworkfloworactionwithsimpleyetflexibleprogressbars.

CrossbrowsercompatibilityProgressbarsuseCSS3transitionsandanimationstoachievesomeoftheireffects.ThesefeaturesarenotsupportedinInternetExplorer9andbeloworolderversionsofFirefox.Opera12doesnotsupportanimations.

BasicexampleDefaultprogressbar.

60%Complete

WithlabelRemovethe with .sronly classfromwithintheprogressbartoshowavisiblepercentage.

EXAMPLE

60%

EXAMPLE



60%

Toensurethatthelabeltextremainslegibleevenforlowpercentages,consideraddinga minwidth totheprogressbar.

0%

2%

ContextualalternativesProgressbarsusesomeofthesamebuttonandalertclassesforconsistentstyles.

0%

2%

EXAMPLE

EXAMPLE



40%Complete(success)

20%Complete

60%Complete(warning)

80%Complete(danger)

StripedUsesagradienttocreateastripedeffect.NotavailableinIE9andbelow.

EXAMPLE



40%Complete(success)

20%Complete

60%Complete(warning)

80%Complete(danger)

AnimatedAdd .active to .progressbarstriped toanimatethestripesrighttoleft.NotavailableinIE9andbelow.

45%Complete

Toggleanimation

EXAMPLE



StackedPlacemultiplebarsintothesame .progress tostackthem.

35%Complete(success)20%Complete(warning)10%Complete(danger)

MediaobjectAbstractobjectstylesforbuildingvarioustypesofcomponents(likeblogcomments,Tweets,etc)thatfeaturealeftorrightalignedimagealongsidetextualcontent.

DefaultmediaThedefaultmediadisplaysamediaobject(images,video,audio)totheleftorrightofacontentblock.

EXAMPLE

MediaheadingCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.Fuscecondimentumnuncacnisivulputatefringilla.Doneclaciniaconguefelisinfaucibus.

MediaheadingCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.Fuscecondimentumnuncacnisivulputatefringilla.Doneclaciniaconguefelisinfaucibus.

EXAMPLE



Mediaheading...

Theclasses .pullleft and .pullright alsoexistandwerepreviouslyusedaspartofthemediacomponent,butaredeprecatedforthatuseasofv3.3.0.Theyareapproximatelyequivalentto .medialeft and .mediaright ,exceptthat .mediaright shouldbeplacedafterthe .mediabody inthehtml.

MediaalignmentTheimagesorothermediacanbealignedtop,middle,orbottom.Thedefaultistopaligned.

NestedmediaheadingCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.Fuscecondimentumnuncacnisivulputatefringilla.Doneclaciniaconguefelisinfaucibus.

MediaheadingCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.


TopalignedmediaCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.Fuscecondimentumnuncacnisivulputatefringilla.Doneclaciniaconguefelisinfaucibus.

Donecsedodiodui.Nullamquisrisusegeturnamollisornareveleuleo.Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.

Middlealignedmedia

EXAMPLE



Middlealignedmedia...

MedialistWithabitofextramarkup,youcanusemediainsidelist(usefulforcommentthreadsorarticleslists).

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


BottomalignedmediaCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.Fuscecondimentumnuncacnisivulputatefringilla.Doneclaciniaconguefelisinfaucibus.



NestedmediaheadingCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.

NestedmediaheadingCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.

Nestedmediaheading

EXAMPLE



Mediaheading...

ListgroupListgroupsareaflexibleandpowerfulcomponentfordisplayingnotonlysimplelistsofelements,butcomplexoneswithcustomcontent.

BasicexampleThemostbasiclistgroupissimplyanunorderedlistwithlistitems,andtheproperclasses.Builduponitwiththeoptionsthatfollow,oryourownCSSasneeded.

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

Crasjustoodio

Dapibusacfacilisisin

Morbileorisus

Portaacconsecteturac

Vestibulumateros

EXAMPLE



CrasjustoodioDapibusacfacilisisinMorbileorisusPortaacconsecteturacVestibulumateros

BadgesAddthebadgescomponenttoanylistgroupitemanditwillautomaticallybepositionedontheright.

14Crasjustoodio

LinkeditemsLinkifylistgroupitemsbyusinganchortagsinsteadoflistitems(thatalsomeansaparent insteadofan ).Noneedforindividualparentsaroundeachelement.

14Crasjustoodio

2Dapibusacfacilisisin

1Morbileorisus

EXAMPLE


Morbileorisus


Vestibulumateros

EXAMPLE

Crasjustoodio




ButtonitemsListgroupitemsmaybebuttonsinsteadoflistitems(thatalsomeansaparent insteadofan ).Noneedforindividualparentsaroundeachelement.Don'tusethestandard .btn classeshere.


DisableditemsAdd .disabled toa .listgroupitem tograyitouttoappeardisabled.

Crasjustoodio


Morbileorisus


Vestibulumateros

EXAMPLE

Crasjustoodio

EXAMPLE




ContextualclassesUsecontextualclassestostylelistitems,defaultorlinked.Alsoincludes .active state.


Morbileorisus


Vestibulumateros


Crassitametnibhlibero


Vestibulumateros


Crassitametnibhlibero


Vestibulumateros

EXAMPLE



DapibusacfacilisisinCrassitametnibhliberoPortaacconsecteturacVestibulumateros

DapibusacfacilisisinCrassitametnibhliberoPortaacconsecteturacVestibulumateros

CustomcontentAddnearlyanyHTMLwithin,evenforlinkedlistgroupsliketheonebelow.

Listgroupitemheading...

ListgroupitemheadingDonecidelitnonmiportagravidaategetmetus.Maecenasseddiamegetrisusvariusblandit.


EXAMPLE




PanelsWhilenotalwaysnecessary,sometimesyouneedtoputyourDOMinabox.Forthosesituations,trythepanelcomponent.

BasicexampleBydefault,allthe .panel doesisapplysomebasicborderandpaddingtocontainsomecontent.

Basicpanelexample

PanelwithheadingEasilyaddaheadingcontainertoyourpanelwith .panelheading .Youmayalsoincludeany witha .paneltitle classtoaddaprestyledheading.

Forproperlinkcoloring,besuretoplacelinksinheadingswithin .paneltitle .

Basicpanelexample

EXAMPLE

Panelheadingwithouttitle

Panelcontent

Paneltitle

Panelcontent

EXAMPLE



PanelheadingwithouttitlePanelcontent

PaneltitlePanelcontent

PanelwithfooterWrapbuttonsorsecondarytextin .panelfooter .Notethatpanelfootersdonotinheritcolorsandborderswhenusingcontextualvariationsastheyarenotmeanttobeintheforeground.

PanelcontentPanelfooter

ContextualalternativesLikeothercomponents,easilymakeapanelmoremeaningfultoaparticularcontextbyaddinganyofthecontextualstateclasses.

Panelcontent

Panelfooter

EXAMPLE

Paneltitle

Panelcontent

EXAMPLE



...............

WithtablesAddanynonbordered .table withinapanelforaseamlessdesign.Ifthereisa .panelbody ,weaddanextrabordertothetopofthetableforseparation.

Paneltitle

Panelcontent

Paneltitle

Panelcontent

Paneltitle

Panelcontent

Paneltitle

Panelcontent

Panelheading

Somedefaultpanelcontenthere.Nullavitaeelitlibero,apharetraaugue.Aeneanlaciniabibendumnullasedconsectetur.Aeneaneuleoquam.Pellentesqueornaresemlaciniaquamvenenatisvestibulum.Nullamiddoloridnibhultriciesvehiculautidelit.

# FirstName LastName Username

EXAMPLE



Panelheading...

...

Ifthereisnopanelbody,thecomponentmovesfrompanelheadertotablewithoutinterruption.

Panelheading

...

Withlistgroups

1 Mark Otto @mdo

2 Jacob Thornton @fat

3 Larry theBird @twitter

Panelheading

# FirstName LastName Username

1 Mark Otto @mdo

2 Jacob Thornton @fat

3 Larry theBird @twitter

EXAMPLE



Easilyincludefullwidthlistgroupswithinanypanel.

Panelheading...


Responsiveembed

Panelheading

Somedefaultpanelcontenthere.Nullavitaeelitlibero,apharetraaugue.Aeneanlaciniabibendumnullasedconsectetur.Aeneaneuleoquam.Pellentesqueornaresemlaciniaquamvenenatisvestibulum.Nullamiddoloridnibhultriciesvehiculautidelit.

Crasjustoodio


Morbileorisus


Vestibulumateros

EXAMPLE



Allowbrowserstodeterminevideoorslideshowdimensionsbasedonthewidthoftheircontainingblockbycreatinganintrinsicratiothatwillproperlyscaleonanydevice.

Rulesaredirectlyappliedto , , ,and elementsoptionallyuseanexplicitdescendantclass .embedresponsiveitem whenyouwanttomatchthestylingforotherattributes.

ProTip!Youdon'tneedtoinclude frameborder="0" inyour sasweoverridethatforyou.

Wells

EXAMPLE



Star 82,316 Fork 32,991 Follow@getbootstrap(https://twitter.com/getbootstrap)Tweet(https://twitter.com/share)

DefaultwellUsethewellasasimpleeffectonanelementtogiveitaninseteffect.

...

OptionalclassesControlpaddingandroundedcornerswithtwooptionalmodifierclasses.

...

...

Look,I'minawell!

EXAMPLE

Look,I'minalargewell!

EXAMPLE

Look,I'minasmallwell!

EXAMPLE



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),documentationunderCCBY3.0(https://creativecommons.org/licenses/by/3.0/).

Currentlyv3.3.5 GitHub(https://github.com/twbs/bootstrap) Examples(../gettingstarted/#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)

Documents

Components · Bootstrap