JCB! Snippets

What Are JCB Snippets?

JCB Snippets are reusable HTML-based code blocks used to accelerate the creation of views, templates, and layouts in JCB.

They typically represent:

UI blocks using frameworks like UIkit, Bootstrap, etc.
Common layout structures or placeholders
Ready-to-use HTML patterns for admin or frontend views

Snippets are ideal for streamlining repetitive markup, prototyping custom layouts, and establishing consistent structure in your components.

Why Use Snippets?

JCB Snippets are built to improve development speed and reusability:

Eliminate repetition in view and layout files
Maintain visual and structural consistency
Share UI patterns across projects or teams
Quickly inject reusable frontend logic

Although helpful to beginners, Snippets are not beginner-only features —
they offer serious workflow efficiency for advanced developers too.

How Are Snippets Used in JCB?

Snippets are managed entirely from within the JCB GUI:

Click the Init button in the Snippets view.
Choose a repository to fetch Snippets from.
After selecting the repository, a list of available Snippets will be shown.
Select the Snippets you'd like to initialize into your local JCB project.

Once a snippet is initialized:

You can Reset it at any time to match its latest version from the repository.
If you have write access, you can Push your updates back to the repository.

Alternatively, fork this repository, push changes to your own fork,
and submit pull requests to propose improvements upstream.

All Snippets are stored as simple files under version control — supporting both collaboration and independence.

Index of JCB Snippets

