Navigation
Victoria Baker
 Santa Ana, CA

Content - Card Header

Statistics Invoices Schedule
Home Content Card header
Support
Settings
Account security Analytics Accessibility
All settings
Basic elements
Just a mix of basic elements
Left title icon
Card title with left icon
Single icon
Card header with a single icon
Icon group
Card header with multiple icons group
Subtitle Some alt description
Card title with subtitle using inline elements with .font-size-base class
Inline list
  • Version 2.0
  • December 12th
Card header with simple inline list
Linked inline list
Card header with linked inline list
Title badge New
Card title with badge element
Title pill badge 387
Card title with pill badge element
Pagination
Card header pagination. Available in 3 sizes
Right title icon
Card title with right icon
Icon dropdown
Action Another action Something else here
One more separated line
Card header with single icon and dropdown
Icons group with dropdown
Action Another action Something else here
One more separated line
Card header with multiple icons and dropdown menu
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
Linked bullet list
Card header with linked bullet inline list
Header badge
Badge
Card header with .badge element
Header pill badge
578
Card header with .badge-pill element
Heading pager
Card header pager. Available in 3 sizes
Card header thumbnails
Single and thumbnail groups
Single 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 badge mark
Card header thumbnail with badge mark
Card controls
Collapse/expand, move, remove, reload, fullscreen and modal
Collapse/expand card content
Use data-action="collapse" attribute to add collapsible functionality to the card body
Reload card content
Use data-action="reload" attribute to add show spinner with overlay and block user interactions
Remove card
Use data-action="remove" attribute to add an option to collapse-and-remove functionality
Move (sort) card
Use data-action="move" attribute to make card sortable (draggable) within specified container
Fullscreen mode
Use data-action="fullscreen" attribute to add an option to display card in full screen mode
Toggle modal
Use data-action="modal" attribute to toggle modal with content. Make sure the markup exists
Form components
A set of different form elements
Single checkbox
Single checkbox. Available in both directions
Checkbox group
Header with group of inline checkboxes
Switchery toggle
Switchery 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
Toggle switch
Card header with Bootstrap toggle switch
Input with icon
Input field and icon feedback
Touchspin spinners
Heading with Touchspin input group spinner
Select menus
Various select options
Basic select
Card header with basic select
Single Select2 select
Card header with a single Select2 select
Multiselect - single selection
Heading with single multiselect
Custom select
Card header with custom select
Multiple Select2 select
Card header with multiple Select2 select
Multiselect - multiple selection
Heading with multiple select
Header buttons
Basic buttons with options
Single 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
Action Another action Something else here
One more separated line
Header with single button dropdown menu
Segmented button
Action Another action Something else here
One more separated line
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
Action Another action Something else here
One more separated line
Card header with icon button dropdown
Segmented icon button
Action Another action Something else here
One more separated line
Card header with segmented icon button
Multiple icon buttons
Card headers with multiple icon buttons
Other elements
Other card header elements
Default 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
60% Complete
Card header with progress bar. Available in all colors and options
jQuery UI slider
Header with jQuery UI slider. Available in all sizes
Bottom 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
Toolbar 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
Title dropdown
Action Another action Something else here
One more separated line
Card header with title as a dropdown menu
NoUI slider
Card header with NoUI slider. Available in all sizes
Mixing elements
Different element variations
Input and button
Mixing input field with button
Checkbox and dropdown
Action Another action Something else here
One more separated line
Mixing checkbox with label and icon dropdown
Switch and controls
Mixing switchery toggle and card control buttons
Text and button
Error occurred
Action Another action Something else here
One more separated line
Mixing text and button dropdown
Spinner and progress
60% Complete
Mixing spinner and progress bar
Multiple elements
Badge
Mixing spinner icon, badge and icon list group
Responsive options
Resize the browser or open on mobile
Always visible
Add .header-elements-inline class to direct parent of .header-elements to make header elements visible on mobile and desktop.
Wrap and show
To wrap header elements to the second row, add .header-elements-[breakpoint]-inline class to parent container. Breakpoint in class name is required, CSS needs to know screen size.
Stack elements
Loading:
60% Complete
Header (block) elements are stackable by default. Use responsive margin classes to control vertical and horizontal spacing. Make sure margin and container breakpoints are matching.
Centered elements
Rating:
(49)
Use combination of .d-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 .header-elements-[breakpoint]-inline class in parent container and .d-none in header elements container.
Wrap and toggle
You can also use optional toggler - add .d-flex to page title and custom markup for the toggle button. And .d-none to header elements container to make them hidden by default.
Single line
Loading:
60% Complete
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(l,r)-auto) classes to distribute items evenly in the line: first item is on the start line, last item on the end line.