Card footer layouts
Default, custom, light and dark footer colorsDefault style
Default example of card footer. By default, footer container has transparent background color. Default style doesn't require any additional classes. Supports all elements listed below, including custom colors.
Custom color
Example of a card footer with custom background color. You can use any available color helper class, also use text color classes where needed. Some elements require minor color adjustments.
Default style
You can use
.bg-light class in card footer container to add light grey background color to footer container. Adjust other elements accordingly. Use border and spacing utility classes for custom styling.
Dark background
You can use
.bg-dark and .text-white classes in card footer container to inverse colors and make the footer dark. Use border and spacing utility classes for custom styling.
Basic elements
Examples of elements that card footer supportsText with left icon
Card footer plain text with left icon
Single icon
Card footer with a single icon, inline or linked
Multiple icons
Card footer with a group of multiple icons
Plain text
Card footer with simple inline text. Use utility classes for proper spacing and alignment
Inline list
Card footer with regular inline list
Linked inline list
Card footer with linked inline list
Inline badges
Card footer with
.badge element displayed before/after the text
Pagination
Card footer pagination in left and right alignments. Supports all pagination sizes and styles
Title with right icon
Card footer with plain text and icon next to it
Icon dropdown
Card footer with single icon dropdown, both sides
Multiple icons with dropdown
Card footer with multiple icons and dropdown menu
Custom text styling
Card footer text displayed on both sides. Make sure the text is wrapped in block element
Bullet list
Card footer with bullet inline list
Linked bullet list
Card footer with linked bullet inline list
Inline pill badges
Card footer with fully rounded
.badge element displayed before/after the text
Pager
Card footer pager in left and right alignment. Supports all pager sizes and styles
Card footer thumbnails
Card footer with single or multiple thumbnailsSingle thumbnail
Card footer with single thumbnail (left or right)
Thumbnail group
Card footer with thumbnail group
Thumb with badge
Card footer thumbnail with badge
9
2
4
Linked thumbnail
Card footer with single linked thumbnail
Linked thumbnail group
Card footer with linked thumbnail group
Thumb with status indicator
Card footer thumbnail with status indicators
Form components
A set of form elements that card footer supportsSingle checkbox
Single checkbox. Available in both directions
Checkbox group
Card footer with group of inline checkboxes
Switch
Pure CSS toggle switcher in left and right directions
Text input
Card footer with basic text input
File inputs
Card footer file input, in both directions
Single radio
Single radio. Available in both directions
Radio group
Card footer with group of inline radio buttons
Switches
Card footer with a group of switches
Input with icon
Input field and icon feedback, in both directions
Input group
Card footer with input group text and button
Select menus
Various select options in card footerBasic selects
Card footer with our basic selects
Single select2 selects
Card footer with a single
Select2 select
Multiple select2 selects
Card footer with multiple
Select2 select
Multiselect
Card footer with single and multiple selects
Card footer buttons
Basic buttons with optionsSingle button
Footer with basic button. Available in all sizes, colors and styles
Button dropdown
Footer with a dropdown menu attached to a single button
Segmented button
Card footer with segmented buttons
Multiple buttons
Card footer with multiple buttons
Card header
Card footer with single icon button. Available in all sizes, colors and styling options
Icon button dropdown
Card footer with icon button dropdown
Segmented icon button
Card footer with segmented icon button
Multiple icon buttons
Card footer with multiple icon buttons
Other elements
Other elements that card footer supportsFooter 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 footer with progress bar. Available in all colors and styles
Footer 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
NoUI slider
Card footer with NoUI slider. Available in all sizes
Mixing elements
Different variations of componentsSelect and text
Mixing Select2 selects and inline text with icons
Checkbox and text dropdown
Mixing checkbox with label and inline text with dropdown
Switch and input field
Mixing switch toggle and input field
Text and button dropdown
Mixing inline text and button dropdown
Text, spinner and progress bar
Mixing inline text, rotating spinner icon and progress bar
Multiple elements
Mixing icon group, inline text and link
Responsive options
Resize the browser or open on mobile to explore optionsAlways visible
Add
.d-flex class to direct parent of content container to make header elements visible on mobile and desktop.
Wrap and show
To wrap footer 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
Footer (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
Use combination of
.d-[breakpoint]-flex and .justify-content-[breakpoint]-center classes to center items on the same line. All flex helper classes can be used as well for additional position options.
Hide on mobile
To hide footer elements on certain breakpoints, use
.d-none.d-[breakpoint]-block classes in the container with footer elements.
Wrap and toggle
You can also use optional toggler - add
.d-flex to card footer and custom markup for the toggle button. And .collapse.show to footer elements container.
Single line
You can easily show footer 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
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.
