Log in
badge Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Badges Documentation example badge small count labeling component background color use background utility class quickly change appearance badge note Bootstrap default light likely need text color utility like dark proper styling background utility set background color design Primary secondary Success Danger Warning Info Light Dark span class badge primary Primary span class badge secondary Secondary span class badge success Success span class badge danger Danger span class badge warning text dark warning span class badge info text dark Info span class badge light text dark Light span class badge dark Dark pill badge use pill utility class badge rounded large border radius design Primary secondary Success Danger Warning Info Light Dark span class badge rounded pill primary Primary span class badge rounded pill secondary Secondary span class badge rounded pill success Success span class badge rounded pill danger Danger span class badge rounded pill warning text dark warning span class badge rounded pill info text dark Info span class badge rounded pill light text dark Light span class badge rounded pill dark Dark button Badges link button provide counter design Notifications button type button class primary Notifications span class badge secondary Positioned Use utility modify position corner link button design unread message button type button class primary position relative span class position absolute translate middle badge round pill danger span class visually hide unread message replace class utility count generic indicator design Profile New alert button type button class primary position relative profile span class position absolute translate middle danger border border light round circle span class visually hide new alert Dot Use dot class element quickly provide actionable badge hover focus state design Primary secondary Success Danger Warning Info Light Dark span class span class badge dot primary span Primary span class span class badge dot secondary span class text secondary Secondary span class span class badge dot success span class text success Success span class span class badge dot danger span class text danger Danger span class span class badge dot warning span class text warning warning span class span class badge dot info span class text info Info span class span class badge dot light span class text light light span class span class badge dot dark span class text dark Dark Simple Badge Badges scale match size immediate parent element relative font sizing unit design Example head New Example head New Example head New Example head New Example head New Example head New Example head span class badge secondary New Example head span class badge secondary New Example head span class badge secondary New Example head span class badge secondary New Example head span class badge secondary New Example head span class badge secondary New Text truncation Geeks Bootstrap Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Text truncation truncate long string text ellipsis long content add truncate class truncate text ellipsis require display inline block display block design text long truncate display text long truncate display div class row div class text truncate text long truncate display span class inline block text truncate style max width text long truncate display Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts automatically update Bootstrap navigation list group component base scroll position indicate link currently active viewport Scroll area watch active class change item highlight design legging brunch art party Pitchfork sell qui farm table bicycle right anim keffiyeh carle cardigan photo booth wolf moon sweater jean short hoodie minim qui probably hear cardigan trust fund culpa wes anderson aesthetic Nihil tattooed cre irony keffiyeh mustache skateboard pitchfork beard beard carle Tattooed sweater food truck quis non vinyl wes anderson sartorial carle non aesthetic exercitation quis Brooklyn craft beer vice craft beer skateboard bicycle right level single origin coffee high life vinyl echo park pitchfork est messenger bag cre sustainable fanny pack echo park master cleanse craft beer single origin coffee wayfarer master cleanse probably hear art party fanny pack tattooed cardigan wolf sartorial keffiyeh sustainable wolf portland sell brooklyn legging brunch art party Pitchfork sell qui farm table bicycle right anim keffiyeh carle cardigan photo booth wolf moon sweater jean short hoodie minim qui probably hear cardigan trust fund culpa wes anderson aesthetic Nihil tattooed cre irony keffiyeh twee culpa messenger bag delectus food truck cliche irony probably hear hoodie gluten free sell brunch sweater keffiyeh cardigan craft beer readymade chambray anim nav class light light class brand class nav nav pill class nav item class nav link fat class nav item class nav link class nav item class nav link toggle data toggle role button aria true aria expand false div class menu class item class item div role separator class divider class item div data spy scroll data target data offset fat example nest nav work nest nest parent scroll area watch active class change design Item Item Item Item Item Item Item Item exercitation aute aute aute Qui non non anim item esse aute exercitation minim exercitation exercitation nisi anim anim item nisi culpa culpa anim esse anim item anim sit exercitation Esse anim esse item Quis anim culpa culpa aute culpa item anim exercitation aute exercitation esse exercitation culpa exercitation est esse esse qui item sit culpa minim aute anim exercitation exercitation veniam culpa nav class light light class brand nav class nav nav pill flex column class nav link item nav class nav nav pill flex column class nav link item class nav link item class nav link item class nav link Item nav class nav nav pill flex column class nav link item class nav link item div data spy scroll data target data offset item item item item Item item item example list group work group Scroll area list group watch active class change design Item Item Item Item Item exercitation aute aute aute Qui non non anim item anim sit exercitation Esse anim esse item Quis anim culpa culpa aute culpa item Quis anim culpa culpa aute culpa div list example class list group class list group item list group item action list item class list group item list group item action list item class list group item list group item action list Item class list group item list group item action list Item div data spy scroll data target list example data offset class example list item list item list item list item Forms Geeks Bootstrap Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Forms Examples usage guideline form control style layout option custom component create wide variety form form Control Textual form control like style control class include style general appearance focus state size Input Design Input div class label class form label Input input type text class form control placeholder Input Text Email Design Email div class label class form label email Email input type email email class form control placeholder Password Design Password div class label class form label password Password input type password password class form control value Design hello World div class label input class form label class form control input row hello World Search Design Search div class label search input class form label search input class form control type search search input value search component Design div class label input class form label input class form control type input value Phone Design Phone div class label class form label phone input class form control type tel value size Set height class like control control design div class input type text class form control form control placeholder large input div class input type text class form control placeholder normal input div class input type text class form control form control placeholder small input Select customize native custom change element initial appearance design Select Optional open select menu div class label class form label Select span class text secondary Optional select class form select aria label default select example option select open select menu option value option value option value Multiple Select Design multiple select open select menu div class label class form label Select span class text secondary Optional select class form select aria label default select example option select open select menu option value option value option value Select Menu Sizes choose small large custom select match similarly sized text input design open select menu Open select menu select class form select form select option select open select menu option value option value option value select class form select form select option select open select menu option value option value option value check radio create consistent cross browser cross device radio completely rewrite check component Checks Design Default Checked div class form check input class form check input type value label class form check label Default div class form check input class form check input type value check label class form check label Checked Indeterminate utilize indeterminate pseudo class manually set available attribute specify design Indeterminate div class form check input class form check input type value label class form check label Default div class form check input class form check input type value check label class form check label Checked Disabled Add disabled attribute associated automatically style match light color help indicate input state design Disabled Disabled check div class form check input class form check input type value disabled label class form check label Disabled div class form check input class form check input type value check disabled label class form check label Disabled check Radios Design Default radio Default check radio div class form check input class form check input type radio label class form check label Default radio div class form check input class form check input type radio check label class form check label Default check radio Disabled Add disabled attribute associated automatically style match light color help indicate input state design Disabled radio Disabled check radio div class form check input class form check input type radio disabled label class form check label disabled radio div class form check input class form check input type radio check disabled label class form check label Disabled check radio switch switch markup custom use switch class render toggle switch consider accurately convey nature control assistive technology support role old assistive technology simply announce regular fallback switch support disabled attribute design Default switch input check switch input Disabled switch input Disabled check switch input div class form check form switch input class form check input type role switch label class form check label Default switch input div class form check form switch input class form check input type role switch check label class form check label check switch input div class form check form switch input class form check input type role switch disabled label class form check label disabled switch input div class form check form switch input class form check input type role switch check disabled label class form check label disabled check switch input validation state provide valuable actionable feedback user form validation design look good look good choose city provide valid city State Choose select valid state Zip provide valid zip agree term condition agree submit submit form form class row need validation div class col label class form label input type text class form control value Mark require div class valid feedback look good div class col label class form label input type text class form control value Otto require div class valid feedback look good div class col label class form label div class input group validation span class input group text input type text class form control aria require div class invalid feedback choose div class col label class form label City input type text class form control require div class invalid feedback provide valid city div class col label class form label state select class form select require option select disabled value Choose option div class invalid feedback select valid state div class col label class form label Zip input type text class form control require div class invalid feedback provide valid zip div class div class form check input class form check input type value require label class form check label agree term condition div class invalid feedback agree submit div class button class primary type submit submit form Disabled Fields Use disabled attribute control Design disabled example disabled input disabled select menu Disabled select check submit form disabled legend disabled example div class label class form label disabled input input type text class form control placeholder disabled input div class label class form label disabled select menu select class form select option disabled select div class div class form check input class form check input type disabled label class form check label check button type submit class primary Submit range create custom control range track background thumb value style appear browser support fill track left right thumb means visually indicate progress currently support design Example range label class form label Example range input type range class form range Disabled Add disabled boolean attribute input grayed appearance remove pointer event design Disabled range label class form label disabled range input type range class form range disabled Mix max Add disabled boolean attribute input grayed appearance remove pointer event design Example range label class form label Example range input type range class form range min max step default range input snap integer value change specify step value example double number step design Example range label class form label Example range input type range class form range min max step Accordions Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Accordions Build vertically collapse accordion combination Collapse Example click accordion expand collapse accordion content design Accordion Item item accordion body hide default collapse add appropriate class use style element class control overall appearance showing hide transition modify custom override default variable worth note body transition limit overflow accordion Item second item accordion body hide default collapse add appropriate class use style element class control overall appearance showing hide transition modify custom override default variable worth note body transition limit overflow Accordion Item item accordion body hide default collapse add appropriate class use style element class control overall appearance showing hide transition modify custom override default variable worth note body transition limit overflow div class accordion div class accordion item class accordion header button class accordion button type button data toggle collapse data target aria expand true aria control Accordion Item div class accordion collapse collapse aria data parent div class accordion body strong item accordion body hide default collapse add appropriate class use style element class control overall appearance showing hide transition modify custom override default variable worth note code body transition limit overflow div class accordion item class accordion header button class accordion button collapse type button data toggle collapse data target aria expand false aria control accordion Item div class accordion collapse collapse aria data parent div class accordion body strong second item accordion body hide default collapse add appropriate class use style element class control overall appearance showing hide transition modify custom override default variable worth note code body transition limit overflow div class accordion item class accordion header button class accordion button collapse type button data toggle collapse data target aria expand false aria control Accordion Item div class accordion collapse collapse aria data parent div class accordion body strong item accordion body hide default collapse add appropriate class use style element class control overall appearance showing hide transition modify custom override default variable worth note code body transition limit overflow Flush Add flush remove default background color border rounded corner render accordion edge edge parent container design Accordion Item Placeholder content accordion intend demonstrate flush class item accordion body accordion Item Placeholder content accordion intend demonstrate flush class second item accordion body let imagine fill actual content Accordion Item Placeholder content accordion intend demonstrate flush class item accordion body exciting happen term content fill space look glance bit representative look real world application div class accordion accordion flush div class accordion item class accordion header flush button class accordion button collapse type button data toggle collapse data target flush aria expand false aria control flush Accordion Item div flush class accordion collapse collapse aria flush data parent div class accordion body placeholder content accordion intend demonstrate code flush class item accordion body div class accordion item class accordion header flush button class accordion button collapse type button data toggle collapse data target flush aria expand false aria control flush Accordion Item div flush class accordion collapse collapse aria flush data parent div class accordion body placeholder content accordion intend demonstrate code flush class second item accordion body let imagine fill actual content div class accordion item class accordion header flush button class accordion button collapse type button data toggle collapse data target flush aria expand false aria control flush Accordion Item div flush class accordion collapse collapse aria flush data parent div class accordion body placeholder content accordion intend demonstrate code flush class item accordion body exciting happen term content fill space look glance bit representative look real world application Introduction Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Introduction start Dash Responsive Template build responsive mobile site Bootstrap template starter page Quick start link rel script libs dist script libs bootstrap dist script starter template sure doc set late design development standard mean include viewport meta tag proper responsive behavior doc look like lang head meta meta viewport content width device width initial shrink fit link rel title Hello world body Hello world script libs dist script libs bootstrap dist script need overall page requirement visit Layout doc official example start lay site content component important global Dash employ handful important global style setting need aware exclusively gear normalization cross browser style let dive Dash require use funky incomplete styling include cause considerable hiccup lang responsive meta tag Dash develop mobile strategy optimize code mobile device scale component necessary medium query ensure proper rendering touch zooming device add responsive viewport meta tag meta viewport content width device width initial shrink fit example action starter template vertical rule Geeks Bootstrap Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Vertical rule use custom vertical rule helper create vertical divider like element example Use stack button element Design div class vertical rule scale height flex layout Design div class flex style height div class stack stack design item second item item div class div class light border item div class light border auto second item div class div class light border item Pagination Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Pagination Documentation example show pagination indicate series relate content exist multiple page Default Pagination use large block connect link pagination make link hard miss easily scalable provide large hit area pagination build list element screen reader announce number available link use wrapping element identify navigation section screen reader assistive technology design previous nav aria label page navigation example class pagination class page item class page link previous class page item class page link class page item class page link class page item class page link class page item class page link work icon look use icon symbol place text pagination link sure provide proper screen reader support aria attribute design nav aria label page navigation example class pagination class page item class page link aria label previous span aria hide true class page item class page link class page item class page link class page item class page link class page item class page link aria label span aria hide true disabled active state Pagination link customizable different circumstance Use link appear indicate current page design previous current nav aria label class pagination class page item disabled class page link aria disabled true previous class page item class page link class page item active aria current page class page link span class current class page item class page link class page item class page link size Fancy large small pagination add additional size design current nav aria label class pagination pagination class page item active aria current page span class page link span class current class page item class page link class page item class page link Design current nav aria label class pagination pagination class page item active aria current page span class page link span class current class page item class page link class page item class page link Alignment change alignment pagination component utility design previous nav aria label page navigation example class pagination justify content center class page item disabled class page link aria disabled true previous class page item class page link class page item class page link class page item class page link class page item class page link Design previous nav aria label page navigation example class pagination justify content end class page item disabled class page link aria disabled true previous class page item class page link class page item class page link class page item class page link class page item class page link Gulp Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Gulp Learn include script automate time consume task development gulp toolkit Quick Start use script build system include convenient method work framework include compile code run test use build system run documentation locally need copy source file Node follow step ready rock Download install use manage dependency download install use manage dependency navigate root directory run install install local dependency list complete able run command provide command line install note Gulp instal globally reason command install gulp cli install module change command line path project folder locate check follow article quick start run file following command install check project folder command finish execute Gulp create folder Run Gulp Gulp build Compile watch use live Reload update browser instantly start server pop tab default browser change source file compile soon save file try run gulp generate directory production file gulp build Profile Overview Dash Bootstrap Admin Dashboard Template Dashboard Layouts Pages Pages Profile Settings Billing Pricing Error authentication Sign Sign Forget Password Layouts Components Components Menu Level Level level Item Nav Item Documentation Docs Notifications Rishi Sina Ray view notification John View profile Edit Profile Activity Log Pro Account Settings Sign overview Edit Profile Overview Project Files Teams Followers Activity Bio var Position theme designer Bootstrap phone Date Birth Email Location India Projects Contributions Slack Design Project description detail action action Design Character Project description detail action action Development Project description detail action action Design System Project description detail action action Project Management Project description detail action action minute ago action action var like comment share like Post team Smiley Designer Anne Brewer Senior Designer Richard Christmas end Engineer Nicholas Binder Content Marketing Manager Activity Feed Smiley create new Project ago Irene comment Bootstrap Tutorial say irene ago Trevor Bradley share article Social Media ago Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Build hide sidebar project navigation shopping cart class component example show default include support header close button optional body class initial padding suggest include header dismiss action possible provide explicit dismiss action design Content place Bootstrap component custom element div class start aria div class header class title button type button class close text reset data dismiss aria label close div class body content place Bootstrap component custom element live demo use button hide element toggle class element class design Link Button data target text placeholder real life element choose like text image list etc button Action action class primary data toggle role button aria control link button class primary type button data toggle data target aria control Button data target div class start aria div class header class title button type button class close text reset data dismiss aria label close class circle div class body div text placeholder real life element choose like text image list etc div class button class secondary toggle type button data toggle button class menu aria class item Action class item action class item Placement default placement component add modifier class start place left viewport show end place right viewport place viewport place viewport try right example design Toggle button class primary type button data toggle data target aria control Toggle div class aria div class header button type button class close text reset data dismiss aria label close div class body Design Toggle right right button class primary type button data toggle data target aria control Toggle right div class end aria div class header right button type button class close text reset data dismiss aria label close div class body Design Toggle button class primary type button data toggle data target aria control Toggle div class aria div class header class title button type button class close text reset data dismiss aria label close class circle div class body small Backdrop scroll element disable backdrop visible use data scroll attribute toggle scrolling data backdrop toggle backdrop design Enable body scroll Enable backdrop default enable scrolling backdrop Colored scroll try scroll rest page option action backdrop scroll try scroll rest page option action button class primary type button data toggle data target aria control enable body scroll button class primary type button data toggle data target aria control enable backdrop default button class primary type button data toggle data target aria control enable scrolling backdrop div class start data scroll true data backdrop false aria div class header class title color scroll button type button class close text reset data dismiss aria label close div class body try scroll rest page option action div class start aria div class header class title backdrop button type button class close text reset data dismiss aria label close div class body div class start data scroll true aria div class header class title scrolling button type button class close text reset data dismiss aria label close div class body try scroll rest page option action Borders Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Borders use border utility quickly style border border radius element great image button element border Use border utility add remove element border choose border time Additive Design span class border span class border span class border end span class border span class border start Subtractive Design span class span class border span class border span class border span class border Border color change border color utility build theme color design span class border border primary span class border border secondary span class border border success span class border border danger span class border border warning span class border border info span class border border light span class border border dark span class border border white Border radius Add class element easily round corner design alt class rounded alt class rounded alt class rounded end alt class rounded alt class round start alt class round circle alt class rounded pill alt class size Use large small border radius Design alt class alt class Text Geeks Bootstrap Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Text Documentation example common text utility control alignment wrapping weight text alignment easily realign text component text alignment class start end center alignment responsive class available use viewport width breakpoint grid system design Start align text viewport size center align text viewport size end align text viewport size start align text viewport sized small wide start align text viewport sized medium wide start align text viewport sized large wide start align text viewport sized extra large wide class text start start align text viewport size class text center center align text viewport size class text end end align text viewport size class text start start align text viewport sized small wide class text start start align text viewport sized medium wide class text start start align text viewport sized large wide class text start start align text viewport sized extra large wide text wrapping overflow Wrap text wrap class design text wrap div class badge primary text wrap style width text wrap Prevent text wrap class design text overflow parent div class text style width text overflow parent Word break Prevent long string text break component layout break set word wrap break word word break break word use word wrap instead common overflow wrap wide browser support add deprecate word break break word avoid issue flex container Design class text break text transform transform text component text capitalization class design lowercase text uppercase text CapiTaliZed text class text lowercase text class text uppercase uppercase text class text capitalize CapiTaliZed text Font size quickly change font size text heading class apply font size font weight line height utility apply font size size utility match head element number increase size decrease design text text text text text text class text class text class text class text class text class text Font weight italic quickly change font weight font style text utility font style utility abbreviate font weight utility abbreviate design bold text bolder weight text relative parent element normal weight text light weight text light weight text relative parent element italic text text normal font style class bold bold text class bolder bolder weight text relative parent element class normal normal weight text class light light weight text class light light weight text relative parent element class italic italic text class normal text normal font style line height change line height utility design long paragraph write line height element affect utility class apply element parent element class customize need utility long paragraph write line height element affect utility class apply element parent element class customize need utility long paragraph write line height element affect utility class apply element parent element class customize need utility long paragraph write line height element affect utility class apply element parent element class customize need utility class long paragraph write line height element affect utility class apply element parent element class customize need utility class long paragraph write line height element affect utility class apply element parent element class customize need utility class base long paragraph write line height element affect utility class apply element parent element class customize need utility class long paragraph write line height element affect utility class apply element parent element class customize need utility Monospace Change selection monospace font stack monospace design monospace class font monospace monospace reset color Reset text link color reset inherit color parent design mute text reset link class text muted muted text class text reset reset link text decoration decorate text component text decoration class design text line underneath text line link text decoration remove class text decoration underline text line underneath class text decoration line text line class text decoration link text decoration remove Carousel Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Carousel component cycle element image slide text like carousel slide carousel slide note presence block carousel image prevent browser default image alignment design div class carousel slide data ride carousel div class carousel inner div class carousel item active image class block alt div class carousel item image class block alt div class carousel item image class block alt Control add previous control design previous div class carousel slide data ride carousel div class carousel inner div class carousel item active image class block alt div class carousel item image class block alt div class carousel item image class block alt class carousel control prev role button data slide prev span class carousel control prev icon aria hide true span class Previous class carousel control role button data slide span class carousel control icon aria hide true span class indicator add indicator carousel alongside control design previous div class carousel slide data ride carousel class carousel indicator data target data slide class active data target data slide data target data slide div class carousel inner div class carousel item active image class block alt div class carousel item image class block alt div class carousel item image class block alt class carousel control prev role button data slide prev span class carousel control prev icon aria hide true span class Previous class carousel control role button data slide span class carousel control icon aria hide true span class slide easily caption element item easily hide small viewport show optional display utility hide initially bring medium sized device block design slide label second slide label slide label previous div class example div class carousel slide data ride carousel class carousel indicator data target data slide class active data target data slide data target data slide div class carousel inner div class carousel item active image class block alt div class carousel caption block slide label div class carousel item image class block alt div class carousel caption block second slide label div class carousel item image class block alt div class carousel caption block slide label class carousel control prev role button data slide prev span class carousel control prev icon aria hide true span class Previous class carousel control role button data slide span class carousel control icon aria hide true span class Add fade carousel animate slide fade transition instead slide design previous div class carousel slide carousel fade data ride carousel div class carousel inner div class carousel item active image class block alt div class carousel item image class block alt div class carousel item image class block alt class carousel control prev role button data slide prev span class carousel control prev icon aria hide true span class Previous class carousel control role button data slide span class carousel control icon aria hide true span class Individual Add data item change time delay automatically cycle item design previous div class carousel slide data ride carousel div class carousel inner div class carousel item active data interval image class block alt div class carousel item data interval image class block alt div class carousel item image class block alt class carousel control prev role button data slide prev span class carousel control prev icon aria hide true span class Previous class carousel control role button data slide span class carousel control icon aria hide true span class disable touch swiping carousel support swiping leave right device slide disable data touch attribute example include data ride attribute data design previous div class carousel slide data touch false data interval false div class carousel inner div class carousel item active image class block alt div class carousel item image class block alt div class carousel item image class block alt button class carousel control prev type button data target data slide prev span class carousel control prev icon aria hide true span class visually hide Previous button class carousel control type button data target data slide span class carousel control icon aria hide true span class visually hide Dark Variant Add dark dark control indicator caption control invert default white fill filter property caption control additional Sass variable customize color background color design slide label representative placeholder content slide second slide label representative placeholder content second slide slide label representative placeholder content slide previous div class carousel carousel dark slide data ride carousel div class carousel indicator button type button data target data slide class active aria current true aria label slide button type button data target data slide aria label slide button type button data target data slide aria label slide div class carousel inner div class carousel item active data interval class block alt div class carousel caption block slide label representative placeholder content slide div class carousel item data interval class block alt div class carousel caption block second slide label representative placeholder content second slide div class carousel item class block alt div class carousel caption block slide label representative placeholder content slide button class carousel control prev type button data target data slide prev span class carousel control prev icon aria hide true span class visually hide Previous button class carousel control type button data target data slide span class carousel control icon aria hide true span class visually hide Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Documentation example Bootstrap powerful responsive navigation header include support branding navigation include support collapse Default Design Home current Link action action Disabled nav class expand light class brand button class toggler type button data toggle collapse data target aria control aria expand false aria label Toggle navigation span class toggler icon div class collapse collapse class nav auto class nav item active class nav link home span class current class nav item class nav link Link class nav item class nav link toggle role button data toggle aria true aria expand false div class menu aria class item Action class item action div class divider class item class nav item class nav link disabled aria disabled true Disabled form class form inline input class form control type search placeholder search aria label search button class outline success type submit Search Brand brand apply element anchor work well element require utility class custom style design nav class light class brand image brand logo logo width height alt Transform expand collapse drawer extend default style use class create dynamic flexible navigation sidebar example create collapse breakpoint omit class entirely design Home Pages Dashboard Docs Search div class position relative nav class light light div class container fluid class brand button class toggler type button data toggle data target aria control span class toggler icon div class end aria div class header class title button type button class close text reset data dismiss aria label close div class body class nav justify content end flex class nav item class nav link active aria current page Home class nav item class nav link page class nav item class nav link Dashboard class nav item class nav link Docs form class flex input class form control type search placeholder search aria label search button class outline success type submit Search stack Geeks Bootstrap Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Stacks Shorthand helper build utility component layout fast easy vertical stack Use stack button element design Save change Cancel div class col auto button type button class secondary save change button type button class outline secondary Cancel horizontal stack create inline form design Submit Reset div class input class form control auto type text placeholder add item aria label add item button type button class secondary submit div class button type button class outline danger Reset Tables Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Tables Documentation example opt styling table give prevalent use Bootstrap Examples Design Handle Mark Otto Jacob Larry Bird table class table scope col scope col scope col scope col handle scope row Mark Otto scope row Jacob scope row Larry Bird invert color light text dark background dark design Handle Mark Otto Jacob Larry Bird table class table table dark scope col scope col scope col scope col handle scope row Mark Otto scope row Jacob scope row Larry Bird table head option similar table dark table use modifier class light dark appear light dark gray design Handle Mark Otto Jacob Larry bird Handle Mark Otto Jacob Larry Bird div class table responsive table class table class table light scope col scope col scope col scope col handle scope row Mark Otto scope row Jacob scope row Larry Bird div class table responsive table class table class table dark scope col scope col scope col scope col handle scope row Mark Otto scope row Jacob scope row Larry Bird striped row Use stripe add zebra stripe table row design Handle Mark Otto Jacob Larry Bird table class table table striped scope col scope col scope col scope col handle scope row Mark Otto scope row Jacob scope row Larry Bird class add table variant design Handle Mark Otto Jacob Larry Bird table class table table success scope col scope col scope col scope col handle scope row Mark Otto scope row Jacob scope row Larry Bird bordered table add border border side table cell design Handle Mark Otto Jacob Larry Bird table class table table border scope col scope col scope col scope col handle scope row Mark Otto scope row Jacob scope row Larry Bird bordered table Border color utility like add change color design Handle Mark Otto Jacob Larry Bird table class table table border border primary scope col scope col scope col scope col handle scope row Mark Otto scope row Jacob scope row Larry Bird borderless table design Handle Mark Otto Jacob Larry Bird table class table table borderless scope col scope col scope col scope col handle scope row Mark Otto scope row Jacob scope row Larry Bird row Add hover enable hover state table row design Handle Mark Otto Jacob Larry Bird table class table table hover scope col scope col scope col scope col handle scope row Mark Otto scope row Jacob scope row Larry Bird small table add table compact cut cell padding half design Handle Mark Otto Jacob Larry Bird table class table table scope col scope col scope col scope col handle scope row Mark Otto scope row Jacob scope row Larry Bird variant use contextual class color table row individual cell design Class Heading Heading Default Cell Cell Primary cell cell Secondary cell Cell Success cell Cell Danger Cell Cell Warning cell Cell Info Cell Cell Light Cell Cell Dark Cell Cell table class table scope col class scope col head scope col head scope row Default cell cell class table primary scope row Primary cell cell class table secondary scope row secondary cell cell class table success scope row Success cell cell class table danger scope row Danger cell cell class table warning scope row warning cell cell class table info scope row Info cell cell class table light scope row light cell cell class table dark scope row Dark cell cell responsive table responsive table allow table scroll horizontally ease table responsive viewport wrap responsive pick maximum breakpoint responsive table design head Heading Heading Heading Heading Heading Heading Heading Heading cell cell cell cell cell cell cell Cell Cell cell cell cell cell cell cell cell Cell Cell cell cell cell cell cell cell cell Cell Cell div class table responsive table class table active table Highlight table row cell add active class design Handle Mark Otto Jacob Larry Bird table class table scope col scope col scope col scope col handle class table active scope row Mark Otto scope row Jacob scope row class table active Larry Bird Nesting Border style active style table variant inherit nest table design Handle Mark Otto Header Header Header Larry Bird table class table table stripe table border scope col scope col scope col scope col handle scope row Mark Otto table class table scope col Header scope col Header scope col Header scope row scope row scope row scope row Larry Bird nesting work prevent style leak nest table use child combinator selector need target selector look pretty long use odd looking selector target potential nest table Anatomy Table head similar table dark table use modifier class light dark appear light dark gray design Handle Mark Otto Jacob Larry Bird table class table class table light scope col scope col scope col scope col handle scope row Mark Otto scope row Jacob scope row Larry Bird design Handle Mark Otto Jacob Larry Bird table class table class table dark scope col scope col scope col scope col handle scope row Mark Otto scope row Jacob scope row Larry Bird table Footer Design Handle Mark Otto Jacob Larry Bird Footer Footer Footer Footer table class table class table light scope col scope col scope col scope col handle scope row Mark Otto scope row Jacob scope row Larry Bird Footer Footer Footer Footer caption function like heading table help user screen reader find table understand decide want read design List user Handle Mark Otto Jacob Larry Bird table class table caption list user scope col scope col scope col scope col handle scope row Mark Otto scope row Jacob scope row Larry Bird table design List user Handle Mark Otto Jacob Larry Bird table class table list user scope col scope col scope col scope col handle scope row Mark Otto scope row Jacob scope row Larry Bird color Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Colors theme Colors Primary secondary success Danger warning Info Light Dark theme Light Colors Primary secondary Success danger warning info Dark theme Dark Colors Primary secondary success danger warning Info Theme Gray Colors text color Design primary secondary success danger warn info light dark body mute white class text primary primary class text secondary secondary class text success success class text danger danger class text warning warn class text info info class text light dark light class text dark dark class text body body class text muted mute class text white dark white class text class text dark background color similar contextual text color class easily set background element contextual class anchor component darken hover like text class background utility set color case want use utility design primary secondary success danger warn info light dark white transparent div class primary text white primary div class secondary text white secondary div class success text white success div class danger text white danger div class warning text dark warning div class info text white info div class light text dark light div class dark text white dark div class white text dark white div class transparent text dark transparent popover Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Popovers Documentation example add Bootstrap popover like find ios element site Default Popovers Design Click toggle popover button type button class primary data toggle popover title popover title data content amazing content engaging right click toggle popover direction option available right leave align design popover Popover right popover Popover leave button type button class secondary data container body data toggle popover data placement data content popover button type button class secondary data container body data toggle popover data placement right data content popover right button type button class secondary data container body data toggle popover data placement data content popover button type button class secondary data container body data toggle popover data placement leave data content popover leave dismiss click use focus trigger dismiss popover user click different element toggle element design Dismissible popover class danger role button data toggle popover data trigger focus title dismissible popover data content amazing content engaging right dismissible popover disabled element element disabled attribute interactive mean user hover click trigger popover want trigger popover wrapper ideally keyboard focusable disabled popover trigger prefer data focus popover appear immediate visual feedback user expect click disabled element design Disabled button span class inline block data toggle popover data trigger hover focus data content disabled popover button class primary type button disabled disabled button Shadows Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Shadows add remove shadow element box shadow utility example shadow component disable default Bootstrap enable enable shadow quickly add remove shadow box shadow utility class include support default size associate variable match design shadow small shadow regular shadow Larger shadow regular shadow Medium shadow Larger shadow div class shadow light shadow div class shadow white small shadow div class shadow white regular shadow div class shadow white Larger shadow Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts constantly improve update late feature improvement Dec update late Updated Docs Added Bootstrap Components Close Button Added Utilities link ratio stack Text Text Truncation Vertical rule Opacity Updated Gray color Aug Updated Docs June Inital Release fully responsive modern premium bootstrap dashboard Admin template modal Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Modal Use Bootstrap modal add dialog site user notification completely custom content modal component static modal example mean position display overridden include modal header modal body require padding modal footer optional ask include modal header dismiss action possible provide explicit dismiss action design Modal title Modal body text close Save change div class modal role dialog div class modal dialog role document div class modal content div class modal header class modal title modal title button type button class close data dismiss modal aria label close span aria hide true times div class modal body modal body text div class modal footer button type button class secondary data dismiss modal close button type button class primary save change Live Demo Toggle work modal demo click button slide fade page design Launch demo modal modal title close Save change button type button class primary data toggle modal data target launch demo modal div class modal fade role dialog aria aria hide true div class modal dialog role document div class modal content div class modal header class modal title modal title button type button class close data dismiss modal aria label close span aria hide true times div class modal body div class modal footer button type button class secondary data dismiss modal close button type button class primary save change scroll long content modal long user viewport device scroll independent page try demo mean design Launch demo modal modal title close Save change button type button class primary data toggle modal data target launch demo modal div class modal fade role dialog aria aria hide true div class modal dialog role document div class modal content div class modal header class modal title modal title button type button class close data dismiss modal aria label close span aria hide true times div class modal body div class modal footer button type button class secondary data dismiss modal close button type button class primary save change create modal allow scroll modal body add dialog dialog design Launch demo modal modal title close Save change button type button class primary data toggle modal data target launch demo modal div class modal fade role dialog aria aria hide true div class modal dialog modal dialog role document div class modal content div class modal header class modal title modal title button type button class close data dismiss modal aria label close span aria hide true times div class modal body div class modal footer button type button class secondary data dismiss modal close button type button class primary save change vertically center Add dialog center dialog vertically center modal design Launch demo modal modal title close Save change button type button class primary data toggle modal data target launch demo modal div class modal fade role dialog aria aria hide true div class modal dialog modal dialog center role document div class modal content div class modal header class modal title modal title button type button class close data dismiss modal aria label close span aria hide true times div class modal body div class modal footer button type button class secondary data dismiss modal close button type button class primary save change popover popover place modal need modal close popover automatically dismiss design Launch demo modal modal title Popover modal button trigger popover click modal link link hover close Save change div class modal body popover modal role button class secondary popover test title popover title data content popover body content set attribute button trigger popover click modal class test title link class test title link hover varying modal content bunch button trigger modal slightly different content use data attribute vary content modal depend button click design open modal open modal open modal new message recipient message Close send message button type button class primary data toggle modal data target data open modal button type button class primary data toggle modal data target data open modal button type button class primary data toggle modal data target data open modal div class modal fade role dialog aria aria hide true div class modal dialog role document div class modal content div class modal header class modal title new message button type button class close data dismiss modal aria label close span aria hide true times div class modal body form div class label recipient class col form label Recipient input type text class form control recipient div class label message text class col form label message class form control message text div class modal footer button type button class secondary data dismiss modal close button type button class primary send message Toggle modal Toggle multiple modal clever placement data target data toggle attribute example toggle password reset modal open sign modal note multiple modal open time method simply toggle separate modal design Modal second modal hide button open second modal Modal hide modal button open modal div class modal fade aria hide true aria div class modal dialog modal dialog center div class modal content div class modal header class modal title Modal button type button class close data dismiss modal aria label close div class modal body second modal hide button div class modal footer button class primary data target data toggle modal data dismiss modal open second modal div class modal fade aria hide true aria div class modal dialog modal dialog center div class modal content div class modal header class modal title Modal button type button class close data dismiss modal aria label close div class modal body hide modal button div class modal footer button class primary data target data toggle modal data dismiss modal class primary data toggle modal role button open modal optional size optional size available modifier class place dialog size kick certain breakpoint avoid horizontal narrow viewport design extra large modal extra large modal large modal large modal small modal small modal button type button class primary data toggle modal data target example modal extra large modal div class modal fade example modal role dialog aria aria hide true div class modal dialog modal div class modal content button type button class primary data toggle modal data target example modal large modal div class modal fade example modal role dialog aria aria hide true div class modal dialog modal div class modal content button type button class primary data toggle modal data target example modal small modal div class modal fade example modal role dialog aria aria hide true div class modal dialog modal div class modal content Pricing Dash Bootstrap Admin Dashboard Template Dashboard Layouts Pages Pages Profile Settings Billing Pricing Error authentication Sign Sign Forget Password Layouts Components Components Menu Level Level level Item Nav Item Documentation Docs Notifications Rishi Sina Ray view notification John View profile Edit Profile Activity Log Pro Account Settings Sign pricing find plan right simply leverage expertise consultation team talk Standard early stage startup want spend time develop manual operation Buy Standard core feature include Basic Components Adv component land page Dashboard Layouts Documentation Access support forum Popular agile startup want grow revenue quick experiment data drive decision making Buy Standard Offline view unlimited project unlimited storage Custom domain support Bulk edit support extend fast growth want grow maximize efficiency revenue operation Buy extend Workshop dedicated hardware uptime guarantee advanced analytic party integration support need build efficiently start build app tool efficient spend time detail time business create Edit Projects max roin search Filter real Time Updates Meta Information Pre render Results Simple Analytics mentum frequently Asked Questions charge quat maxim subscription work cancel anytime yes long personal vel plan aget file downloadable List Group Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts List Group basic list group unordered list list item proper class build option follow need basic list basic list group unordered list list item proper class build option follow need design class list group class list group item class list group item class list group item class list group item class list group item Vestibulum Active Item Add group item indicate current active selection design class list group class list group item active class list group item class list group item class list group item class list group item Vestibulum Disabled Items Add group item appear disabled note element require custom fully disable click event link design class list group class list group item disabled class list group item class list group item class list group item class list group item Vestibulum link button Use create actionable list group item hover disabled active state add group item action separate pseudo class ensure list group non interactive element like provide click tap sure use standard class design div class list group class list group item list group item action active class list group item list group item action class list group item list group item action class list group item list group item action class list group item list group item action disabled Vestibulum use disabled attribute instead class sadly support disabled attribute design div class list group button type button class list group item list group item action active button type button class list group item list group item action button type button class list group item list group item action button type button class list group item list group item action button type button class list group item list group item action disabled Vestibulum Flush Add group flush remove border rounded corner render list group item edge edge parent container card design class list group list group flush class list group item class list group item class list group item class list group item class list group item Vestibulum Numbered Add group number modifier class optionally use element opt numbered list group item number generate oppose default browser styling well placement inside list group item allow well customization design class list group list group number class list group item class list group item class list group item work great custom content design Subheading Subheading Subheading class list group list group number class list group item flex justify content align item start div class auto div class bold Subheading span class badge primary round pill class list group item flex justify content align item start div class auto div class bold Subheading span class badge primary round pill class list group item flex justify content align item start div class auto div class bold Subheading span class badge primary round pill Horizontal Add group horizontal change layout list group item vertical horizontal breakpoint alternatively choose responsive variant group list group horizontal start breakpoint min width currently horizontal list group combine flush list group want equal width list group item horizontal add fill list group item design item second item item item second item item item second item item item second item item item second item item item second item item class list group list group horizontal class list group item item class list group item second item class list group item item class list group list group horizontal class list group item item class list group item second item class list group item item class list group list group horizontal class list group item item class list group item second item class list group item item class list group list group horizontal class list group item item class list group item second item class list group item item class list group list group horizontal class list group item item class list group item second item class list group item item class list group list group horizontal class list group item item class list group item second item class list group item item radio Place Bootstrap radio list group item customize need use remember include aria label attribute value accessibility design Second Fourth Fifth class list group class list group item input class form check input type value aria label class list group item input class form check input type value aria label second class list group item input class form check input type value aria label class list group item input class form check input type value aria label Fourth class list group item input class form check input type value aria label Fifth contextual class use contextual class style list item stateful background color design primary list group item secondary list group item success list group item danger list group item warning list group item info list group item light list group item dark list group item class list group class list group item class list group item list group item primary primary list group item class list group item list group item secondary secondary list group item class list group item list group item success success list group item class list group item list group item danger danger list group item class list group item list group item warning warning list group item class list group item list group item info info list group item class list group item list group item light light list group item class list group item list group item dark dark list group item badge add badge list group item unread count activity help utility design class list group class list group item flex justify content align item center span class badge primary class list group item flex justify content align item center span class badge primary class list group item flex justify content align item center span class badge primary Custom content add nearly link list group like help utility design List group item head day ago list group item head day ago list group item head day ago div class list group class list group item list group item action active div class flex justify content class list group item head small day ago class small class list group item list group item action div class flex justify content class list group item head small class text muted day ago class small class text muted class list group item list group item action div class flex justify content class list group item head small class text muted day ago class small class text muted Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Toggle contextual overlay display list link Bootstrap Basic Design button action action div class button class secondary toggle type button data toggle aria true aria expand false button div class menu aria class item Action class item action class item option good button variant Color good button variant Design Primary Action action Separated link Secondary Action action Separated link Success Action action Separated link Info Action action separated link Warning Action action Separated link Danger Action action Separated link div class group button type button class primary toggle data toggle aria true aria expand false Primary div class menu class item Action class item action class item div class divider class item Separated link div class group button type button class secondary toggle data toggle aria true aria expand false secondary div class menu class item Action class item action class item div class divider class item Separated link div class group button type button class success toggle data toggle aria true aria expand false Success div class menu class item Action class item action class item div class divider class item Separated link div class group button type button class info toggle data toggle aria true aria expand false Info div class menu class item Action class item action class item div class divider class item Separated link div class group button type button class warn toggle data toggle aria true aria expand false warning div class menu class item Action class item action class item div class divider class item Separated link div class group button type button class danger toggle data toggle aria true aria expand false Danger div class menu class item Action class item action class item div class divider class item Separated link size Button work button size include default split button design large button action action Separated link large split button Toggle Action action Separated link small button action action Separated link small split button Toggle Action action Separated link div class group button class secondary toggle type button data toggle aria true aria expand false large button div class menu class item Action class item action class item div class divider class item Separated link div class group button class secondary type button large split button button type button class secondary toggle toggle split data toggle aria true aria expand false span class Toggle div class menu class item Action class item action class item div class divider class item Separated link div class group button class secondary toggle type button data toggle aria true aria expand false small button div class menu class item Action class item action class item div class divider class item Separated link div class group button class secondary type button small split button button type button class secondary toggle toggle split data toggle aria true aria expand false span class Toggle div class menu class item Action class item action class item div class divider class item Separated link direction Trigger menus element add parent element design Action action Separated link Split Toggle Action action Separated link Action action Separated link Split Toggle Action action Separated link Action action Separated link Toggle Action action Separated link Split div class group button type button class secondary toggle data toggle aria true aria expand false div class menu class item Action class item action class item div class divider class item Separated link div class group button type button class secondary Split button type button class secondary toggle toggle split data toggle aria true aria expand false span class Toggle div class menu class item Action class item action class item div class divider class item Separated link div class group button type button class secondary toggle data toggle aria true aria expand false div class menu class item Action class item action class item div class divider class item Separated link div class group button type button class secondary Split button type button class secondary toggle toggle split data toggle aria true aria expand false span class Toggle div class menu class item Action class item action class item div class divider class item Separated link div class group button type button class secondary toggle data toggle aria true aria expand false div class menu class item Action class item action class item div class divider class item Separated link div class group div class group role group button type button class secondary toggle toggle split data toggle aria true aria expand false span class Toggle div class menu class item Action class item action class item div class divider class item Separated link button type button class secondary Split Menu Alignment default menu automatically position left parent add menu right menu right align menu design Menu item Menu item Menu item right align menu Menu item Menu item Menu item leave align right align Menu item Menu item Menu item right align leave align Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item div class group button class secondary toggle type button data toggle aria expand false class menu aria class item Menu item class item Menu item class item Menu item div class group button type button class secondary toggle data toggle aria expand false right align menu class menu menu end class item Menu item class item Menu item class item Menu item div class group button type button class secondary toggle data toggle data display static aria expand false Left align right align class menu menu end class item Menu item class item Menu item class item Menu item div class group button type button class secondary toggle data toggle data display static aria expand false right align leave align class menu menu end menu start class item Menu item class item Menu item class item Menu item div class group button type button class secondary toggle data toggle aria expand false class menu class item Menu item class item Menu item class item Menu item div class group button type button class secondary toggle data toggle aria expand false class menu class item Menu item class item Menu item class item Menu item div class group button type button class secondary toggle data toggle aria expand false class menu class item Menu item class item Menu item class item Menu item Responsive Menu Alignment default menu automatically position left parent add menu right menu right align menu design left align right align large screen action action right align leave align large screen action action div class group button type button class secondary toggle data toggle data display static aria expand false Left align right align large screen class menu menu right button class item type button action button class item type button action button class item type button div class group button type button class secondary toggle data toggle data display static aria expand false right align leave align large screen class menu menu right menu left button class item type button action button class item type button action button class item type button Menu content Header add header label section action menu design header action action div class menu class header header class item Action class item action Dividers separate group relate menu item divider design action action Separated link div class menu class item Action class item action class item div class divider class item Separated link Text Place freeform text menu text use space utility note likely need additional size style constrain menu width design example text free flow menu example text div class menu text mute style max width example text free flow menu class example text form form menu menu use margin padding utility negative space require design Email address Password remember Sign New sign Forgot password div class menu form class div class label Email address input type email class form control placeholder div class label Password input type password class form control placeholder Password div class div class form check input type class form check input label class form check label remember button type submit class primary Sign div class divider class item new sign class item Forgot password Design Email address Password remember Sign form class menu div class label Email address input type email class form control placeholder div class label Password input type password class form control placeholder Password div class form check input type class form check input label class form check label remember button type submit class primary Sign Option Use data offset data reference change location Design Offset Action action Reference Toggle Action action Separated link div class flex div class button type button class secondary toggle data toggle aria expand false data offset Offset class menu aria class item Action class item action class item div class group button type button class secondary Reference button type button class secondary toggle toggle split data toggle aria expand false data reference parent span class Toggle class menu aria class item Action class item action class item class divider class item Separated link auto close behavior default menu close click inside outside menu use option change behavior design Default Menu item Menu item Menu item outside Menu item Menu item Menu item inside Menu item Menu item Menu item Manual close Menu item Menu item Menu item div class group button class secondary toggle type button data toggle data auto close true aria expand false Default class menu aria class item Menu item class item Menu item class item Menu item div class group button class secondary toggle type button data toggle data auto close inside aria expand false outside class menu aria class item Menu item class item Menu item class item Menu item div class group button class secondary toggle type button data toggle data auto close outside aria expand false inside class menu aria class item Menu item class item Menu item class item Menu item div class group button class secondary toggle type button data toggle data auto close false aria expand false manual close class menu aria class item Menu item class item Menu item class item Menu item button Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Buttons Use Bootstrap custom button style action form dialog support multiple size state Buttons Bootstrap include predefine button style serve semantic purpose extra throw control design Primary secondary Success Danger Warning Info Light Dark Link button type button class primary Primary button type button class secondary secondary button type button class success Success button type button class danger Danger button type button class warning warning button type button class info Info button type button class light light button type button class dark Dark button type button class link Link outline button need button hefty background color bring replace default modifier class one remove background image color button design Primary secondary Success Danger Warning Info Light Dark button type button class outline primary Primary button type button class outline secondary secondary button type button class outline success Success button type button class outline danger Danger button type button class outline warning warning button type button class outline info Info button type button class outline light light button type button class outline dark Dark Button tag class design element use class element browser apply slightly different rendering design Link Button class primary role button Link button class primary type submit Button input class primary type button value input input class primary type submit value submit input class primary type reset value reset Sizes Fancy large small button add additional size design large button Default button small button Small button button type button class primary large button button type button class primary Default button button type button class primary small button button type button class primary Small button Block button create responsive stack width block button like Bootstrap mix display gap utility utility instead button specific class great control spacing alignment responsive behavior design Button Button div class grid button class primary type button Button button class primary type button Button create responsive variation start vertically stack button breakpoint block replace grid class nullify utility resize browser change design Button Button div class grid block button class primary type button Button button class primary type button Button adjust width block button grid column width class example half width block button use center horizontally auto design Button Button div class grid auto button class primary type button Button button class primary type button Button additional utility adjust alignment button horizontal take previous responsive example add flex utility margin utility button right align button long stack design Button Button div class grid flex justify content end button class primary type button Button button class primary type button Button Button icon contain button icon design text button type button class primary text class shopping bag fix width height design button type button class primary icon button type button class primary icon span class spinner border spinner border role status aria hide true button type button class icon white border round circle dash available button size design button type button class primary button type button class primary button type button class primary active state button appear press dark background darker border inset shadow active need add class use pseudo class force active appearance include aria attribute need replicate state programmatically design Primary link Link class primary active role button aria press true Primary link class secondary active role button aria press true Link disabled state button look inactive add disabled boolean attribute element design Primary button Button button type button class primary disabled primary button button type button class secondary disabled Button Toggle state Add data toggle button active state pre toggle button manually add class aria design Toggle button Active toggle button Disabled toggle button button type button class primary data toggle button Toggle button button type button class primary active data toggle button aria press true active toggle button button type button class primary disabled data toggle button disabled toggle button colored link Geeks Bootstrap Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Colored link colored link hover state use class colorize link unlike class class hover focus state design Primary link secondary link Success link Danger link Warning link Info link Light link Dark link class link primary Primary link class link secondary secondary link class link success Success link class link danger Danger link class link warning warning link class link info Info link class link light Light link class link dark Dark link close Button Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts close Button generic close button dismiss content like modal alert example provide option dismiss close component close default styling limited highly customizable modify Sass variable replace default background image sure include text screen reader aria label design button type button class close aria label close disabled state disabled close button change opacity apply pointer event user select prevent hover active state trigger design button type button class close disabled aria label close white variant change default close white close white class class use filter property invert background image design button type button class close close white aria label close button type button class close close white disabled aria label close Dash Bootstrap Admin Dashboard Template Dashboard Layouts Pages Pages Profile Settings Billing Pricing Error authentication Sign Sign Forget Password Layouts Components Components Menu Level Level level Item Nav Item Documentation Docs Notifications Rishi Sina Ray view notification John View profile Edit Profile Activity Log Pro Account Settings Sign Projects create New Project Projects complete active Task Completed Teams complete Productivity complete Active Projects Project hour priority member Progress Design System Medium Slack Team Design High Satellite Low Character Modelling medium Design System Track Event Design Low View Projects Tasks Performance Action action complete progress Teams Role Activity Anita end developer action action Project Director Today Action action Sandeep Stack Developer yesterday action action Amanda Digital Marketer action action Patricia Account Manager action action Nair end developer action action Copyright right reserve Ratio Geeks Bootstrap Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Ratios Use generate pseudo element element maintain aspect ratio choosing perfect responsively handle video embed base width parent aspect ratio Aspect ratio customize modifier class default follow ratio class provide Design div class ratio div div class ratio div div class ratio div div class ratio div Spinners Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Spinners indicate loading state component page Bootstrap spinner build entirely border spinner use border spinner lightweight loading indicator design Loading div class spinner border role status span class visually hide Loading color border spinner use border color mean customize color text color utility use text color utility standard spinner design loading loading loading loading loading loading loading Loading div class spinner border text primary role status span class visually hide Loading div class spinner border text secondary role status span class visually hide Loading div class spinner border text success role status span class visually hide Loading div class spinner border text danger role status span class visually hide Loading div class spinner border text warn role status span class visually hide Loading div class spinner border text info role status span class visually hide Loading div class spinner border text light role status span class visually hide Loading div class spinner border text dark role status span class visually hide Loading grow spinner design Loading div class spinner grow role status span class visually hide Loading spinner build easily change appearance text color utility blue support variant design loading loading loading loading loading loading loading Loading div class spinner grow text primary role status span class visually hide Loading div class spinner grow text secondary role status span class visually hide Loading div class spinner grow text success role status span class visually hide Loading div class spinner grow text danger role status span class visually hide Loading div class spinner grow text warning role status span class visually hide Loading div class spinner grow text info role status span class visually hide Loading div class spinner grow text light role status span class visually hide Loading div class spinner grow text dark role status span class visually hide Loading Alignment Spinners Bootstrap build rem display inline flex mean easily resize quickly align margin Use margin utility like easy spacing design Loading div class spinner border role status span class visually hide Loading Placement Use utility float utility text alignment utility place spinner exactly need situation Flex Use flex flex property placement design Loading div class flex justify content center div class spinner border role status span class visually hide Loading Design Loading div class flex align item center strong Loading div class spinner border auto role status aria hide true Floats Use float utility placement design Loading div class div class spinner border float right role status span class visually hide Loading text align Use text alignment utility placement design Loading div class text center div class spinner border role status span class visually hide Loading Size Add border grow small spinner quickly component design loading Loading div class spinner border spinner border role status span class visually hide Loading div class spinner grow spinner grow role status span class visually hide Loading use custom inline style change dimension need design loading Loading div class spinner border style width height role status span class visually hide Loading div class spinner grow style width height role status span class visually hide Loading Buttons Design loading Loading button class primary type button disabled span class spinner border spinner border role status aria hide true span class visually hide Loading button class primary type button disabled span class spinner border spinner border role status aria hide true Loading Design loading Loading button class primary type button disabled span class spinner grow spinner grow role status aria hide true span class visually hide Loading button class primary type button disabled span class spinner grow spinner grow role status aria hide true Loading Forget Password Dash Bootstrap Admin Dashboard Template worry send email reset password Email Reset Password account sign tab Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts tab Documentation example use Bootstrap include navigation component Menu nav Navigation available Bootstrap share general markup style base class active disabled state swap modifier class switch style base component build provide strong foundation build type navigation component include style override work list link padding large hit area basic disabled styling design Active Link Link Disabled class nav class nav item class nav link active active class nav item class nav link Link class nav item class nav link Link class nav item class nav link disabled aria disabled true Disabled class markup super flexible Use like order item important roll element use display flex nav link behave nav item extra markup design Active Link Link Disabled nav class nav class nav link active active class nav link Link class nav link Link class nav link disabled aria disabled true Disabled horizontal alignment change horizontal alignment nav utility default leave align easily change center right align Nav Center center content center design Active Link Link Disabled class nav justify content center class nav item class nav link active active class nav item class nav link Link class nav item class nav link Link class nav item class nav link disabled aria disabled true Disabled Nav right right align content end design Active Link Link Disabled class nav justify content end class nav item class nav link active active class nav item class nav link Link class nav item class nav link Link class nav item class nav link disabled aria disabled true Disabled Vertical Stack navigation change flex item direction column utility need stack viewport use responsive version column design Active Link Link Disabled class nav flex column class nav item class nav link active active class nav item class nav link Link class nav item class nav link Link class nav item class nav link disabled aria disabled true Disabled vertical navigation possible design Active Link Link Disabled nav class nav flex column class nav link active active class nav link Link class nav link Link class nav link disabled aria disabled true Disabled Tabs take basic nav add tab class generate tabbed interface use create region tab design Active Link Link Disabled class nav nav tab class nav item class nav link active active class nav item class nav link Link class nav item class nav link Link class nav item class nav link disabled aria disabled true Disabled pill use pill instead Design Active Link Link Disabled class nav nav pill class nav item class nav link active active class nav item class nav link Link class nav item class nav link Link class nav item class nav link disabled aria disabled true Disabled Fill justify Force content extend available width modifier class proportionately fill available space item use fill notice horizontal space occupy nav item width design Active long nav link Link Disabled class nav nav pill nav fill class nav item class nav link active active class nav item class nav link long nav link class nav item class nav link Link class nav item class nav link disabled aria disabled true Disabled navigation sure include item anchor design Active long nav link Link Disabled nav class nav nav pill nav fill class nav item nav link active active class nav item nav link long nav link class nav item nav link Link class nav item nav link disabled aria disabled true Disabled similar fill example navigation sure include item anchor design Active long nav link Link Disabled nav class nav nav pill nav justified class nav item nav link active active class nav item nav link long nav link class nav item nav link Link class nav item nav link disabled aria disabled true Disabled work flex utility need responsive nav variation consider series utility verbose utility offer great customization responsive breakpoint example nav stack low breakpoint adapt horizontal layout fill available width start small breakpoint design Active long nav link Link Disabled nav class nav nav pill flex column flex row class flex fill text center nav link active active class flex fill text center nav link long nav link class flex fill text center nav link Link class flex fill text center nav link disabled aria disabled true Disabled behavior use tab include individually compile file extend navigational tab pill create pane local content menus design Home Profile Contact anim sunt exercitation anim veniam culpa sit minim anim culpa quis sit exercitation anim sunt exercitation anim veniam culpa sit minim anim culpa quis sit exercitation anim sunt exercitation anim veniam culpa sit minim anim culpa quis sit exercitation class nav nav tab role class nav item class nav link active home tab data toggle tab home role tab aria control home aria select true Home class nav item class nav link profile tab data toggle tab profile role tab aria control profile aria select false Profile class nav item class nav link contact tab data toggle tab contact role tab aria control contact aria select false contact div class tab content div class tab pane fade active home role aria home tab div class tab pane fade profile role aria profile tab div class tab pane fade contact role aria contact tab horizontal pill tab work pill design Home Profile Contact anim sunt exercitation anim veniam culpa sit minim anim culpa quis sit exercitation anim sunt exercitation anim veniam culpa sit minim anim culpa quis sit exercitation anim sunt exercitation anim veniam culpa sit minim anim culpa quis sit exercitation class nav nav pill pill tab role class nav item class nav link active pill home tab data toggle pill pill home role tab aria control pill home aria select true Home class nav item class nav link pill profile tab data toggle pill pill profile role tab aria control pill profile aria select false Profile class nav item class nav link pill contact tab data toggle pill pill contact role tab aria control pill contact aria select false contact div class tab content pill div class tab pane fade active pill home role aria pill home tab div class tab pane fade pill profile role aria pill profile tab div class tab pane fade pill contact role aria pill contact tab vertical pill vertical pill design Home Profile Messages Settings anim esse magna qui minim non Culpa sit aute culpa anim dolor aute qui magna esse anim dolor culpa anim dolor aute qui magna esse anim dolor div class row div class div class nav flex column nav pill pill tab role aria orientation vertical class nav link active pill home tab data toggle pill pill home role tab aria control pill home aria select true Home class nav link pill profile tab data toggle pill pill profile role tab aria control pill profile aria select false Profile class nav link pill message tab data toggle pill pill message role tab aria control pill message aria select false message class nav link pill setting tab data toggle pill pill setting role tab aria control pill setting aria select false Settings div class div class tab content pill div class tab pane fade active pill home role aria pill home tab div class tab pane fade pill profile role aria pill profile tab div class tab pane fade pill message role aria pill message tab div class tab pane fade pill setting role aria pill setting tab Card Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Card Dash card provide flexible extensible content container multiple variant option Basic Example example basic card mixed content fix width design Card title quick example text build card title bulk card content div class card style width image placeholder class card alt div class card body class card title card title class card text quick example text build card title bulk card content class primary Card body building block card body use need padded section card design text card body div class card div class card body text card body Titles text link Card title add title tag way link add place add link tag subtitle add subtitle tag title subtitle item place body item card title subtitle align nicely design Card title card subtitle quick example text build card title bulk card content card link link div class card style width div class card body class card title card title class card subtitle text muted Card subtitle class card text quick example text build card title bulk card content class card link Card link class card link link Kitchen sink mix match multiple content type create card need throw show image style block text style list group wrap fix width card design Card title quick example text build card title bulk card content card link link div class card style width image placeholder class card alt div class card body class card title card title class card text quick example text build card title bulk card content class list group list group flush class list group item class list group item class list group item Vestibulum div class card body class card link Card link class card link link Header Footer Add optional header footer card design feature special title treatment support text natural lead additional content div class card div class card header Featured div class card body class card title special title treatment class card text support text natural lead additional content class primary Design feature special title treatment support text natural lead additional content day ago div class card text center div class card header Featured div class card body class card title special title treatment class card text support text natural lead additional content class primary div class card footer text muted day ago text alignment quickly change text alignment card entirety specific part text align class design special title treatment support text natural lead additional content special title treatment support text natural lead additional content special title treatment support text natural lead additional content div class card style width div class card body class card title special title treatment class card text support text natural lead additional content class primary div class card text center style width div class card body class card title special title treatment class card text support text natural lead additional content class primary div class card text end style width div class card body class card title special title treatment class card text support text natural lead additional content class primary Images Cards include option work image choose append image cap end card overlay image card content simply embed image card image place image card text text add card text text style standard tag design Card title wide card support text natural lead additional content content little bit long update min ago div class card image class card alt div class card body class card title card title class card text wide card support text natural lead additional content content little bit long class card text small class text muted update min ago image place image card text text add card text text style standard tag design Card title wide card support text natural lead additional content content little bit long update min ago div class card div class card body class card title card title class card text wide card support text natural lead additional content content little bit long class card text small class text muted update min ago image class card alt image overlay turn image card background overlay card text depend image need additional style utility design Card title wide card support text natural lead additional content content little bit long update min ago div class card dark text white class rounded alt div class card overlay class card title card title class card text wide card support text natural lead additional content content little bit long class card text update min ago Horizontal combination grid utility class card horizontal mobile friendly responsive way example remove grid gutter use class card horizontal breakpoint adjustment need depend card content design Card title wide card support text natural lead additional content content little bit long update min ago div class card style max width div class row div class col image class fluid round start alt div class col div class card body class card title card title class card text wide card support text natural lead additional content content little bit long class card text small class text muted update min ago Card layout addition style content card Bootstrap include option lay series card time layout option responsive card group use card group render card single attach element equal width height column card group start stack use display flex attach uniform dimension start breakpoint design Card title wide card support text natural lead additional content content little bit long update min ago Card title card support text natural lead additional content update min ago Card title wide card support text natural lead additional content card long content equal height action update min ago div class card group div class card image placeholder class card alt div class card body class card title card title class card text wide card support text natural lead additional content content little bit long class card text small class text muted update min ago div class card image placeholder class card alt div class card body class card title card title class card text card support text natural lead additional content class card text small class text muted update min ago div class card image placeholder class card alt div class card body class card title card title class card text wide card support text natural lead additional content card long content equal height action class card text small class text muted update min ago Grid card use Bootstrap grid system col class control grid column wrap card row example lay card column col split card equal width multiple row medium breakpoint design Card title long card support text natural lead additional content content little bit long card title long card support text natural lead additional content content little bit long card title long card support text natural lead additional content card title long card support text natural lead additional content content little bit long div class row row row col div class col div class card image placeholder class card alt div class card body class card title card title class card text long card support text natural lead additional content content little bit long div class col div class card image placeholder class card alt div class card body class card title card title class card text long card support text natural lead additional content content little bit long div class col div class card image placeholder class card alt div class card body class card title card title class card text long card support text natural lead additional content div class col div class card image placeholder class card alt div class card body class card title card title class card text long card support text natural lead additional content content little bit long Placeholder Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Use loading placeholder component page indicate load Example Design Card title quick example text build card title bulk card content div class card image class card alt div class card body class card title card title class card text quick example text build card title bulk card content class primary div class card image class card alt div class card body class card title placeholder glow span class placeholder class card text placeholder glow span class placeholder span class placeholder span class placeholder span class placeholder span class placeholder class primary disabled placeholder COPY CLIPBOARD Width change width grid column class width utility inline style design span class placeholder span class placeholder span class placeholder style width Color default placeholder use overridden custom color utility class design span class placeholder span class placeholder primary span class placeholder secondary span class placeholder success span class placeholder danger span class placeholder warning span class placeholder info span class placeholder light span class placeholder dark size size base typographic style parent element customize size modifier design span class placeholder placeholder span class placeholder span class placeholder placeholder span class placeholder placeholder Animation Animate placeholder glow wave well convey perception actively load design class placeholder glow span class placeholder class placeholder wave span class placeholder Collapse Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Collapse Toggle visibility content project class Example click button hide element class change hide content apply transition show content use link attribute button data target attribute case data require design Link Button data target anim cliche high life squid Nihil anim keffiyeh craft beer class primary data toggle collapse role button aria expand false aria control link button class primary type button data toggle collapse data target aria expand false aria control Button data target div class collapse div class card card body anim cliche high life squid Nihil anim keffiyeh craft beer multiple target hide multiple element reference selector data target attribute multiple hide element reference data target attribute Design Toggle element Toggle second element Toggle element anim cliche high life squid Nihil anim keffiyeh craft beer anim cliche high life squid Nihil anim keffiyeh craft beer class primary data toggle collapse role button aria expand false aria control Toggle element button class primary type button data toggle collapse data target aria expand false aria control Toggle second element button class primary type button data toggle collapse data target collapse aria expand false aria control Toggle element div class row div class col div class collapse multi collapse div class card card body anim cliche high life squid Nihil anim keffiyeh craft beer div class col div class collapse multi collapse div class card card body anim cliche high life squid Nihil anim keffiyeh craft beer Horizontal Design Toggle width collapse placeholder content horizontal collapse hide default show trigger button class primary type button data toggle collapse data target aria expand false aria control Toggle width collapse div style min height div class collapse collapse horizontal div class card card body style width placeholder content horizontal collapse hide default show trigger Alerts Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Alerts provide contextual feedback message typical user action handful available flexible alert message Simple Alert Alerts available length text optional dismiss button proper styling use require contextual class success design primary alert check secondary alert check success alert check danger alert check warning alert check info alert check light alert check dark alert check div class alert alert primary role alert primary alert check div class alert alert secondary role alert secondary alert check div class alert alert success role alert success alert check div class alert alert danger role alert danger alert check div class alert alert warn role alert warning alert check div class alert alert info role alert info alert check div class alert alert light role alert light alert check div class alert alert dark role alert dark alert check live Alert click button alert hide inline style start dismiss destroy build close button design live alert button type button class primary live alert div class alert alert primary alert dismissible role alert strong nice trigger alert button type button class close data dismiss alert aria label close Link color use link utility class quickly provide match colored link alert design simple primary alert example link click like simple secondary alert example link click like simple success alert example link click like simple danger alert example link click like simple warning alert example link click like simple info alert example link click like simple light alert example link click like simple dark alert example link click like div class alert alert primary role alert simple primary alert class alert link example link click like div class alert alert secondary role alert simple secondary alert class alert link example link click like div class alert alert success role alert simple success alert class alert link example link click like div class alert alert danger role alert simple danger alert class alert link example link click like div class alert alert warn role alert simple warning alert class alert link example link click like div class alert alert info role alert simple info alert class alert link example link click like div class alert alert light role alert simple light alert class alert link example link click like div class alert alert dark role alert simple dark alert class alert link example link click like additional content Alerts contain additional element like heading paragraph divider design yeah successfully read important alert message example text run bit long space alert work kind content need sure use margin utility thing nice tidy div class alert alert success role alert class alert heading yeah successfully read important alert message example text run bit long space alert work kind content class need sure use margin utility thing nice tidy icon similarly use Bootstrap icon create alert icon depend icon content want add utility custom style design example alert icon example success alert icon example warning alert icon example danger alert icon div class alert alert primary flex align item center role alert width height fill class info circle fill path div example alert icon div class alert alert success flex align item center role alert width height fill class check circle fill path div example success alert icon div class alert alert warn flex align item center role alert width height fill class exclamation triangle fill path div example warning alert icon div class alert alert danger flex align item center role alert width height fill class exclamation triangle fill path div example danger alert icon dismiss alert possible dismiss alert inline Design Holy guacamole check field div class alert alert warning alert dismissible fade role alert strong holy guacamole check field button type button class close data dismiss alert aria label close span aria hide true times Sign Dash Bootstrap Admin Dashboard Template enter user information User Email Password Confirm Password agree term Service Privacy Policy create Free Account member login Forgot password Layout Dash Bootstrap Admin Dashboard Template Dashboard Layouts Pages Pages Profile Settings Billing Pricing Error authentication Sign Sign Forget Password Layouts Components Components Menu Level Level level Item Nav Item Documentation Docs Notifications Rishi Sina Ray view notification John View profile Edit Profile Activity Log Pro Account Settings Sign Layouts Customize overview page layout choose good fit need demo layout Classic Typography Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Typography Documentation example Bootstrap typography include global setting heading body text list heading heading available design Heading Example bootstrap head bootstrap head bootstrap head bootstrap head bootstrap head bootstrap head bootstrap head bootstrap head bootstrap head bootstrap head bootstrap head bootstrap head Customizing heading use include utility class recreate small secondary heading text Bootstrap design Fancy display head fade secondary text fancy display head small class text muted fade secondary text Display heading traditional heading element design work well meat page content need heading stand consider display head large slightly opinionated heading style mind heading responsive default possible enable responsive font size design Display Display Display Display Display Display class Display class display class Display class display class Display class Display body text body text body copy text form main content design lead text paragraph stand add design lead paragraph stand regular paragraph class lead Inline text element styling common inline element design use mark tag highlight text line text mean treat delete text line text mean treat long accurate line text mean treat addition document line text render underline line text mean treat fine print line render bold text line render italicize text use mark tag mark highlight text del line text mean treat delete text line text mean treat long accurate line text mean treat addition document line text render underline small line text mean treat fine print strong line render bold text line render italicize text quote block content source document wrap quote design know quote contain element class know quote contain element name source add identify source wrap source work design know quote contain element famous Source Title figure class know quote contain element class footer famous cite title Source Title Source Title alignment Use text utility need change alignment design know quote contain element famous Source Title figure class text center class know quote contain element class footer famous cite title Source Title Source Title design know quote contain element famous Source Title figure class text end class know quote contain element class footer famous cite title Source Title Source Title Lists Unstyled remove default list style leave margin list item immediate child apply immediate child list item mean need add class nest list design class list unstyled Inline remove list bullet apply light margin combination class inline inline item design class list inline class list inline item class list inline item class list inline item description list alignment Align term description horizontally grid system predefine class semantic long term optionally add truncate class truncate text ellipsis design Description list description list perfect define term truncated term truncate Nesting nest definition list class row class col description list class col description list perfect define term class col class col class col class col class col text truncate truncated term truncate class col class col Nesting class col class row class col nest definition list class col Letter Spacing Change letter space utility design head Title Letter space head Title Letter space head Title Letter space head Title Letter space head Title Letter space head Title Letter space head Title Letter space div class head Title Letter space class head Title Letter space class base head Title Letter space class head Title Letter space class head Title Letter space class head Title Letter space class head Title Letter space Button Group Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored links opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Button Group Group series button single line button group super power basic example Wrap series button group add optional radio style behavior design leave Middle Right div class group role group aria label basic example button type button class primary leave button type button class primary Middle button type button class primary right class add group link alternative navigation component design Active link Link Link div class group role group aria label basic example button type button class primary leave button type button class primary Middle button type button class primary right Mixed Styles design leave Middle Right div class group role group aria label basic mixed style example button type button class danger leave button type button class warning Middle button type button class success right Outline Styles Design leave Middle Right div class group role group aria label Basic outlined example button type button class outline primary leave button type button class outline primary Middle button type button class outline primary right radio button group Combine button like radio toggle button seamless look button group design div class group role group aria label Basic toggle button group input type class check label class outline primary input type class check label class outline primary input type class check label class outline primary Design Radio Radio radio div class group role group aria label basic radio toggle button group input type radio class check check label class outline primary radio input type radio class check label class outline primary radio input type radio class check label class outline primary radio Button Combine set button group button complex component use utility class need space group button design div class role aria label button group div class group role group aria label group button type button class primary button type button class primary button type button class primary button type button class primary div class group role group aria label second group button type button class primary button type button class primary button type button class primary div class group role group aria label group button type button class primary size instead apply button size class button group add group include nest multiple group design leave Middle right left Middle right left Middle right div class group group role group aria label large button group button type button class primary leave button type button class primary Middle button type button class primary right div class group role group aria label button group button type button class primary leave button type button class primary Middle button type button class primary right div class group group role group aria label small button group button type button class primary leave button type button class primary Middle button type button class primary right Button Nesting Place group group want menu mix series button design link link div class group role group aria label Button group nest button type button class primary button type button class primary div class group role group button type button class primary toggle data toggle aria true aria expand false div class menu aria class item link class item link vertical variation set button appear vertically stack horizontally split button support design Button Button link link Button Button link link link link link link div class group vertical role group aria label vertical button group button type button class primary Button button type button class primary Button div class group role group button type button class primary toggle data toggle aria true aria expand false div class menu aria placement start style position absolute change transform left transform class item link class item link button type button class primary Button button type button class primary Button div class group role group button type button class primary toggle data toggle aria true aria expand false div class menu aria class item link class item link div class group role group button type button class primary toggle data toggle aria true aria expand false div class menu aria class item link class item link div class group role group button type button class primary toggle data toggle aria true aria expand false div class menu aria class item link class item link toast Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Toasts push notification visitor toast lightweight easily customizable alert message Basic example encourage extensible predictable toast recommend header body toast header use display flex allow easy alignment content thank margin utility design Bootstrap min ago Hello world toast message div class toast role alert aria live assertive aria atomic true div class toast header class round alt strong class auto Bootstrap small min ago button type button class close data dismiss toast aria label close span aria hide true times div class toast body Hello world toast message Translucent Design Bootstrap min ago Hello world toast message div class toast role alert aria live assertive aria atomic true div class toast header class round alt strong class auto Bootstrap small class text muted min ago button type button class close data dismiss toast aria label close span aria hide true times div class toast body Hello world toast message stack multiple toast default vertically stack readable manner design Bootstrap like Bootstrap like div class toast role alert aria live assertive aria atomic true div class toast header class round alt strong class auto Bootstrap small class text muted button type button class close data dismiss toast aria label close span aria hide true times div class toast body like div class toast role alert aria live assertive aria atomic true div class toast header class round alt strong class auto Bootstrap small class text muted second ago button type button class close data dismiss toast aria label close span aria hide true times div class toast body head toast stack automatically Custom content Design Hello world toast message div class toast align item center role alert aria live assertive aria atomic true div class flex div class toast body Hello world toast message button type button class close auto data dismiss toast aria label close alternatively add additional control component toast design Hello world toast message action close div class toast fade role alert aria live assertive aria atomic true div class toast body Hello world toast message div class border button type button class primary action button type button class secondary data dismiss toast close Color scheme Design Hello world toast message div class toast align item center text white primary role alert aria live assertive aria atomic true div class flex div class toast body Hello world toast message button type button class close close white auto data dismiss toast aria label close Placement Place toast custom need right notification middle toast time positioning style right design Bootstrap min ago Hello world toast message div aria live polite aria atomic true style position relative min height div class toast style position absolute right div class toast header class round alt strong class auto Bootstrap small min ago button type button class close data dismiss toast aria label close span aria hide true times div class toast body Hello world toast message system generate notification consider wrapping element easily stack design Bootstrap like bootstrap second ago head toast stack automatically div aria live polite aria atomic true style position relative min height div style position absolute right div class toast role alert aria live assertive aria atomic true div class toast header class round alt strong class auto Bootstrap small class text muted button type button class close data dismiss toast aria label close span aria hide true times div class toast body like div class toast role alert aria live assertive aria atomic true div class toast header class round alt strong class auto Bootstrap small class text muted second ago button type button class close data dismiss toast aria label close span aria hide true times div class toast body head toast stack automatically fancy utility align toast horizontally vertically design Bootstrap min ago Hello world toast message div aria live polite aria atomic true class flex justify content center align item center style min height div class toast role alert aria live assertive aria atomic true div class toast header class round alt strong class auto Bootstrap small min ago button type button class close data dismiss toast aria label close span aria hide true times div class toast body Hello world toast message Accessibility toast intend small interruption visitor user help screen reader similar assistive technology wrap toast aria live region change live region inject update toast component automatically announce screen reader need user focus interrupt user additionally include aria ensure entire toast announce single atomic unit announce change lead problem update toast content display toast content later point time information need important process list error form design Bootstrap min ago Hello world toast message div role alert aria live assertive aria atomic true class toast data false div class toast header class round alt strong class auto Bootstrap small min ago button type button class close data dismiss toast aria label close span aria hide true times div class toast body Hello world toast message Progress bar Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Progress Documentation example Bootstrap custom progress bar feature support stacked bar animated background text label work Design div class progress div class progress bar role aria aria aria div class progress div class progress bar role style width aria aria aria div class progress div class progress bar role style width aria aria aria div class progress div class progress bar role style width aria aria aria div class progress div class progress bar role style width aria aria aria Labels Add label progress bar place text bar design div class progress div class progress bar role style width aria aria aria Height set height value change value inner bar automatically resize accordingly design div class progress style height div class progress bar role style width aria aria aria div class progress style height div class progress bar role style width aria aria aria Backgrounds use background utility class change appearance individual progress bar design div class progress div class progress bar success role style width aria aria aria div class progress div class progress bar info role style width aria aria aria div class progress div class progress bar warning role style width aria aria aria div class progress div class progress bar danger role style width aria aria aria multiple bar Design div class progress div class progress bar role style width aria aria aria div class progress bar success role style width aria aria aria div class progress bar info role style width aria aria aria Striped Add bar stripe bar apply stripe gradient progress bar background color design div class progress div class progress bar progress bar stripe role style width aria aria aria div class progress div class progress bar progress bar stripe success role style width aria aria aria div class progress div class progress bar progress bar stripe info role style width aria aria aria div class progress div class progress bar progress bar stripe warning role style width aria aria aria div class progress div class progress bar progress bar stripe danger role style width aria aria aria animated stripe striped gradient animate add bar animate bar animate stripe right left animation design div class progress div class progress bar progress bar stripe progress bar animate role aria aria aria style width Opacity Geeks Bootstrap Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Opacity Control opacity element opacity property set opacity level element opacity level describe transparency level transparent visible completely transparent design div class div class div class div class Credits Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Credits let opportunity thank creative mind great product library Bootstrap free design source Fonts Feather Icon Material design icon bootstrap icon Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts Documentation example add custom Bootstrap animation datum attribute local title storage example Hover button direction right leave design right leave button type button class secondary data toggle data placement title button type button class secondary data toggle data placement right title right right button type button class secondary data toggle data placement title button type button class secondary data toggle data placement leave title leave leave Sign Dash Bootstrap Admin Dashboard Template enter user information email Password remember Sign Create Account Forgot password set Dash Bootstrap Admin Dashboard Template Dashboard Layouts Pages Pages Profile Settings Billing Pricing Error authentication Sign Sign Forget Password Layouts Components Components Menu Level Level level Item Nav Item Documentation Docs Notifications Rishi Sina Ray view notification John View profile Edit Profile Activity Log Pro Account Settings Sign General General Setting Profile configuration setting General Settings Avatar Change Remove Cover photo change Basic information Email Phone Optional Location Select Country India USA Address line Address line Zip code Save Changes email set Add email setting profile Email new email Save Changes change password current password New password Confirm new password Password requirement ensure requirement meet minimum character long well lowercase character uppercase character number symbol whitespace character Save Changes Preferences configure preference Preferences Langauge English Hindi spanish Arabic Time Zone Date Format Preference Preference Default Choose option default tell Open mail default Save Changes Notifications Change notification setting Notification email mobile Slack start Slack personal notification connect Slack Activity Conversation Files share team request access design comment thread follow comment project activity activity add project team activity invitee sign request access team invite team send notification Daily Digest Everyday Time Save Changes Delete Account easily set social medium account Danger Zone Delete content article comment reading list chat message allow available Delete Account Feel free contact question error Dash Bootstrap Admin Dashboard Template Oops page find simply leverage expertise consultation team home Dash Bootstrap Admin Dashboard Template Home Components Docs Introduction Gulp Credits Utilities Borders Colored link opacity ratio Stacks Text Text truncation Vertical rule Colors Shadows Typography Components Accordions Alerts Badge Buttons Button group Card Carousel Close Button Collapse Forms List group Modal tab Pagination Popovers Progress Spinners Tables Toasts indicate current page location navigational hierarchy automatically add separator use ordered unordered list link list item create minimally style use utility add additional style desire design Home Home Library Home Library Data nav aria label class class item active aria current page home nav aria label class class item Home class item active aria current page Library nav aria label class class item Home class item Library class item active aria current page datum Dividers Dividers automatically add content change modify local custom property divider divider Sass variable divider flip counterpart need default Sass variable set fallback custom property way global divider override recompile time design Home Library nav style divider aria label class class item Home class item active aria current page Library Billing Dash Bootstrap Admin Dashboard Template Dashboard Layouts Pages Pages Profile Settings Billing Pricing Error authentication Sign Sign Forget Password Layouts Components Components Menu Level Level level Item Nav Item Documentation Docs Notifications Rishi Sina Ray view notification John View profile Edit Profile Activity Log Pro Account Settings Sign Billing Current Plan Overview Current plan Starter Jan unlimited access essential tool design bootstrap theme illustrator icon Payment Jan Yearly Payment learn membership policy Change Plan Cancel Subscription Payment method Remove Change Card Billing address Shipping Billing Address Morgan Street Tallahassee Edit Delete Remove Default Billing mail phone Default Billing Address Mildred Morgan Street Tallahassee Edit Delete Set Default mail phone Add New Address Update plan change plan choose available plan bellow Standard Active Plan Single Site Unlimited site Extended user Save continue Close Billing Address provide billing address credit card provide Country India Address line Address line City New York Angeles Chicago State Zip Postal Code default payment method Save Address