Bootstrap 4 Documentation

Guides

• Accessibility
• Alerts
• Approach
• Badges
• Borders
• Breadcrumb
• Browsers and devices
• Build tools
• Button group
• Buttons
• Cards
• Carousel
• Clearfix
• Close icon
• Code
• Collapse
• Colors
• Contents
• Display property
• Download
• Dropdowns
• Embeds
• Figures
• Flex
• Float
• Forms
• Grid system
• Icons
• Image replacement
• Images
• Input group
• Interactions
• Introduction
• JavaScript
• Jumbotron
• List group
• Media object
• Modal
• Most wanted features
• Navbar
• Navs
• Overflow
• Overview
• Pagination
• Popovers
• Position
• Progress
• Reboot
• Screen readers
• Scrollspy
• Shadows
• Sizing
• Spacing
• Spinners
• Stretched link
• Tables
• Text
• Theming Bootstrap
• Toasts
• Tooltips
• Typography
• Utilities for layout
• Vertical alignment
• Visibility
• Webpack

Sections

• $().popover(options) - Popovers
• $().tab - List group
• $().tab - Navs
• $().toast(options) - Toasts
• $().tooltip(options) - Tooltips
• .carousel('cycle') - Carousel
• .carousel('dispose') - Carousel
• .carousel('next') - Carousel
• .carousel('nextWhenVisible') - Carousel
• .carousel('pause') - Carousel
• .carousel('prev') - Carousel
• .carousel('to') - Carousel
• .carousel(number) - Carousel
• .carousel(options) - Carousel
• .collapse('dispose') - Collapse
• .collapse('hide') - Collapse
• .collapse('show') - Collapse
• .collapse('toggle') - Collapse
• .collapse(options) - Collapse
• .modal('dispose') - Modal
• .modal('handleUpdate') - Modal
• .modal('hide') - Modal
• .modal('show') - Modal
• .modal('toggle') - Modal
• .modal(options) - Modal
• .popover('disable') - Popovers
• .popover('dispose') - Popovers
• .popover('enable') - Popovers
• .popover('hide') - Popovers
• .popover('show') - Popovers
• .popover('toggle') - Popovers
• .popover('toggleEnabled') - Popovers
• .popover('update') - Popovers
• .scrollspy('dispose') - Scrollspy
• .scrollspy('refresh') - Scrollspy
• .tab(‘dispose') - Navs
• .tab(‘show') - List group
• .tab(‘show') - Navs
• .toast('dispose') - Toasts
• .toast('hide') - Toasts
• .toast('show') - Toasts
• .tooltip('disable') - Tooltips
• .tooltip('dispose') - Tooltips
• .tooltip('enable') - Tooltips
• .tooltip('hide') - Tooltips
• .tooltip('show') - Tooltips
• .tooltip('toggle') - Tooltips
• .tooltip('toggleEnabled') - Tooltips
• .tooltip('update') - Tooltips
• Abbreviations - Typography
• About - Cards
• About - Embeds
• About - Spinners
• Accessibility - Breadcrumb
• Accessibility - Collapse
• Accessibility - Dropdowns
• Accessibility - Input group
• Accessibility - Modal
• Accessibility - Toasts
• Accordion example - Collapse
• Active - Dropdowns
• Active items - List group
• Active state - Buttons
• Add and Subtract functions - Theming Bootstrap
• Add to map - Theming Bootstrap
• Additional content - Alerts
• Additional icon sets - Icons
• Additional resources - Accessibility
• Additive - Borders
• Address - Reboot
• Align content - Flex
• Align items - Flex
• Align self - Flex
• Aligning images - Images
• Alignment - Grid system
• Alignment - Media object
• Alignment - Pagination
• Alignment - Spinners
• Alignment - Typography
• All breakpoints - Grid system
• All colors - Theming Bootstrap
• All-in-one - Overview
• Always responsive - Tables
• Android stock browser - Browsers and devices
• Animated stripes - Progress
• Approach - Reboot
• Aspect ratios - Embeds
• Asynchronous functions and transitions - JavaScript
• Auto margins - Flex
• Auto-layout columns - Grid system
• Auto-sizing - Forms
• Autoprefixer - Build tools
• Available styles - Navs
• Available variables - Theming Bootstrap
• Background and color - Cards
• Background color - Colors
• Background gradient - Colors
• Backgrounds - Progress
• Base nav - Navs
• Basic - Toasts
• Basic example - Button group
• Basic example - Input group
• Basic example - List group
• Blockquote - Reboot
• Blockquotes - Typography
• Body - Cards
• Bootstrap Icons - Icons
• Bootstrap source code - Contents
• Border - Borders
• Border - Cards
• Border color - Borders
• Border spinner - Spinners
• Border-radius - Borders
• Bordered table - Tables
• Borderless table - Tables
• Box-sizing - Introduction
• Brand - Navbar
• Breakpoint specific - Tables
• Breakpoint variables - Theming Bootstrap
• Browser defaults - Forms
• Browser zooming - Browsers and devices
• Bundle - Introduction
• Button addons - Input group
• Button plugin - Buttons
• Button tags - Buttons
• Button toolbar - Button group
• Buttons - Spinners
• Buttons with dropdowns - Input group
• CSPs and embedded SVGs - Introduction
• CSS - Introduction
• CSS files - Contents
• CSS variables - Theming Bootstrap
• Captions - Tables
• Card columns - Cards
• Card decks - Cards
• Card groups - Cards
• Card layout - Cards
• Card styles - Cards
• Change animation - Modal
• Change transition duration - Carousel
• Changing display - Utilities for layout
• Changing the separator - Breadcrumb
• Checkbox and radio buttons - Buttons
• Checkboxes - Forms
• Checkboxes and radios - Forms
• Checkboxes and radios - Input group
• Classes - Approach
• Classes - Float
• Code blocks - Code
• Code conventions - Approach
• Color - Colors
• Color - Theming Bootstrap
• Color contrast - Accessibility
• Color contrast - Theming Bootstrap
• Color schemes - Navbar
• Colors - Spinners
• Column breaks - Grid system
• Column sizing - Forms
• Column wrapping - Grid system
• Columns and gutters - Grid system
• Common values - Position
• Community - Introduction
• Compiled CSS and JS - Download
• Component elements - Approach
• Components - Introduction
• Components - Theming Bootstrap
• Composer - Download
• Containers - Navbar
• Containers - Overview
• Content types - Cards
• Contextual classes - List group
• Contextual classes - Tables
• Contextual variations - Badges
• Crossfade - Carousel
• Custom content - List group
• Custom file input - Input group
• Custom forms - Forms
• Custom forms - Input group
• Custom select - Input group
• Custom styles - Forms
• Customizing - Forms
• Customizing headings - Typography
• Customizing the grid - Grid system
• Data attributes - JavaScript
• Default (stacked) - Forms
• Default settings - JavaScript
• Dependencies - JavaScript
• Description list alignment - Typography
• Desktop browsers - Browsers and devices
• Direction - Flex
• Directions - Dropdowns
• Disable text wrapping - Buttons
• Disable touch swiping - Carousel
• Disabled - Dropdowns
• Disabled - Forms
• Disabled and active states - Pagination
• Disabled elements - Popovers
• Disabled elements - Tooltips
• Disabled forms - Forms
• Disabled items - List group
• Disabled state - Buttons
• Dismiss on next click - Popovers
• Dismissing - Alerts
• Display headings - Typography
• Display in print - Display property
• Dividers - Dropdowns
• Dropdown options - Dropdowns
• Dropleft - Dropdowns
• Dropright - Dropdowns
• Dropup - Dropdowns
• Dynamic heights - Modal
• Embedding YouTube videos - Modal
• Enable flex behaviors - Flex
• Equal-width - Grid system
• Equal-width multi-line - Grid system
• Escape SVG - Theming Bootstrap
• Events - Alerts
• Events - Carousel
• Events - Collapse
• Events - Dropdowns
• Events - JavaScript
• Events - List group
• Events - Modal
• Events - Navs
• Events - Popovers
• Events - Scrollspy
• Events - Toasts
• Events - Tooltips
• Example - Badges
• Example - Breadcrumb
• Example - Cards
• Example - Carousel
• Example - Collapse
• Example - Embeds
• Example - Media object
• Example - Popovers
• Example in navbar - Scrollspy
• Example usage - Grid system
• Example with list-group - Scrollspy
• Example with nested nav - Scrollspy
• Example: Enable popovers everywhere - Popovers
• Example: Enable tooltips everywhere - Tooltips
• Example: Using the container option - Popovers
• Examples - Alerts
• Examples - Buttons
• Examples - Display property
• Examples - Download
• Examples - Dropdowns
• Examples - Modal
• Examples - Shadows
• Examples - Spacing
• Examples - Tables
• Examples - Theming Bootstrap
• Examples - Toasts
• Examples - Tooltips
• External content - Navbar
• Fade effect - List group
• Fade effect - Navs
• File browser - Forms
• File structure - Theming Bootstrap
• Fill - Flex
• Fill and justify - Navs
• Fixed bottom - Position
• Fixed top - Position
• Flex - Spinners
• Flexbox options - Utilities for layout
• Flexible HTML - Approach
• Floats - Spinners
• Fluid - Overview
• Flush - List group
• Font weight and italics - Text
• Form controls - Forms
• Form grid - Forms
• Form groups - Forms
• Form row - Forms
• Forms - Dropdowns
• Forms - Navbar
• Forms - Reboot
• Four directions - Popovers
• Functions - Theming Bootstrap
• Global settings - Typography
• Grays - Theming Bootstrap
• Grid cards - Cards
• Grid options - Grid system
• Grid tiers - Grid system
• Grow and shrink - Flex
• Growing spinner - Spinners
• Gutters - Grid system
• HTML and CSS over JS - Approach
• HTML5 [hidden] attribute - Reboot
• HTML5 doctype - Introduction
• Header and footer - Cards
• Headers - Dropdowns
• Headings - Typography
• Headings and paragraphs - Reboot
• Height - Progress
• Help text - Forms
• Hiding elements - Display property
• Horizontal - Cards
• Horizontal - Collapse
• Horizontal - List group
• Horizontal alignment - Grid system
• Horizontal alignment - Navs
• Horizontal centering - Spacing
• Horizontal form - Forms
• Hoverable rows - Tables
• How it works - Carousel
• How it works - Collapse
• How it works - Display property
• How it works - Forms
• How it works - Grid system
• How it works - Modal
• How it works - Navbar
• How it works - Progress
• How it works - Scrollspy
• How it works - Spacing
• Identifying the containing block - Stretched link
• Image caps - Cards
• Image overlays - Cards
• Image thumbnails - Images
• Images - Cards
• Important globals - Introduction
• Importing - Theming Bootstrap
• Importing Compiled CSS - Webpack
• Importing JavaScript - Webpack
• Importing Precompiled Sass - Webpack
• Importing Styles - Webpack
• Individual .carousel-item interval - Carousel
• Individual or compiled - JavaScript
• Inline - Forms
• Inline - Typography
• Inline code - Code
• Inline elements - Reboot
• Inline forms - Forms
• Inline text elements - Typography
• Input group validation - Forms
• Installing Bootstrap - Webpack
• Interactive components - Accessibility
• Internet Explorer - Browsers and devices
• Introduction - Theming Bootstrap
• JS - Introduction
• JS files - Contents
• JavaScript behavior - Alerts
• JavaScript behavior - List group
• JavaScript behavior - Navs
• JavaScript behavior - Toasts
• Justify content - Flex
• Kitchen sink - Cards
• Labels - Progress
• Layout - Forms
• Lead - Typography
• Link color - Alerts
• Link functionality caveat - Buttons
• Links - Badges
• Links and buttons - List group
• List groups - Cards
• Lists - Reboot
• Lists - Typography
• Live - Toasts
• Live demo - Modal
• Local documentation - Build tools
• Maps and loops - Theming Bootstrap
• Margin - Spinners
• Margin and padding - Utilities for layout
• Margin utilities - Grid system
• Markup - Tooltips
• Media list - Media object
• Menu alignment - Dropdowns
• Menu content - Dropdowns
• Menu items - Dropdowns
• Methods - Alerts
• Methods - Buttons
• Methods - Carousel
• Methods - Collapse
• Methods - Dropdowns
• Methods - List group
• Methods - Modal
• Methods - Navs
• Methods - Popovers
• Methods - Scrollspy
• Methods - Toasts
• Methods - Tooltips
• Misc elements - Reboot
• Mix and match - Grid system
• Mixins - Float
• Mixins - Grid system
• Mixins utilities - Cards
• Mobile devices - Browsers and devices
• Modal components - Modal
• Modals and dropdowns on mobile - Browsers and devices
• Modifiers - Theming Bootstrap
• Modify map - Theming Bootstrap
• Monospace - Text
• More - Icons
• Multiple addons - Input group
• Multiple bars - Progress
• Multiple inputs - Input group
• Multiple targets - Collapse
• Naming a source - Typography
• Native font stack - Reboot
• Nav - Navbar
• Navbar Dropdowns - Browsers and devices
• Navigation - Cards
• Negative margin - Spacing
• Nesting - Button group
• Nesting - Grid system
• Nesting - Media object
• No conflict - JavaScript
• No gutters - Grid system
• No special fallbacks when JavaScript is disabled - JavaScript
• Notation - Display property
• Notation - Spacing
• NuGet - Download
• Offset classes - Grid system
• Offsetting columns - Grid system
• Optional sizes - Modal
• Options - Carousel
• Options - Collapse
• Options - Dropdowns
• Options - Modal
• Options - Popovers
• Options - Scrollspy
• Options - Toasts
• Options - Tooltips
• Order - Flex
• Order - Media object
• Order classes - Grid system
• Outline buttons - Buttons
• Overflow and scrolling - Browsers and devices
• Overlay components - Approach
• Overview - Dropdowns
• Overview - Float
• Overview - Forms
• Overview - Pagination
• Overview - Popovers
• Overview - Toasts
• Overview - Tooltips
• Overview and Limitations - Accessibility
• Package managers - Download
• Page defaults - Reboot
• Picture - Images
• Pill badges - Badges
• Pills - Navs
• Pills with dropdowns - Navs
• Placement - Navbar
• Placement - Spinners
• Placement - Toasts
• Pointers on buttons - Reboot
• Precompiled Bootstrap - Contents
• Preferred - Icons
• Preformatted text - Reboot
• Printing - Browsers and devices
• Programmatic API - JavaScript
• Quick start - Introduction
• Radios - Forms
• Range - Forms
• Range Inputs - Forms
• Readonly - Forms
• Readonly plain text - Forms
• Reboot - Introduction
• Reduced motion - Accessibility
• Regarding accessibility - Navs
• Relative to the parent - Sizing
• Relative to the viewport - Sizing
• Remove animation - Modal
• Remove from map - Theming Bootstrap
• Reordering - Grid system
• Required keys - Theming Bootstrap
• Reset color - Text
• Responsive - Approach
• Responsive - Float
• Responsive - Overview
• Responsive - Theming Bootstrap
• Responsive alignment - Dropdowns
• Responsive behaviors - Navbar
• Responsive breakpoints - Overview
• Responsive classes - Grid system
• Responsive font sizes - Typography
• Responsive images - Images
• Responsive meta tag - Introduction
• Responsive tables - Tables
• Row columns - Grid system
• RubyGems - Download
• Sample output - Code
• Sanitizer - JavaScript
• Sass - Build tools
• Sass - Theming Bootstrap
• Sass mixins - Grid system
• Sass options - Theming Bootstrap
• Scrolling - Navbar
• Scrolling long content - Modal
• Segmented buttons - Input group
• Select menu - Browsers and devices
• Select menu - Forms
• Separate - Introduction
• Server side - Forms
• Setting one column width - Grid system
• Single button - Dropdowns
• Size - Spinners
• Sizes - Borders
• Sizes - Buttons
• Sizing - Button group
• Sizing - Cards
• Sizing - Dropdowns
• Sizing - Forms
• Sizing - Input group
• Sizing - Pagination
• Slides only - Carousel
• Small table - Tables
• Source files - Download
• Split button - Dropdowns
• Stacked to horizontal - Grid system
• Stacking - Toasts
• Starter template - Introduction
• Static backdrop - Modal
• Sticky :hover/:focus on iOS - Browsers and devices
• Sticky top - Position
• Striped - Progress
• Striped rows - Tables
• Structural markup - Accessibility
• Subtractive - Borders
• Summary - Approach
• Summary - Reboot
• Supported browsers - Browsers and devices
• Supported content - Navbar
• Supported elements - Forms
• Switches - Forms
• Table head options - Tables
• Tables - Reboot
• Tabs - Navs
• Tabs with dropdowns - Navs
• Text - Dropdowns
• Text - Navbar
• Text align - Spinners
• Text alignment - Cards
• Text alignment - Text
• Text decoration - Text
• Text selection - Interactions
• Text transform - Text
• Text utilities - Typography
• Text wrapping and overflow - Text
• Theme colors - Theming Bootstrap
• Titles, text, and links - Cards
• Toggle states - Buttons
• Toggle visibility - Utilities for layout
• Toggler - Navbar
• Tooling setup - Build tools
• Tooltips - Forms
• Tooltips and popovers - Modal
• Translating or customizing the strings with HTML - Forms
• Translating or customizing the strings with SCSS - Forms
• Translucent - Toasts
• Triggers - Alerts
• Troubleshooting - Build tools
• Unstyled - Typography
• Usage - Carousel
• Usage - Collapse
• Usage - Dropdowns
• Usage - Modal
• Usage - Popovers
• Usage - Scrollspy
• Usage - Toasts
• Usage - Tooltips
• User input - Code
• Using custom CSS - Cards
• Using data attributes - List group
• Using data attributes - Navs
• Using dropdowns - Navs
• Using grid markup - Cards
• Using npm scripts - Build tools
• Using the grid - Modal
• Using utilities - Cards
• Util - JavaScript
• Utilities - Approach
• Validation - Forms
• Validators - Browsers and devices
• Variable defaults - Theming Bootstrap
• Variable width content - Grid system
• Variables - Code
• Variables - Grid system
• Varying modal content - Modal
• Version numbers - JavaScript
• Vertical - Navs
• Vertical alignment - Grid system
• Vertical variation - Button group
• Vertically centered - Modal
• Via JavaScript - Carousel
• Via JavaScript - Collapse
• Via JavaScript - Dropdowns
• Via JavaScript - List group
• Via JavaScript - Modal
• Via JavaScript - Navs
• Via JavaScript - Scrollspy
• Via data attributes - Carousel
• Via data attributes - Collapse
• Via data attributes - Dropdowns
• Via data attributes - Modal
• Via data attributes - Scrollspy
• Visually hidden content - Accessibility
• With align-items - Flex
• With badges - List group
• With captions - Carousel
• With controls - Carousel
• With indicators - Carousel
• Without labels - Forms
• Word break - Text
• Working with flex utilities - Navs
• Working with icons - Pagination
• Wrap - Flex
• Wrapping - Input group
• Z-index - Overview
• iOS text fields and scrolling - Browsers and devices
• jsDelivr - Download
• npm - Download
• yarn - Download
• z-index scales - Approach