Basic elements
Examples of elements that card header supportsLeft title icon
Card title with left icon
Subtitle
Some alt description
Card title with subtitle using inline elements with
.d-flex class in card header
Inline list
- Version 2.0
- December 12th
Card header with simple inline list
Title badge
New
Card title with badge element
Title pill badge
387
Card title with pill badge element
Right title icon
Card title with right icon
Heading text
Some text or link and icon
Card header text. Make sure the text is wrapped in inline element
Bullet list
- Version 2.0
- December 12th
Card header with bullet inline list
Header badge
Badge
Card header with
.badge element
Header pill badge
578
Card header with
.badge-pill element
Card header thumbnails
Card header with single or multiple thumbnailsSingle thumbnail
Card header with single thumbnail
Thumbnail group
Card header with thumbnail group
Thumb with badge
9
Card header thumbnail with badge
Linked thumbnail
Card header with single linked thumbnail
Linked thumbnail group
Card header with linked thumbnail group
Thumb with status indication
Card header thumbnail with rounded status indication
Card controls
Collapse/expand, move, remove, reload, fullscreen and modal
Use
data-card-action="collapse" attribute and wrap collapsible content in div with .collapse.show classes
Use
data-card-action="reload" attribute to add show spinner with overlay and block user interactions
Use
data-card-action="sort" attribute to make card sortable (draggable) within specified container
Use
data-card-action="fullscreen" attribute to add an option to display card in full screen mode
Form components
A set of form elements that card header supportsSingle checkbox
Single checkbox. Available in both directions
Checkbox group
Header with group of inline checkboxes
Switch toggle
Switch toggle. Available in all styles and sizes
Text input
Header with basic text input field
File input
Card header with custom file input field
Single radio
Single radio. Available in both directions
Radio group
Header with group of inline radio buttons
Switch toggles
Multiple inline switches
Input with icon
Input field and icon feedback
Input group
Heading with regular input group with button
Select menus
Various select options in card headerBasic select
Card header with basic select
Single Select2 select
Card header with a single
Select2 select
Multiselect
Heading with single multiselect
Multiple Select2 select
Card header with multiple
Select2 select
Header buttons
Basic buttons with optionsSingle button
Header with basic button. Available in all sizes, colors and options
Outline button
Header with outline button. Available in all sizes, colors and options
Button dropdown
Header with single button dropdown menu
Segmented button
Card header with segmented button
Multiple buttons
Card header with multiple buttons
Icon button
Card header with single icon button
Outline button
Header with outline icon button
Icon button dropdown
Card header with icon button dropdown
Segmented icon button
Card header with segmented icon button
Multiple icon buttons
Card headers with multiple icon buttons
Other elements
Other card header elementsDefault tabs
This is the first card tab content
This is the second card tab content
This is the third card tab content
This is the fourth card tab content
Default pills
This is the first card pill content
This is the second card pill content
This is the third card pill content
This is the fourth card pill content
Progress bar
Card header with progress bar. Available in all colors and options
Underline tabs
This is the first card tab content
This is the second card tab content
This is the third card tab content
This is the fourth card tab content
Card header with title as a dropdown menu
NoUI slider
Card header with NoUI slider. Available in all sizes
Mixing elements
Different variations of componentsInput and button
Mixing input field with button
Responsive options
Resize the browser or open on mobile to explore optionsAlways visible
Add
.d-flex class to card header container to make header elements visible on mobile and desktop.
Wrap and show
To wrap header elements to the second row, add
.d-[breakpoint]-flex class to parent container. Breakpoint in class name is required, CSS needs to know screen size.
Stack elements
Loading:
Use
.d-[breakpoint]-flex to control when elements are stacked and responsive margin classes to control vertical and horizontal spacing.
Centered elements
Rating:
(49)
Use combination of
.d-[breakpoint]-flex and .justify-content-center classes to center items in the line. All flex helper classes can be used as well for additional position options.
Hide on mobile
To hide header elements on certain breakpoints, use
.d-none.d-[breakpoint]-block classes in the container with header elements.
You can also use optional toggler - add
.d-flex to card title and custom markup for the toggle button. And .collapse.show to header elements container.
Stack elements
Loading:
You can easily show header elements in a single line, just wrap inner elements in container with
.d-flex and .align-items-center classes. Use other flex utilities for adjustments.
Justified elements
Rating:
(49)
Use combination of
.d-flex and .justify-content-between (or .m(s,e)-auto) classes to distribute items evenly in the line: first item is on the start line, last item on the end line.