Accordion | Details | Settings | Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
Alert | Details | Settings
Alerts - Danger | Details | Settings | Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Alerts - Dismissible | Details | Settings | Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Alerts - Heading | Details | Settings | Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Alerts - Info | Details | Settings | Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Alerts - Link | Details | Settings | Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Alerts - Success | Details | Settings | Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Alerts - Warning | Details | Settings | Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Align | Details | Settings
Animation | Details | Settings
Article | Details | Settings
Background | Details | Settings
Background - Danger | Details | Settings | Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Background - Dark | Details | Settings | Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Background - Info | Details | Settings | Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Background - Light | Details | Settings | Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Background - Primary | Details | Settings | Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Background - Secondary | Details | Settings | Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Background - Success | Details | Settings | Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Background - Warning | Details | Settings | Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Background - White | Details | Settings | Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Badge | Details | Settings | Documentation and examples for badges, our small count and labeling component.
Badge | Details | Settings
Badge - Danger | Details | Settings | Documentation and examples for badges, our small count and labeling component.
Badge - Dark | Details | Settings | Documentation and examples for badges, our small count and labeling component.
Badge - Info | Details | Settings | Documentation and examples for badges, our small count and labeling component.
Badge - Light | Details | Settings | Documentation and examples for badges, our small count and labeling component.
Badge - Pill | Details | Settings | Documentation and examples for badges, our small count and labeling component.
Badge - Primary | Details | Settings | Documentation and examples for badges, our small count and labeling component.
Badge - Secondary | Details | Settings | Documentation and examples for badges, our small count and labeling component.
Badge - Success | Details | Settings | Documentation and examples for badges, our small count and labeling component.
Badge - Warning | Details | Settings | Documentation and examples for badges, our small count and labeling component.
Border | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
Border - Danger | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
Border - Dark | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
Border - Info | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
Border - Light | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
Border - Primary | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
Border - Secondary | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
Border - Success | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
Border - Warning | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
Border - White | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
Border-*-0 | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
Breadcrumb | Details | Settings | Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.
Breadcrumb | Details | Settings
Button | Details | Settings
Button - Active | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - As Checkbox | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - As Radio | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Block | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Danger | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Dark | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Disabled | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Info | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Large | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Light | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Link | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Outline Danger | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Outline Dark | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Outline Info | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Outline Light | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Outline Primary | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Outline Secondary | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Outline Success | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Outline Warning | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Primary | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Secondary | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Small | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Success | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button - Toolbar | Details | Settings | Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
Button - Warning | Details | Settings | Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button Group | Details | Settings | Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
Button Group | Details | Settings
Button Group (nested) | Details | Settings | Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
Button Group - Large | Details | Settings | Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
Button Group - Small | Details | Settings | Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
Button Group - Vertical | Details | Settings | Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
Buttons | Details | Settings
Card | Details | Settings | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and...
Card | Details | Settings
Card - Body | Details | Settings | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and...
Card - Bottom Image | Details | Settings | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and...
Card - Columns | Details | Settings | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and...
Card - Deck | Details | Settings | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and...
Card - Footer | Details | Settings | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and...
Card - Group | Details | Settings | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and...
Card - Header | Details | Settings | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and...
Card - Header - H* | Details | Settings | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and...
Card - Image Overlay | Details | Settings | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and...
Card - Link | Details | Settings | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and...
Card - Middle Image | Details | Settings | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and...
Card - Subtitle | Details | Settings | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and...
Card - Text | Details | Settings | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and...
Card - Title | Details | Settings | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and...
Card - Top Image | Details | Settings | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and...
Card - White Text / Primary Backgroup | Details | Settings | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and...
Carousel - Caption | Details | Settings | The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with...
Carousel - Indicators | Details | Settings | The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with...
Carousel - With Controls | Details | Settings | The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with...
Check Box | Details | Settings | Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.
Check Box | Details | Settings | Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Close | Details | Settings
Col | Details | Settings | Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass...
Col-# ( 576px) | Details | Settings | Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass...
Col-* | Details | Settings | Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass...
Col-lg-# ( ≥992px) | Details | Settings | Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass...
Col-md-# ( ≥768px) | Details | Settings | Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass...
Col-sm-# ( ≥576px) | Details | Settings | Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass...
Col-xl-# ( ≥1200px) | Details | Settings | Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass...
Collapse | Details | Settings | Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
Column | Details | Settings
Column Divider modifier | Details | Settings
Column Responsive | Details | Settings
Comment | Details | Settings
Container | Details | Settings | Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass...
Container | Details | Settings
Container - Fluid | Details | Settings | Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass...
Countdown | Details | Settings
Cover Iframe | Details | Settings
Cover Image | Details | Settings
Cover Responsive height | Details | Settings
Cover Video | Details | Settings
Custom - Checkbox | Details | Settings | For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic...
Custom - File | Details | Settings | For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic...
Custom - Radio | Details | Settings | For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic...
Custom - Select | Details | Settings | For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic...
Custom - Stacked Controls | Details | Settings | For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic...
Data Spy | Details | Settings | Scrollspy has a few requirements to function properly: If building our JS from source, it requires util.js. It must be used on a Bootstrap nav...
Description list | Details | Settings
Disabled Items | Details | Settings | Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Dotnav | Details | Settings
Drop | Details | Settings
Dropdown | Details | Settings | Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by...
Dropdown | Details | Settings | Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.
Dropdown | Details | Settings
Dropdown - Divider | Details | Settings | Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by...
Dropdown - Header | Details | Settings | Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by...
Dropdown - Item Disabled | Details | Settings | Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by...
Dropdown - Menu Right | Details | Settings | Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by...
Dropdown - Show | Details | Settings | Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by...
Dropdown - Split | Details | Settings | Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by...
Dropup | Details | Settings | Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by...
Dropup - Split | Details | Settings | Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by...
Fluid Images | Details | Settings | Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via...
Form - Group | Details | Settings | Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering...
Forms - Check | Details | Settings | Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Forms - Check (Inline) | Details | Settings | Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Forms - Controls | Details | Settings | Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Forms - Controls (Large) | Details | Settings | Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Forms - Controls (Small) | Details | Settings | Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Forms - File Control | Details | Settings | Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Forms - Grid | Details | Settings | Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Forms - Inline | Details | Settings | Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Forms Control - Plaintext | Details | Settings | Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Image Thumbnails | Details | Settings | Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via...
Input Group | Details | Settings | Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.
Input Group (Button) | Details | Settings | Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.
Input Group (Large) | Details | Settings | Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.
Jumbotron | Details | Settings | Lightweight, flexible component for showcasing hero unit style content.
Jumbotron - Fluid | Details | Settings | Lightweight, flexible component for showcasing hero unit style content.
List Group | Details | Settings | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and...
List Group | Details | Settings | List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within....
List Group - Item Action | Details | Settings | List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within....
List Group - Item Active | Details | Settings | List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within....
List Group - Item Danger | Details | Settings | List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within....
List Group - Item Dark | Details | Settings | List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within....
List Group - Item Disabled | Details | Settings | List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within....
List Group - Item Info | Details | Settings | List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within....
List Group - Item Light | Details | Settings | List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within....
List Group - Item Primary | Details | Settings | List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within....
List Group - Item Secondary | Details | Settings | List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within....
List Group - Item Success | Details | Settings | List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within....
List Group - Item Warning | Details | Settings | List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within....
List Group - With Badges | Details | Settings | List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within....
List Group - With d-flex | Details | Settings | List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within....
Media | Details | Settings | Documentation and examples for Bootstrap's media object to construct highly repetitive components like blog comments, tweets, and the like.
Media - Nested | Details | Settings | Documentation and examples for Bootstrap's media object to construct highly repetitive components like blog comments, tweets, and the like.
Media - Right Aligned | Details | Settings | Documentation and examples for Bootstrap's media object to construct highly repetitive components like blog comments, tweets, and the like.
Media - d-flex align-self-center | Details | Settings | Documentation and examples for Bootstrap's media object to construct highly repetitive components like blog comments, tweets, and the like.
Media - d-flex align-self-end | Details | Settings | Documentation and examples for Bootstrap's media object to construct highly repetitive components like blog comments, tweets, and the like.
Media - d-flex align-self-start | Details | Settings | Documentation and examples for Bootstrap's media object to construct highly repetitive components like blog comments, tweets, and the like.
Modal | Details | Settings | Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Modal - Fade | Details | Settings | Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Modal - Large | Details | Settings | Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Modal - Small | Details | Settings | Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Multiple Addons | Details | Settings | Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.
Nav - Fill | Details | Settings | Documentation and examples for how to use Bootstrap's included navigation components.
Nav - Flex Column | Details | Settings | Documentation and examples for how to use Bootstrap's included navigation components.
Nav - Justify Content | Details | Settings | Documentation and examples for how to use Bootstrap's included navigation components.
Nav - Nav | Details | Settings | Documentation and examples for how to use Bootstrap's included navigation components.
Nav - Pills | Details | Settings | Documentation and examples for how to use Bootstrap's included navigation components.
Nav - Pills with Dropdown | Details | Settings | Documentation and examples for how to use Bootstrap's included navigation components.
Nav - Tabs | Details | Settings | Documentation and examples for how to use Bootstrap's included navigation components.
Nav - Tabs with Dropdown | Details | Settings | Documentation and examples for how to use Bootstrap's included navigation components.
Nav - With Flex Utils | Details | Settings | Documentation and examples for how to use Bootstrap's included navigation components.
Nav- Justified | Details | Settings | Documentation and examples for how to use Bootstrap's included navigation components.
Navbar | Details | Settings | Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin....
Navbar - Brand | Details | Settings | Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin....
Navbar - Collapse | Details | Settings | Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin....
Navbar - Dark Background | Details | Settings | Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin....
Navbar - Expand | Details | Settings | Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin....
Navbar - Fixed Bottom | Details | Settings | Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin....
Navbar - Fixed Top | Details | Settings | Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin....
Navbar - Light | Details | Settings | Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin....
Navbar - Sticky Top | Details | Settings | Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin....
Navbar - Text | Details | Settings | Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin....
Navbar - Toggler | Details | Settings | Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin....
Navbar - With Form | Details | Settings | Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin....
Pagination | Details | Settings | Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
Pagination - Large | Details | Settings | Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
Pagination - Page Item Active | Details | Settings | Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
Pagination - Page Item Disabled | Details | Settings | Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
Pagination - Small | Details | Settings | Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
Popover - Dismissable | Details | Settings | Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
Popovers | Details | Settings | Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
Progress | Details | Settings | Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 element, ensuring...
Progress - Bar | Details | Settings | Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 element, ensuring...
Progress - Bar Animated | Details | Settings | Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 element, ensuring...
Progress - Bar Multiple | Details | Settings | Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 element, ensuring...
Progress - Bar Striped | Details | Settings | Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 element, ensuring...
Progress - Bar Striped bg-* | Details | Settings | Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 element, ensuring...
Progress - Bar bg-* | Details | Settings | Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 element, ensuring...
Progress - Bar with Height | Details | Settings | Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 element, ensuring...
Progress - Bar with Label | Details | Settings | Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 element, ensuring...
Radio | Details | Settings | Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.
Radio | Details | Settings | Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Readonly | Details | Settings | Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Rounded | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
Rounded - Circle | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
Rounded-* | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
Row | Details | Settings | Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass...
Segmented Buttons | Details | Settings | Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.
Table | Details | Settings | Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.
Table - Active | Details | Settings | Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.
Table - Bordered | Details | Settings | Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.
Table - Danger | Details | Settings | Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.
Table - Dark | Details | Settings | Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.
Table - Header Dark | Details | Settings | Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.
Table - Header Light | Details | Settings | Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.
Table - Hover | Details | Settings | Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.
Table - Info | Details | Settings | Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.
Table - Light | Details | Settings | Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.
Table - Primary | Details | Settings | Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.
Table - Responsive | Details | Settings | Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding .table-responsive class on .table. Or, pick...
Table - Secondary | Details | Settings | Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.
Table - Small | Details | Settings | Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.
Table - Striped | Details | Settings | Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.
Table - Success | Details | Settings | Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.
Table - Warning | Details | Settings | Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.
Text - Danger | Details | Settings | Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Text - Dark | Details | Settings | Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Text - Info | Details | Settings | Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Text - Light | Details | Settings | Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Text - Primary | Details | Settings | Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Text - Secondary | Details | Settings | Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Text - Success | Details | Settings | Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Text - Warning | Details | Settings | Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Text - White | Details | Settings | Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Tooltip | Details | Settings | Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage....
Typography - Blockquote | Details | Settings | Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
Typography - Blockquote Footer | Details | Settings | Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
Typography - Display | Details | Settings | Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using...
Typography - Lead | Details | Settings | Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
Typography - List Inline | Details | Settings | Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
Typography - List Unstyled | Details | Settings | Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
align-* | Details | Settings | Use these shorthand utilities for quickly configuring the position of an element.
align-content-*-around | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
align-content-*-center | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
align-content-*-end | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
align-content-*-start | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
align-content-*-stretch | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
align-items-*-baseline | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
align-items-*-center | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
align-items-*-end | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
align-items-*-start | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
align-items-*-stretch | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
align-self-*-baseline | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
align-self-*-center | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
align-self-*-end | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
align-self-*-start | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
align-self-*-stretch | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
clearfix | Details | Settings | Use these shorthand utilities for quickly configuring the position of an element.
close | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
d-*-block | Details | Settings | Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as...
d-*-flex | Details | Settings | Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as...
d-*-inline | Details | Settings | Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as...
d-*-inline-block | Details | Settings | Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as...
d-*-inline-flex | Details | Settings | Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as...
d-*-none | Details | Settings | Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as...
d-*-table | Details | Settings | Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as...
d-*-table-cell | Details | Settings | Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as...
d-print-... | Details | Settings | Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as...
embed-responsive | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
fixed-bottom | Details | Settings | Use these shorthand utilities for quickly configuring the position of an element.
fixed-top | Details | Settings | Use these shorthand utilities for quickly configuring the position of an element.
flex-*-column | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
flex-*-column-reverse | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
flex-*-nowrap | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
flex-*-row | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
flex-*-row-reverse | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
flex-*-wrap | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
flex-*-wrap-reverse | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
float-*-left | Details | Settings | Use these shorthand utilities for quickly configuring the position of an element.
float-*-none | Details | Settings | Use these shorthand utilities for quickly configuring the position of an element.
float-*-right | Details | Settings | Use these shorthand utilities for quickly configuring the position of an element.
font-italic | Details | Settings | Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
font-weight-bold | Details | Settings | Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
font-weight-normal | Details | Settings | Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
h-100 | Details | Settings | Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.
invisible | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
justify-content-*-around | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
justify-content-*-between | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
justify-content-*-center | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
justify-content-*-end | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
justify-content-*-start | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
m-1 / m-*-# | Details | Settings | Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
mb-1 / mb-*-# | Details | Settings | Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
mh-100 | Details | Settings | Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.
ml-1 / ml-*-# | Details | Settings | Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
mr-1 / mr-*-# | Details | Settings | Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
mt-1 / mt-*-# | Details | Settings | Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
mw-100 | Details | Settings | Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.
mx-1 / mx-*-# | Details | Settings | Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
my-1 / my-*-# | Details | Settings | Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
nested columns | Details | Settings | Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass...
no-gutters | Details | Settings | Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass...
order-# | Details | Settings | Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass...
order-*-# | Details | Settings | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex...
p-1 / p-*-# | Details | Settings | Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
pb-1 / pb-*-# | Details | Settings | Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
pl-1 / pl-*-# | Details | Settings | Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
pr-1 / pr-*-# | Details | Settings | Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
pt-1 / pt-*-# | Details | Settings | Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
px-1 / px-*-# | Details | Settings | Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
py-1 / py-*-# | Details | Settings | Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
sr-only | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
sr-only-focusable | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
sticky-top | Details | Settings | Use these shorthand utilities for quickly configuring the position of an element.
text-*-center | Details | Settings | Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
text-*-left | Details | Settings | Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
text-*-right | Details | Settings | Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
text-capitalize | Details | Settings | Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
text-hide | Details | Settings | Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
text-justify | Details | Settings | Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
text-lowercase | Details | Settings | Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
text-muted | Details | Settings | Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
text-nowrap | Details | Settings | Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
text-truncate | Details | Settings | Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
text-uppercase | Details | Settings | Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
ul.nav | Details | Settings | Documentation and examples for how to use Bootstrap's included navigation components.
visible | Details | Settings | Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element....
w-100 | Details | Settings | Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.