Components - Bootstrap

Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more. Glyphicons. Available glyphs. SkiptomaincontentBootstrap4ishere!ComponentsOveradozenreusablecomponentsbuilttoprovideiconography,dropdowns,inputgroups,navigation,alerts,andmuchmore.GlyphiconsAvailableglyphsIncludesover250glyphsinfontformatfromtheGlyphiconHalflingsset.GlyphiconsHalflingsarenormallynotavailableforfree,buttheircreatorhasmadethemavailableforBootstrapfreeofcost.Asathankyou,weonlyaskthatyouincludealinkbacktoGlyphiconswheneverpossible.glyphiconglyphicon-asteriskglyphiconglyphicon-plusglyphiconglyphicon-euroglyphiconglyphicon-eurglyphiconglyphicon-minusglyphiconglyphicon-cloudglyphiconglyphicon-envelopeglyphiconglyphicon-pencilglyphiconglyphicon-glassglyphiconglyphicon-musicglyphiconglyphicon-searchglyphiconglyphicon-heartglyphiconglyphicon-starglyphiconglyphicon-star-emptyglyphiconglyphicon-userglyphiconglyphicon-filmglyphiconglyphicon-th-largeglyphiconglyphicon-thglyphiconglyphicon-th-listglyphiconglyphicon-okglyphiconglyphicon-removeglyphiconglyphicon-zoom-inglyphiconglyphicon-zoom-outglyphiconglyphicon-offglyphiconglyphicon-signalglyphiconglyphicon-cogglyphiconglyphicon-trashglyphiconglyphicon-homeglyphiconglyphicon-fileglyphiconglyphicon-timeglyphiconglyphicon-roadglyphiconglyphicon-download-altglyphiconglyphicon-downloadglyphiconglyphicon-uploadglyphiconglyphicon-inboxglyphiconglyphicon-play-circleglyphiconglyphicon-repeatglyphiconglyphicon-refreshglyphiconglyphicon-list-altglyphiconglyphicon-lockglyphiconglyphicon-flagglyphiconglyphicon-headphonesglyphiconglyphicon-volume-offglyphiconglyphicon-volume-downglyphiconglyphicon-volume-upglyphiconglyphicon-qrcodeglyphiconglyphicon-barcodeglyphiconglyphicon-tagglyphiconglyphicon-tagsglyphiconglyphicon-bookglyphiconglyphicon-bookmarkglyphiconglyphicon-printglyphiconglyphicon-cameraglyphiconglyphicon-fontglyphiconglyphicon-boldglyphiconglyphicon-italicglyphiconglyphicon-text-heightglyphiconglyphicon-text-widthglyphiconglyphicon-align-leftglyphiconglyphicon-align-centerglyphiconglyphicon-align-rightglyphiconglyphicon-align-justifyglyphiconglyphicon-listglyphiconglyphicon-indent-leftglyphiconglyphicon-indent-rightglyphiconglyphicon-facetime-videoglyphiconglyphicon-pictureglyphiconglyphicon-map-markerglyphiconglyphicon-adjustglyphiconglyphicon-tintglyphiconglyphicon-editglyphiconglyphicon-shareglyphiconglyphicon-checkglyphiconglyphicon-moveglyphiconglyphicon-step-backwardglyphiconglyphicon-fast-backwardglyphiconglyphicon-backwardglyphiconglyphicon-playglyphiconglyphicon-pauseglyphiconglyphicon-stopglyphiconglyphicon-forwardglyphiconglyphicon-fast-forwardglyphiconglyphicon-step-forwardglyphiconglyphicon-ejectglyphiconglyphicon-chevron-leftglyphiconglyphicon-chevron-rightglyphiconglyphicon-plus-signglyphiconglyphicon-minus-signglyphiconglyphicon-remove-signglyphiconglyphicon-ok-signglyphiconglyphicon-question-signglyphiconglyphicon-info-signglyphiconglyphicon-screenshotglyphiconglyphicon-remove-circleglyphiconglyphicon-ok-circleglyphiconglyphicon-ban-circleglyphiconglyphicon-arrow-leftglyphiconglyphicon-arrow-rightglyphiconglyphicon-arrow-upglyphiconglyphicon-arrow-downglyphiconglyphicon-share-altglyphiconglyphicon-resize-fullglyphiconglyphicon-resize-smallglyphiconglyphicon-exclamation-signglyphiconglyphicon-giftglyphiconglyphicon-leafglyphiconglyphicon-fireglyphiconglyphicon-eye-openglyphiconglyphicon-eye-closeglyphiconglyphicon-warning-signglyphiconglyphicon-planeglyphiconglyphicon-calendarglyphiconglyphicon-randomglyphiconglyphicon-commentglyphiconglyphicon-magnetglyphiconglyphicon-chevron-upglyphiconglyphicon-chevron-downglyphiconglyphicon-retweetglyphiconglyphicon-shopping-cartglyphiconglyphicon-folder-closeglyphiconglyphicon-folder-openglyphiconglyphicon-resize-verticalglyphiconglyphicon-resize-horizontalglyphiconglyphicon-hddglyphiconglyphicon-bullhornglyphiconglyphicon-bellglyphiconglyphicon-certificateglyphiconglyphicon-thumbs-upglyphiconglyphicon-thumbs-downglyphiconglyphicon-hand-rightglyphiconglyphicon-hand-leftglyphiconglyphicon-hand-upglyphiconglyphicon-hand-downglyphiconglyphicon-circle-arrow-rightglyphiconglyphicon-circle-arrow-leftglyphiconglyphicon-circle-arrow-upglyphiconglyphicon-circle-arrow-downglyphiconglyphicon-globeglyphiconglyphicon-wrenchglyphiconglyphicon-tasksglyphiconglyphicon-filterglyphiconglyphicon-briefcaseglyphiconglyphicon-fullscreenglyphiconglyphicon-dashboardglyphiconglyphicon-paperclipglyphiconglyphicon-heart-emptyglyphiconglyphicon-linkglyphiconglyphicon-phoneglyphiconglyphicon-pushpinglyphiconglyphicon-usdglyphiconglyphicon-gbpglyphiconglyphicon-sortglyphiconglyphicon-sort-by-alphabetglyphiconglyphicon-sort-by-alphabet-altglyphiconglyphicon-sort-by-orderglyphiconglyphicon-sort-by-order-altglyphiconglyphicon-sort-by-attributesglyphiconglyphicon-sort-by-attributes-altglyphiconglyphicon-uncheckedglyphiconglyphicon-expandglyphiconglyphicon-collapse-downglyphiconglyphicon-collapse-upglyphiconglyphicon-log-inglyphiconglyphicon-flashglyphiconglyphicon-log-outglyphiconglyphicon-new-windowglyphiconglyphicon-recordglyphiconglyphicon-saveglyphiconglyphicon-openglyphiconglyphicon-savedglyphiconglyphicon-importglyphiconglyphicon-exportglyphiconglyphicon-sendglyphiconglyphicon-floppy-diskglyphiconglyphicon-floppy-savedglyphiconglyphicon-floppy-removeglyphiconglyphicon-floppy-saveglyphiconglyphicon-floppy-openglyphiconglyphicon-credit-cardglyphiconglyphicon-transferglyphiconglyphicon-cutleryglyphiconglyphicon-headerglyphiconglyphicon-compressedglyphiconglyphicon-earphoneglyphiconglyphicon-phone-altglyphiconglyphicon-towerglyphiconglyphicon-statsglyphiconglyphicon-sd-videoglyphiconglyphicon-hd-videoglyphiconglyphicon-subtitlesglyphiconglyphicon-sound-stereoglyphiconglyphicon-sound-dolbyglyphiconglyphicon-sound-5-1glyphiconglyphicon-sound-6-1glyphiconglyphicon-sound-7-1glyphiconglyphicon-copyright-markglyphiconglyphicon-registration-markglyphiconglyphicon-cloud-downloadglyphiconglyphicon-cloud-uploadglyphiconglyphicon-tree-coniferglyphiconglyphicon-tree-deciduousglyphiconglyphicon-cdglyphiconglyphicon-save-fileglyphiconglyphicon-open-fileglyphiconglyphicon-level-upglyphiconglyphicon-copyglyphiconglyphicon-pasteglyphiconglyphicon-alertglyphiconglyphicon-equalizerglyphiconglyphicon-kingglyphiconglyphicon-queenglyphiconglyphicon-pawnglyphiconglyphicon-bishopglyphiconglyphicon-knightglyphiconglyphicon-baby-formulaglyphiconglyphicon-tentglyphiconglyphicon-blackboardglyphiconglyphicon-bedglyphiconglyphicon-appleglyphiconglyphicon-eraseglyphiconglyphicon-hourglassglyphiconglyphicon-lampglyphiconglyphicon-duplicateglyphiconglyphicon-piggy-bankglyphiconglyphicon-scissorsglyphiconglyphicon-bitcoinglyphiconglyphicon-btcglyphiconglyphicon-xbtglyphiconglyphicon-yenglyphiconglyphicon-jpyglyphiconglyphicon-rubleglyphiconglyphicon-rubglyphiconglyphicon-scaleglyphiconglyphicon-ice-lollyglyphiconglyphicon-ice-lolly-tastedglyphiconglyphicon-educationglyphiconglyphicon-option-horizontalglyphiconglyphicon-option-verticalglyphiconglyphicon-menu-hamburgerglyphiconglyphicon-modal-windowglyphiconglyphicon-oilglyphiconglyphicon-grainglyphiconglyphicon-sunglassesglyphiconglyphicon-text-sizeglyphiconglyphicon-text-colorglyphiconglyphicon-text-backgroundglyphiconglyphicon-object-align-topglyphiconglyphicon-object-align-bottomglyphiconglyphicon-object-align-horizontalglyphiconglyphicon-object-align-leftglyphiconglyphicon-object-align-verticalglyphiconglyphicon-object-align-rightglyphiconglyphicon-triangle-rightglyphiconglyphicon-triangle-leftglyphiconglyphicon-triangle-bottomglyphiconglyphicon-triangle-topglyphiconglyphicon-consoleglyphiconglyphicon-superscriptglyphiconglyphicon-subscriptglyphiconglyphicon-menu-leftglyphiconglyphicon-menu-rightglyphiconglyphicon-menu-downglyphiconglyphicon-menu-upHowtouseForperformancereasons,alliconsrequireabaseclassandindividualiconclass.Touse,placethefollowingcodejustaboutanywhere.Besuretoleaveaspacebetweentheiconandtextforproperpadding.Don'tmixwithothercomponentsIconclassescannotbedirectlycombinedwithothercomponents.Theyshouldnotbeusedalongwithotherclassesonthesameelement.Instead,addanestedandapplytheiconclassestothe.OnlyforuseonemptyelementsIconclassesshouldonlybeusedonelementsthatcontainnotextcontentandhavenochildelements.ChangingtheiconfontlocationBootstrapassumesiconfontfileswillbelocatedinthe../fonts/directory,relativetothecompiledCSSfiles.MovingorrenamingthosefontfilesmeansupdatingtheCSSinoneofthreeways:Changethe@icon-font-pathand/or@icon-font-namevariablesinthesourceLessfiles.UtilizetherelativeURLsoptionprovidedbytheLesscompiler.Changetheurl()pathsinthecompiledCSS.Usewhateveroptionbestsuitsyourspecificdevelopmentsetup.AccessibleiconsModernversionsofassistivetechnologieswillannounceCSSgeneratedcontent,aswellasspecificUnicodecharacters.Toavoidunintendedandconfusingoutputinscreenreaders(particularlywheniconsareusedpurelyfordecoration),wehidethemwiththearia-hidden="true"attribute.Ifyou'reusinganicontoconveymeaning(ratherthanonlyasadecorativeelement),ensurethatthismeaningisalsoconveyedtoassistivetechnologies–forinstance,includeadditionalcontent,visuallyhiddenwiththe.sr-onlyclass.Ifyou'recreatingcontrolswithnoothertext(suchasathatonlycontainsanicon),youshouldalwaysprovidealternativecontenttoidentifythepurposeofthecontrol,sothatitwillmakesensetousersofassistivetechnologies.Inthiscase,youcouldaddanaria-labelattributeonthecontrolitself.ExamplesUsetheminbuttons,buttongroupsforatoolbar,navigation,orprependedforminputs.StarStarStarStar Star Aniconusedinanalerttoconveythatit'sanerrormessage,withadditional.sr-onlytexttoconveythishinttousersofassistivetechnologies.Error:Enteravalidemailaddress Error: Enteravalidemailaddress DropdownsToggleable,contextualmenufordisplayinglistsoflinks.MadeinteractivewiththedropdownJavaScriptplugin.ExampleWrapthedropdown'striggerandthedropdownmenuwithin.dropdown,oranotherelementthatdeclaresposition:relative;.Thenaddthemenu'sHTML.DropdownActionAnotheractionSomethingelsehere Dropdown

Action

Anotheraction

Somethingelsehere

Separatedlink

Dropdownmenuscanbechangedtoexpandupwards(insteadofdownwards)byadding.dropuptotheparent.DropupActionAnotheractionSomethingelsehere Dropup

Action

Anotheraction

Somethingelsehere

Separatedlink

AlignmentBydefault,adropdownmenuisautomaticallypositioned100%fromthetopandalongtheleftsideofitsparent.Add.dropdown-menu-righttoa.dropdown-menutorightalignthedropdownmenu.MayrequireadditionalpositioningDropdownsareautomaticallypositionedviaCSSwithinthenormalflowofthedocument.Thismeansdropdownsmaybecroppedbyparentswithcertainoverflowpropertiesorappearoutofboundsoftheviewport.Addresstheseissuesonyourownastheyarise.Deprecated.pull-rightalignmentAsofv3.1.0,we'vedeprecated.pull-rightondropdownmenus.Toright-alignamenu,use.dropdown-menu-right.Right-alignednavcomponentsinthenavbaruseamixinversionofthisclasstoautomaticallyalignthemenu.Tooverrideit,use.dropdown-menu-left. ... HeadersAddaheadertolabelsectionsofactionsinanydropdownmenu.DropdownDropdownheaderActionAnotheractionSomethingelsehereDropdownheaderSeparatedlink ... Dropdownheader ... DividerAddadividertoseparateseriesoflinksinadropdownmenu.DropdownActionAnotheractionSomethingelsehereSeparatedlink ... ... DisabledmenuitemsAdd.disabledtoa

inthedropdowntodisablethelink.DropdownRegularlinkDisabledlinkAnotherlink

Regularlink

Disabledlink

Anotherlink

ButtongroupsGroupaseriesofbuttonstogetheronasinglelinewiththebuttongroup.AddonoptionalJavaScriptradioandcheckboxstylebehaviorwithourbuttonsplugin.Tooltips&popoversinbuttongroupsrequirespecialsettingWhenusingtooltipsorpopoversonelementswithina.btn-group,you'llhavetospecifytheoptioncontainer:'body'toavoidunwantedsideeffects(suchastheelementgrowingwiderand/orlosingitsroundedcornerswhenthetooltiporpopoveristriggered).EnsurecorrectroleandprovidealabelInorderforassistivetechnologies–suchasscreenreaders–toconveythataseriesofbuttonsisgrouped,anappropriateroleattributeneedstobeprovided.Forbuttongroups,thiswouldberole="group",whiletoolbarsshouldhavearole="toolbar".Oneexceptionaregroupswhichonlycontainasinglecontrol(forinstancethejustifiedbuttongroupswithelements)oradropdown.Inaddition,groupsandtoolbarsshouldbegivenanexplicitlabel,asmostassistivetechnologieswillotherwisenotannouncethem,despitethepresenceofthecorrectroleattribute.Intheexamplesprovidedhere,weusearia-label,butalternativessuchasaria-labelledbycanalsobeused.BasicexampleWrapaseriesofbuttonswith.btnin.btn-group.LeftMiddleRight Left Middle Right ButtontoolbarCombinesetsofintoaformorecomplexcomponents.12345678 ... ... ... SizingInsteadofapplyingbuttonsizingclassestoeverybuttoninagroup,justadd.btn-group-*toeach.btn-group,includingwhennestingmultiplegroups.LeftMiddleRightLeftMiddleRightLeftMiddleRightLeftMiddleRight... ... ... ...NestingPlacea.btn-groupwithinanother.btn-groupwhenyouwantdropdownmenusmixedwithaseriesofbuttons.12DropdownDropdownlinkDropdownlink 1 2 Dropdown

Dropdownlink

Dropdownlink

VerticalvariationMakeasetofbuttonsappearverticallystackedratherthanhorizontally.Splitbuttondropdownsarenotsupportedhere.ButtonButtonDropdownDropdownlinkDropdownlinkButtonButtonDropdownDropdownlinkDropdownlinkDropdownDropdownlinkDropdownlinkDropdownDropdownlinkDropdownlink ... JustifiedbuttongroupsMakeagroupofbuttonsstretchatequalsizestospantheentirewidthofitsparent.Alsoworkswithbuttondropdownswithinthebuttongroup.HandlingbordersDuetothespecificHTMLandCSSusedtojustifybuttons(namelydisplay:table-cell),thebordersbetweenthemaredoubled.Inregularbuttongroups,margin-left:-1pxisusedtostackthebordersinsteadofremovingthem.However,margindoesn'tworkwithdisplay:table-cell.Asaresult,dependingonyourcustomizationstoBootstrap,youmaywishtoremoveorre-colortheborders.IE8andbordersInternetExplorer8doesn'trenderbordersonbuttonsinajustifiedbuttongroup,whetherit'sonorelements.Togetaroundthat,wrapeachbuttoninanother.btn-group.See#12476formoreinformation.WithelementsJustwrapaseriesof.btnsin.btn-group.btn-group-justified.LeftMiddleRightLeftMiddleDropdownActionAnotheractionSomethingelsehereSeparatedlink ... LinksactingasbuttonsIftheelementsareusedtoactasbuttons–triggeringin-pagefunctionality,ratherthannavigatingtoanotherdocumentorsectionwithinthecurrentpage–theyshouldalsobegivenanappropriaterole="button".WithelementsTousejustifiedbuttongroupswithelements,youmustwrapeachbuttoninabuttongroup.Mostbrowsersdon'tproperlyapplyourCSSforjustificationtoelements,butsincewesupportbuttondropdowns,wecanworkaroundthat.LeftMiddleRight Left Middle Right ButtondropdownsUseanybuttontotriggeradropdownmenubyplacingitwithina.btn-groupandprovidingthepropermenumarkup.PlugindependencyButtondropdownsrequirethedropdownplugintobeincludedinyourversionofBootstrap.SinglebuttondropdownsTurnabuttonintoadropdowntogglewithsomebasicmarkupchanges.DefaultActionAnotheractionSomethingelsehereSeparatedlinkPrimaryActionAnotheractionSomethingelsehereSeparatedlinkSuccessActionAnotheractionSomethingelsehereSeparatedlinkInfoActionAnotheractionSomethingelsehereSeparatedlinkWarningActionAnotheractionSomethingelsehereSeparatedlinkDangerActionAnotheractionSomethingelsehereSeparatedlink Action

Action

Anotheraction

Somethingelsehere

Separatedlink

SplitbuttondropdownsSimilarly,createsplitbuttondropdownswiththesamemarkupchanges,onlywithaseparatebutton.DefaultToggleDropdownActionAnotheractionSomethingelsehereSeparatedlinkPrimaryToggleDropdownActionAnotheractionSomethingelsehereSeparatedlinkSuccessToggleDropdownActionAnotheractionSomethingelsehereSeparatedlinkInfoToggleDropdownActionAnotheractionSomethingelsehereSeparatedlinkWarningToggleDropdownActionAnotheractionSomethingelsehereSeparatedlinkDangerToggleDropdownActionAnotheractionSomethingelsehereSeparatedlink Action ToggleDropdown

Action

Anotheraction

Somethingelsehere

Separatedlink

SizingButtondropdownsworkwithbuttonsofallsizes.LargebuttonActionAnotheractionSomethingelsehereSeparatedlinkSmallbuttonActionAnotheractionSomethingelsehereSeparatedlinkExtrasmallbuttonActionAnotheractionSomethingelsehereSeparatedlink Largebutton ... Smallbutton ... Extrasmallbutton ... DropupvariationTriggerdropdownmenusaboveelementsbyadding.dropuptotheparent.DropupToggleDropdownActionAnotheractionSomethingelsehereSeparatedlinkRightdropupToggleDropdownActionAnotheractionSomethingelsehereSeparatedlink Dropup ToggleDropdown InputgroupsExtendformcontrolsbyaddingtextorbuttonsbefore,after,oronbothsidesofanytext-based.Use.input-groupwithan.input-group-addonor.input-group-btntoprependorappendelementstoasingle.form-control.TextualsonlyAvoidusingelementshereastheycannotbefullystyledinWebKitbrowsers.Avoidusingelementshereastheirrowsattributewillnotberespectedinsomecases.Tooltips&popoversininputgroupsrequirespecialsettingWhenusingtooltipsorpopoversonelementswithinan.input-group,you'llhavetospecifytheoptioncontainer:'body'toavoidunwantedsideeffects(suchastheelementgrowingwiderand/orlosingitsroundedcornerswhenthetooltiporpopoveristriggered).Don'tmixwithothercomponentsDonotmixformgroupsorgridcolumnclassesdirectlywithinputgroups.Instead,nesttheinputgroupinsideoftheformgrouporgrid-relatedelement.AlwaysaddlabelsScreenreaderswillhavetroublewithyourformsifyoudon'tincludealabelforeveryinput.Fortheseinputgroups,ensurethatanyadditionallabelorfunctionalityisconveyedtoassistivetechnologies.Theexacttechniquetobeused(visible<label>elements,<label>elementshiddenusingthe.sr-onlyclass,oruseofthearia-label,aria-labelledby,aria-describedby,titleorplaceholderattribute)andwhatadditionalinformationwillneedtobeconveyedwillvarydependingontheexacttypeofinterfacewidgetyou'reimplementing.Theexamplesinthissectionprovideafewsuggested,case-specificapproaches.BasicexamplePlaceoneadd-onorbuttononeithersideofaninput.Youmayalsoplaceoneonbothsidesofaninput.Wedonotsupportmultipleadd-ons(.input-group-addonor.input-group-btn)onasingleside.Wedonotsupportmultipleform-controlsinasingleinputgroup.@@example.com$.00YourvanityURLhttps://example.com/users/<divclass> <spanclass>@ <inputtype> <divclass> <inputtype> <spanclass>@example.com <divclass> <spanclass>$ <inputtype> <spanclass>.00 <labelfor>YourvanityURL</labelfor></spanclass></inputtype></spanclass></divclass></spanclass></inputtype></divclass></inputtype></spanclass></divclass></label> <divclass> <spanclass>https://example.com/users/ <inputtype> SizingAddtherelativeformsizingclassestothe.input-groupitselfandcontentswithinwillautomaticallyresize—noneedforrepeatingtheformcontrolsizeclassesoneachelement.@@@<divclass> <spanclass>@ <inputtype> <divclass> <spanclass>@ <inputtype> <divclass> <spanclass>@ <inputtype> CheckboxesandradioaddonsPlaceanycheckboxorradiooptionwithinaninputgroup'saddoninsteadoftext.<divclass> <divclass> <divclass> <spanclass> <inputtype> <inputtype> <!--/input-group--> <!--/.col-lg-6--> <divclass> <divclass> <spanclass> <inputtype> <inputtype> <!--/input-group--> <!--/.col-lg-6--> <!--/.row-->ButtonaddonsButtonsininputgroupsareabitdifferentandrequireoneextralevelofnesting.Insteadof.input-group-addon,you'llneedtouse.input-group-btntowrapthebuttons.Thisisrequiredduetodefaultbrowserstylesthatcannotbeoverridden.Go!Go!<divclass> <divclass> <divclass> <spanclass> <buttonclass>Go! <inputtype> <!--/input-group--> <!--/.col-lg-6--> <divclass> <divclass> <inputtype> <spanclass> <buttonclass>Go! <!--/input-group--> <!--/.col-lg-6--> <!--/.row-->ButtonswithdropdownsActionActionAnotheractionSomethingelsehereSeparatedlinkActionActionAnotheractionSomethingelsehereSeparatedlink<divclass> <divclass> <divclass> <divclass> <buttontype>Action<spanclass> <ulclass> <li><ahref>Action</ahref></li> <li><ahref>Anotheraction</ahref></li> <li><ahref>Somethingelsehere</ahref></li> <lirole> <li><ahref>Separatedlink</ahref></li> <!--/btn-group--> <inputtype> <!--/input-group--> <!--/.col-lg-6--> <divclass> <divclass> <inputtype> <divclass> <buttontype>Action<spanclass> <ulclass> <li><ahref>Action</ahref></li> <li><ahref>Anotheraction</ahref></li> <li><ahref>Somethingelsehere</ahref></li> <lirole> <li><ahref>Separatedlink</ahref></li> <!--/btn-group--> <!--/input-group--> <!--/.col-lg-6--> <!--/.row-->SegmentedbuttonsActionToggleDropdownActionAnotheractionSomethingelsehereSeparatedlinkActionToggleDropdownActionAnotheractionSomethingelsehereSeparatedlink<divclass> <divclass> <!--Buttonanddropdownmenu--> <inputtype> <divclass> <inputtype> <divclass> <!--Buttonanddropdownmenu--> MultiplebuttonsWhileyoucanonlyhaveoneadd-onperside,youcanhavemultiplebuttonsinsideasingle.input-group-btn.Action<divclass> <divclass> <!--Buttons--> <inputtype> <divclass> <inputtype> <divclass> <!--Buttons--> NavsNavsavailableinBootstraphavesharedmarkup,startingwiththebase.navclass,aswellassharedstates.Swapmodifierclassestoswitchbetweeneachstyle.UsingnavsfortabpanelsrequiresJavaScripttabspluginFortabswithtabbableareas,youmustusethetabsJavaScriptplugin.ThemarkupwillalsorequireadditionalroleandARIAattributes–seetheplugin'sexamplemarkupforfurtherdetails.MakenavsusedasnavigationaccessibleIfyouareusingnavstoprovideanavigationbar,besuretoaddarole="navigation"tothemostlogicalparentcontainerofthe<ul>,orwrapa<nav>elementaroundthewholenavigation.Donotaddtheroletothe<ul>itself,asthiswouldpreventitfrombeingannouncedasanactuallistbyassistivetechnologies.TabsNotethe.nav-tabsclassrequiresthe.navbaseclass.HomeProfileMessages<ulclass> <lirole><ahref>Home <lirole><ahref>Profile <lirole><ahref>Messages </ahref></lirole></ahref></lirole></ahref></lirole></ulclass> </ul>PillsTakethatsameHTML,butuse.nav-pillsinstead:HomeProfileMessages<ulclass> <lirole><ahref>Home <lirole><ahref>Profile <lirole><ahref>Messages </ahref></lirole></ahref></lirole></ahref></lirole></ulclass></nav> </ul>Pillsarealsoverticallystackable.Justadd.nav-stacked.HomeProfileMessages<ulclass> ... JustifiedEasilymaketabsorpillsequalwidthsoftheirparentatscreenswiderthan768pxwith.nav-justified.Onsmallerscreens,thenavlinksarestacked.Justifiednavbarnavlinksarecurrentlynotsupported.SafariandresponsivejustifiednavsAsofv9.1.2,Safariexhibitsabuginwhichresizingyourbrowserhorizontallycausesrenderingerrorsinthejustifiednavthatarecleareduponrefreshing.Thisbugisalsoshowninthejustifiednavexample.HomeProfileMessagesHomeProfileMessages<ulclass> ... <ulclass> ... DisabledlinksForanynavcomponent(tabsorpills),add.disabledforgraylinksandnohovereffects.LinkfunctionalitynotimpactedThisclasswillonlychangethe<a rel="nofollow">'sappearance,notitsfunctionality.UsecustomJavaScripttodisablelinkshere.ClickablelinkClickablelinkDisabledlink<ulclass> ... <lirole><ahref>Disabledlink</ahref></lirole></ulclass></a> ... UsingdropdownsAdddropdownmenuswithalittleextraHTMLandthedropdownsJavaScriptplugin.TabswithdropdownsHomeHelpDropdownActionAnotheractionSomethingelsehereSeparatedlink<ulclass> ... <lirole> <aclass> Dropdown<spanclass> <ulclass> ... ... PillswithdropdownsHomeHelpDropdownActionAnotheractionSomethingelsehereSeparatedlink<ulclass> ... <lirole> <aclass> Dropdown<spanclass> <ulclass> ... ... NavbarDefaultnavbarNavbarsareresponsivemetacomponentsthatserveasnavigationheadersforyourapplicationorsite.Theybegincollapsed(andaretoggleable)inmobileviewsandbecomehorizontalastheavailableviewportwidthincreases.Justifiednavbarnavlinksarecurrentlynotsupported.OverflowingcontentSinceBootstrapdoesn'tknowhowmuchspacethecontentinyournavbarneeds,youmightrunintoissueswithcontentwrappingintoasecondrow.Toresolvethis,youcan:Reducetheamountorwidthofnavbaritems.Hidecertainnavbaritemsatcertainscreensizesusingresponsiveutilityclasses.Changethepointatwhichyournavbarswitchesbetweencollapsedandhorizontalmode.Customizethe@grid-float-breakpointvariableoraddyourownmediaquery.RequiresJavaScriptpluginIfJavaScriptisdisabledandtheviewportisnarrowenoughthatthenavbarcollapses,itwillbeimpossibletoexpandthenavbarandviewthecontentwithinthe.navbar-collapse.TheresponsivenavbarrequiresthecollapseplugintobeincludedinyourversionofBootstrap.ChangingthecollapsedmobilenavbarbreakpointThenavbarcollapsesintoitsverticalmobileviewwhentheviewportisnarrowerthan@grid-float-breakpoint,andexpandsintoitshorizontalnon-mobileviewwhentheviewportisatleast@grid-float-breakpointinwidth.AdjustthisvariableintheLesssourcetocontrolwhenthenavbarcollapses/expands.Thedefaultvalueis768px(thesmallest"small"or"tablet"screen).MakenavbarsaccessibleBesuretousea<nav>elementor,ifusingamoregenericelementsuchasa<div>,addarole="navigation"toeverynavbartoexplicitlyidentifyitasalandmarkregionforusersofassistivetechnologies.TogglenavigationBrandLink(current)LinkDropdownActionAnotheractionSomethingelsehereSeparatedlinkOnemoreseparatedlinkSubmitLinkDropdownActionAnotheractionSomethingelsehereSeparatedlink<navclass> <divclass> <!--Brandandtogglegetgroupedforbettermobiledisplay--> <divclass> <buttontype> <spanclass>Togglenavigation <spanclass> <spanclass> <spanclass> <aclass>Brand </aclass></spanclass></spanclass></spanclass></spanclass></buttontype></divclass></divclass></navclass> </div> <!--Collectthenavlinks,forms,andothercontentfortoggling--> <divclass> <ulclass> <liclass><ahref>Link<spanclass>(current) <li><ahref>Link</ahref></li> <liclass> <ahref>Dropdown<spanclass> <ulclass> <li><ahref>Action</ahref></li> <li><ahref>Anotheraction</ahref></li> <li><ahref>Somethingelsehere</ahref></li> <lirole> <li><ahref>Separatedlink</ahref></li> <lirole> <li><ahref>Onemoreseparatedlink</ahref></li> <formclass> <divclass> <inputtype> <buttontype>Submit <ulclass> <li><ahref>Link</ahref></li> <liclass> <ahref>Dropdown<spanclass> <ulclass> <li><ahref>Action</ahref></li> <li><ahref>Anotheraction</ahref></li> <li><ahref>Somethingelsehere</ahref></li> <lirole> <li><ahref>Separatedlink</ahref></li> <!--/.navbar-collapse--> <!--/.container-fluid--> </lirole></ulclass></spanclass></ahref></liclass></ulclass></buttontype></inputtype></divclass></formclass></lirole></lirole></ulclass></spanclass></ahref></liclass></spanclass></ahref></liclass></ulclass></divclass></nav>BrandimageReplacethenavbarbrandwithyourownimagebyswappingthetextforan<img>.Sincethe.navbar-brandhasitsownpaddingandheight,youmayneedtooverridesomeCSSdependingonyourimage.<navclass> <divclass> <divclass> <aclass> <imgalt> FormsPlaceformcontentwithin.navbar-formforproperverticalalignmentandcollapsedbehaviorinnarrowviewports.Usethealignmentoptionstodecidewhereitresideswithinthenavbarcontent.Asaheadsup,.navbar-formsharesmuchofitscodewith.form-inlineviamixin.Someformcontrols,likeinputgroups,mayrequirefixedwidthstobeshowupproperlywithinanavbar.TogglenavigationBrandSubmit<formclass> <divclass> <inputtype> <buttontype>Submit MobiledevicecaveatsTherearesomecaveatsregardingusingformcontrolswithinfixedelementsonmobiledevices.Seeourbrowsersupportdocsfordetails.AlwaysaddlabelsScreenreaderswillhavetroublewithyourformsifyoudon'tincludealabelforeveryinput.Fortheseinlineforms,youcanhidethelabelsusingthe.sr-onlyclass.Therearefurtheralternativemethodsofprovidingalabelforassistivetechnologies,suchasthearia-label,aria-labelledbyortitleattribute.Ifnoneoftheseispresent,screenreadersmayresorttousingtheplaceholderattribute,ifpresent,butnotethatuseofplaceholderasareplacementforotherlabellingmethodsisnotadvised.ButtonsAddthe.navbar-btnclassto<button>elementsnotresidingina<form>toverticallycentertheminthenavbar.TogglenavigationBrandSignin<buttontype>Signin</buttontype> </form></button>Context-specificusageLikethestandardbuttonclasses,.navbar-btncanbeusedon<a rel="nofollow">and<input>elements.However,neither.navbar-btnnorthestandardbuttonclassesshouldbeusedon</a><a rel="nofollow">elementswithin.navbar-nav.TextWrapstringsoftextinanelementwith.navbar-text,usuallyona<p>tagforproperleadingandcolor.TogglenavigationBrandSignedinasMarkOtto<pclass>SignedinasMarkOtto</pclass></p>Non-navlinksForfolksusingstandardlinksthatarenotwithintheregularnavbarnavigationcomponent,usethe.navbar-linkclasstoaddthepropercolorsforthedefaultandinversenavbaroptions.TogglenavigationBrandSignedinasMarkOtto<pclass>Signedinas<ahref>MarkOtto</ahref></pclass></a></buttontype></inputtype></divclass></formclass></imgalt></aclass></divclass></divclass></navclass></ulclass></spanclass></aclass></lirole></ulclass></ulclass></spanclass></aclass></lirole></ulclass></ulclass></ulclass></ulclass></divclass></inputtype></divclass></inputtype></divclass></divclass></divclass></inputtype></divclass></inputtype></divclass></divclass></lirole></ulclass></spanclass></buttontype></divclass></inputtype></divclass></divclass></inputtype></lirole></ulclass></spanclass></buttontype></divclass></divclass></divclass></divclass></buttonclass></spanclass></inputtype></divclass></divclass></inputtype></buttonclass></spanclass></divclass></divclass></divclass></inputtype></inputtype></spanclass></divclass></divclass></inputtype></inputtype></spanclass></divclass></divclass></divclass></inputtype></spanclass></divclass></inputtype></spanclass></divclass></inputtype></spanclass></divclass></inputtype></spanclass></divclass></label>

ComponentalignmentAlignnavlinks,forms,buttons,ortext,usingthe.navbar-leftor.navbar-rightutilityclasses.BothclasseswilladdaCSSfloatinthespecifieddirection.Forexample,toalignnavlinks,puttheminaseparate

withtherespectiveutilityclassapplied.Theseclassesaremixin-edversionsof.pull-leftand.pull-right,butthey'rescopedtomediaqueriesforeasierhandlingofnavbarcomponentsacrossdevicesizes.RightaligningmultiplecomponentsNavbarscurrentlyhavealimitationwithmultiple.navbar-rightclasses.Toproperlyspacecontent,weusenegativemarginonthelast.navbar-rightelement.Whentherearemultipleelementsusingthatclass,thesemarginsdon'tworkasintended.We'llrevisitthiswhenwecanrewritethatcomponentinv4.FixedtotopAdd.navbar-fixed-topandincludea.containeror.container-fluidtocenterandpadnavbarcontent.TogglenavigationBrandHomeLinkLink ... BodypaddingrequiredThefixednavbarwilloverlayyourothercontent,unlessyouaddpaddingtothetopofthe.Tryoutyourownvaluesoruseoursnippetbelow.Tip:Bydefault,thenavbaris50pxhigh.body{padding-top:70px;}MakesuretoincludethisafterthecoreBootstrapCSS.FixedtobottomAdd.navbar-fixed-bottomandincludea.containeror.container-fluidtocenterandpadnavbarcontent.TogglenavigationBrandHomeLinkLink ... BodypaddingrequiredThefixednavbarwilloverlayyourothercontent,unlessyouaddpaddingtothebottomofthe.Tryoutyourownvaluesoruseoursnippetbelow.Tip:Bydefault,thenavbaris50pxhigh.body{padding-bottom:70px;}MakesuretoincludethisafterthecoreBootstrapCSS.StatictopCreateafull-widthnavbarthatscrollsawaywiththepagebyadding.navbar-static-topandincludea.containeror.container-fluidtocenterandpadnavbarcontent.Unlikethe.navbar-fixed-*classes,youdonotneedtochangeanypaddingonthebody.TogglenavigationBrandHomeLinkLink ... InvertednavbarModifythelookofthenavbarbyadding.navbar-inverse.TogglenavigationBrandHomeLinkLink ... BreadcrumbsIndicatethecurrentpage'slocationwithinanavigationalhierarchy.SeparatorsareautomaticallyaddedinCSSthrough:beforeandcontent.HomeHomeLibraryHomeLibraryData
• Home
• Library
Data PaginationProvidepaginationlinksforyoursiteorappwiththemulti-pagepaginationcomponent,orthesimplerpageralternative.DefaultpaginationSimplepaginationinspiredbyRdio,greatforappsandsearchresults.Thelargeblockishardtomiss,easilyscalable,andprovideslargeclickareas.«12345»
• «
• 1
• 2
• 3
• 4
• 5
• »

LabellingthepaginationcomponentThepaginationcomponentshouldbewrappedinaSizingFancylargerorsmallerpagination?Add.pagination-lgor.pagination-smforadditionalsizes.«12345»«12345»«12345»... ... ...PagerQuickpreviousandnextlinksforsimplepaginationimplementationswithlightmarkupandstyles.It'sgreatforsimplesiteslikeblogsormagazines.DefaultexampleBydefault,thepagercenterslinks.PreviousNext

Previous

Next

AlignedlinksAlternatively,youcanaligneachlinktothesides:←OlderNewer→ ←Older Newer→ OptionaldisabledstatePagerlinksalsousethegeneral.disabledutilityclassfromthepagination.←OlderNewer→ ←Older Newer→ LabelsExampleExampleheadingNewExampleheadingNewExampleheadingNewExampleheadingNewExampleheadingNewExampleheadingNew

ExampleheadingNew

AvailablevariationsAddanyofthebelowmentionedmodifierclassestochangetheappearanceofalabel.DefaultPrimarySuccessInfoWarningDangerDefault Primary Success Info Warning DangerHavetonsoflabels?Renderingproblemscanarisewhenyouhavedozensofinlinelabelswithinanarrowcontainer,eachcontainingitsowninline-blockelement(likeanicon).Thewayaroundthisissettingdisplay:inline-block;.Forcontextandanexample,see#13219.BadgesEasilyhighlightneworunreaditemsbyaddingatolinks,Bootstrapnavs,andmore.Inbox42Messages4Inbox42 Messages4 SelfcollapsingWhentherearenoneworunreaditems,badgeswillsimplycollapse(viaCSS's:emptyselector)providednocontentexistswithin.Cross-browsercompatibilityBadgeswon'tselfcollapseinInternetExplorer8becauseitlackssupportforthe:emptyselector.AdaptstoactivenavstatesBuilt-instylesareincludedforplacingbadgesinactivestatesinpillnavigations.Home42ProfileMessages3 Home42 Profile Messages3 JumbotronAlightweight,flexiblecomponentthatcanoptionallyextendtheentireviewporttoshowcasekeycontentonyoursite.Hello,world!Thisisasimpleherounit,asimplejumbotron-stylecomponentforcallingextraattentiontofeaturedcontentorinformation.Learnmore

Hello,world!

...

Learnmore

Tomakethejumbotronfullwidth,andwithoutroundedcorners,placeitoutsideall.containersandinsteadadda.containerwithin. ... PageheaderAsimpleshellforanh1toappropriatelyspaceoutandsegmentsectionsofcontentonapage.Itcanutilizetheh1'sdefaultsmallelement,aswellasmostothercomponents(withadditionalstyles).ExamplepageheaderSubtextforheader

ExamplepageheaderSubtextforheader

ThumbnailsExtendBootstrap'sgridsystemwiththethumbnailcomponenttoeasilydisplaygridsofimages,videos,text,andmore.Ifyou'relookingforPinterest-likepresentationofthumbnailsofvaryingheightsand/orwidths,you'llneedtouseathird-partypluginsuchasMasonry,Isotope,orSalvattore.DefaultexampleBydefault,Bootstrap'sthumbnailsaredesignedtoshowcaselinkedimageswithminimalrequiredmarkup. ... CustomcontentWithabitofextramarkup,it'spossibletoaddanykindofHTMLcontentlikeheadings,paragraphs,orbuttonsintothumbnails.ThumbnaillabelCrasjustoodio,dapibusacfacilisisin,egestasegetquam.Donecidelitnonmiportagravidaategetmetus.Nullamiddoloridnibhultriciesvehiculautidelit.ButtonButtonThumbnaillabelCrasjustoodio,dapibusacfacilisisin,egestasegetquam.Donecidelitnonmiportagravidaategetmetus.Nullamiddoloridnibhultriciesvehiculautidelit.ButtonButtonThumbnaillabelCrasjustoodio,dapibusacfacilisisin,egestasegetquam.Donecidelitnonmiportagravidaategetmetus.Nullamiddoloridnibhultriciesvehiculautidelit.ButtonButton

Thumbnaillabel

...

ButtonButton

AlertsProvidecontextualfeedbackmessagesfortypicaluseractionswiththehandfulofavailableandflexiblealertmessages.ExamplesWrapanytextandanoptionaldismissbuttonin.alertandoneofthefourcontextualclasses(e.g.,.alert-success)forbasicalertmessages.NodefaultclassAlertsdon'thavedefaultclasses,onlybaseandmodifierclasses.Adefaultgrayalertdoesn'tmaketoomuchsense,soyou'rerequiredtospecifyatypeviacontextualclass.Choosefromsuccess,info,warning,ordanger.Welldone!Yousuccessfullyreadthisimportantalertmessage.Headsup!Thisalertneedsyourattention,butit'snotsuperimportant.Warning!Bettercheckyourself,you'renotlookingtoogood.Ohsnap!Changeafewthingsupandtrysubmittingagain.... ... ... ...DismissiblealertsBuildonanyalertbyaddinganoptional.alert-dismissibleandclosebutton.RequiresJavaScriptalertpluginForfullyfunctioning,dismissiblealerts,youmustusethealertsJavaScriptplugin.×Warning!Bettercheckyourself,you'renotlookingtoogood. × Warning!Bettercheckyourself,you'renotlookingtoogood. EnsureproperbehavioracrossalldevicesBesuretousetheelementwiththedata-dismiss="alert"dataattribute.LinksinalertsUsethe.alert-linkutilityclasstoquicklyprovidematchingcoloredlinkswithinanyalert.Welldone!Yousuccessfullyreadthisimportantalertmessage.Headsup!Thisalertneedsyourattention,butit'snotsuperimportant.Warning!Bettercheckyourself,you'renotlookingtoogood.Ohsnap!Changeafewthingsupandtrysubmittingagain. ... ... ... ... ProgressbarsProvideup-to-datefeedbackontheprogressofaworkfloworactionwithsimpleyetflexibleprogressbars.Cross-browsercompatibilityProgressbarsuseCSS3transitionsandanimationstoachievesomeoftheireffects.ThesefeaturesarenotsupportedinInternetExplorer9andbeloworolderversionsofFirefox.Opera12doesnotsupportanimations.ContentSecurityPolicy(CSP)compatibilityIfyourwebsitehasaContentSecurityPolicy(CSP)whichdoesn'tallowstyle-src'unsafe-inline',thenyouwon'tbeabletouseinlinestyleattributestosetprogressbarwidthsasshowninourexamplesbelow.AlternativemethodsforsettingthewidthsthatarecompatiblewithstrictCSPsincludeusingalittlecustomJavaScript(thatsetselement.style.width)orusingcustomCSSclasses.BasicexampleDefaultprogressbar.60%Complete 60%Complete WithlabelRemovethewith.sr-onlyclassfromwithintheprogressbartoshowavisiblepercentage.60% 60% Toensurethatthelabeltextremainslegibleevenforlowpercentages,consideraddingamin-widthtotheprogressbar.0%2% 0% 2% ContextualalternativesProgressbarsusesomeofthesamebuttonandalertclassesforconsistentstyles.40%Complete(success)20%Complete60%Complete(warning)80%Complete(danger) 40%Complete(success) 20%Complete 60%Complete(warning) 80%Complete(danger) StripedUsesagradienttocreateastripedeffect.NotavailableinIE9andbelow.40%Complete(success)20%Complete60%Complete(warning)80%Complete(danger) 40%Complete(success) 20%Complete 60%Complete(warning) 80%Complete(danger) AnimatedAdd.activeto.progress-bar-stripedtoanimatethestripesrighttoleft.NotavailableinIE9andbelow.45%CompleteToggleanimation 45%Complete StackedPlacemultiplebarsintothesame.progresstostackthem.35%Complete(success)20%Complete(warning)10%Complete(danger) 35%Complete(success) 20%Complete(warning) 10%Complete(danger) MediaobjectAbstractobjectstylesforbuildingvarioustypesofcomponents(likeblogcomments,Tweets,etc)thatfeaturealeft-orright-alignedimagealongsidetextualcontent.DefaultmediaThedefaultmediadisplaysamediaobject(images,video,audio)totheleftorrightofacontentblock.MediaheadingCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.Fuscecondimentumnuncacnisivulputatefringilla.Doneclaciniaconguefelisinfaucibus.MediaheadingCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.Fuscecondimentumnuncacnisivulputatefringilla.Doneclaciniaconguefelisinfaucibus.NestedmediaheadingCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.Fuscecondimentumnuncacnisivulputatefringilla.Doneclaciniaconguefelisinfaucibus.MediaheadingCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.MediaheadingCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis. Mediaheading ... Theclasses.pull-leftand.pull-rightalsoexistandwerepreviouslyusedaspartofthemediacomponent,butaredeprecatedforthatuseasofv3.3.0.Theyareapproximatelyequivalentto.media-leftand.media-right,exceptthat.media-rightshouldbeplacedafterthe.media-bodyinthehtml.MediaalignmentTheimagesorothermediacanbealignedtop,middle,orbottom.Thedefaultistopaligned.TopalignedmediaCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.Fuscecondimentumnuncacnisivulputatefringilla.Doneclaciniaconguefelisinfaucibus.Donecsedodiodui.Nullamquisrisusegeturnamollisornareveleuleo.Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.MiddlealignedmediaCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.Fuscecondimentumnuncacnisivulputatefringilla.Doneclaciniaconguefelisinfaucibus.Donecsedodiodui.Nullamquisrisusegeturnamollisornareveleuleo.Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.BottomalignedmediaCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.Fuscecondimentumnuncacnisivulputatefringilla.Doneclaciniaconguefelisinfaucibus.Donecsedodiodui.Nullamquisrisusegeturnamollisornareveleuleo.Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus. Middlealignedmedia ... MedialistWithabitofextramarkup,youcanusemediainsidelist(usefulforcommentthreadsorarticleslists).MediaheadingCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.NestedmediaheadingCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.NestedmediaheadingCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis.NestedmediaheadingCrassitametnibhlibero,ingravidanulla.Nullavelmetusscelerisqueantesollicitudincommodo.Craspurusodio,vestibuluminvulputateat,tempusviverraturpis. Mediaheading ... ListgroupListgroupsareaflexibleandpowerfulcomponentfordisplayingnotonlysimplelistsofelements,butcomplexoneswithcustomcontent.BasicexampleThemostbasiclistgroupissimplyanunorderedlistwithlistitems,andtheproperclasses.Builduponitwiththeoptionsthatfollow,oryourownCSSasneeded.CrasjustoodioDapibusacfacilisisinMorbileorisusPortaacconsecteturacVestibulumateros Crasjustoodio Dapibusacfacilisisin Morbileorisus Portaacconsecteturac Vestibulumateros BadgesAddthebadgescomponenttoanylistgroupitemanditwillautomaticallybepositionedontheright.14Crasjustoodio2Dapibusacfacilisisin1Morbileorisus 14 Crasjustoodio LinkeditemsLinkifylistgroupitemsbyusinganchortagsinsteadoflistitems(thatalsomeansaparent

insteadofan

).Noneedforindividualparentsaroundeachelement.CrasjustoodioDapibusacfacilisisinMorbileorisusPortaacconsecteturacVestibulumateros Crasjustoodio Dapibusacfacilisisin Morbileorisus Portaacconsecteturac Vestibulumateros

ButtonitemsListgroupitemsmaybebuttonsinsteadoflistitems(thatalsomeansaparent

insteadofan

).Noneedforindividualparentsaroundeachelement.Don'tusethestandard.btnclasseshere.CrasjustoodioDapibusacfacilisisinMorbileorisusPortaacconsecteturacVestibulumateros Crasjustoodio Dapibusacfacilisisin Morbileorisus Portaacconsecteturac Vestibulumateros

DisableditemsAdd.disabledtoa.list-group-itemtograyitouttoappeardisabled.CrasjustoodioDapibusacfacilisisinMorbileorisusPortaacconsecteturacVestibulumateros Crasjustoodio Dapibusacfacilisisin Morbileorisus Portaacconsecteturac Vestibulumateros ContextualclassesUsecontextualclassestostylelistitems,defaultorlinked.Alsoincludes.activestate.DapibusacfacilisisinCrassitametnibhliberoPortaacconsecteturacVestibulumaterosDapibusacfacilisisinCrassitametnibhliberoPortaacconsecteturacVestibulumateros Dapibusacfacilisisin Crassitametnibhlibero Portaacconsecteturac Vestibulumateros Dapibusacfacilisisin Crassitametnibhlibero Portaacconsecteturac Vestibulumateros CustomcontentAddnearlyanyHTMLwithin,evenforlinkedlistgroupsliketheonebelow.ListgroupitemheadingDonecidelitnonmiportagravidaategetmetus.Maecenasseddiamegetrisusvariusblandit.ListgroupitemheadingDonecidelitnonmiportagravidaategetmetus.Maecenasseddiamegetrisusvariusblandit.ListgroupitemheadingDonecidelitnonmiportagravidaategetmetus.Maecenasseddiamegetrisusvariusblandit. Listgroupitemheading ... PanelsWhilenotalwaysnecessary,sometimesyouneedtoputyourDOMinabox.Forthosesituations,trythepanelcomponent.BasicexampleBydefault,allthe.paneldoesisapplysomebasicborderandpaddingtocontainsomecontent.Basicpanelexample Basicpanelexample PanelwithheadingEasilyaddaheadingcontainertoyourpanelwith.panel-heading.Youmayalsoincludeany

-witha.panel-titleclasstoaddapre-styledheading.However,thefontsizesof-areoverriddenby.panel-heading.Forproperlinkcoloring,besuretoplacelinksinheadingswithin.panel-title.PanelheadingwithouttitlePanelcontentPaneltitlePanelcontent Panelheadingwithouttitle Panelcontent Paneltitle Panelcontent PanelwithfooterWrapbuttonsorsecondarytextin.panel-footer.Notethatpanelfootersdonotinheritcolorsandborderswhenusingcontextualvariationsastheyarenotmeanttobeintheforeground.PanelcontentPanelfooter Panelcontent Panelfooter ContextualalternativesLikeothercomponents,easilymakeapanelmoremeaningfultoaparticularcontextbyaddinganyofthecontextualstateclasses.PaneltitlePanelcontentPaneltitlePanelcontentPaneltitlePanelcontentPaneltitlePanelcontentPaneltitlePanelcontent... ... ... ... ...WithtablesAddanynon-bordered.tablewithinapanelforaseamlessdesign.Ifthereisa.panel-body,weaddanextrabordertothetopofthetableforseparation.PanelheadingSomedefaultpanelcontenthere.Nullavitaeelitlibero,apharetraaugue.Aeneanlaciniabibendumnullasedconsectetur.Aeneaneuleoquam.Pellentesqueornaresemlaciniaquamvenenatisvestibulum.Nullamiddoloridnibhultriciesvehiculautidelit.#FirstNameLastNameUsername1MarkOtto@mdo2JacobThornton@fat3LarrytheBird@twitter Panelheading ... ... Ifthereisnopanelbody,thecomponentmovesfrompanelheadertotablewithoutinterruption.Panelheading#FirstNameLastNameUsername1MarkOtto@mdo2JacobThornton@fat3LarrytheBird@twitter Panelheading ... WithlistgroupsEasilyincludefull-widthlistgroupswithinanypanel.PanelheadingSomedefaultpanelcontenthere.Nullavitaeelitlibero,apharetraaugue.Aeneanlaciniabibendumnullasedconsectetur.Aeneaneuleoquam.Pellentesqueornaresemlaciniaquamvenenatisvestibulum.Nullamiddoloridnibhultriciesvehiculautidelit.CrasjustoodioDapibusacfacilisisinMorbileorisusPortaacconsecteturacVestibulumateros Panelheading ... Crasjustoodio Dapibusacfacilisisin Morbileorisus Portaacconsecteturac Vestibulumateros ResponsiveembedAllowbrowserstodeterminevideoorslideshowdimensionsbasedonthewidthoftheircontainingblockbycreatinganintrinsicratiothatwillproperlyscaleonanydevice.Rulesaredirectlyappliedto,,,andelements;optionallyuseanexplicitdescendantclass.embed-responsive-itemwhenyouwanttomatchthestylingforotherattributes.Pro-Tip!Youdon'tneedtoincludeframeborder="0"inyoursasweoverridethatforyou. WellsDefaultwellUsethewellasasimpleeffectonanelementtogiveitaninseteffect.Look,I'minawell!...OptionalclassesControlpaddingandroundedcornerswithtwooptionalmodifierclasses.Look,I'minalargewell!...Look,I'minasmallwell!...GlyphiconsAvailableglyphsHowtouseExamplesDropdownsExampleAlignmentHeadersDividerDisabledmenuitemsButtongroupsBasicexampleButtontoolbarSizingNestingVerticalvariationJustifiedbuttongroupsButtondropdownsSinglebuttondropdownsSplitbuttondropdownsSizingDropupvariationInputgroupsBasicexampleSizingCheckboxandradiosaddonsButtonaddonsButtonswithdropdownsSegmentedbuttonsMultiplebuttonsNavsTabsPillsJustifiedDisabledlinksUsingdropdownsNavbarDefaultnavbarBrandimageFormsButtonsTextNon-navlinksComponentalignmentFixedtotopFixedtobottomStatictopInvertednavbarBreadcrumbsPaginationDefaultpaginationPagerLabelsBadgesJumbotronPageheaderThumbnailsDefaultexampleCustomcontentAlertsExamplesDismissiblealertsLinksinalertsProgressbarsBasicexampleWithlabelContextualalternativesStripedAnimatedStackedMediaobjectDefaultmediaMedialistListgroupBasicexampleBadgesLinkeditemsButtonitemsDisableditemsContextualclassesCustomcontentPanelsBasicexamplePanelwithheadingPanelwithfooterContextualalternativesWithtablesWithlistgroupsResponsiveembedWellsBacktotopPreviewtheme