Card footer layouts
Default, custom, white and condensedDefault style
Default example of card footer. By default, footer container has light grey 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.
White background
You can use
.bg-whiteor .bg-transparentclasses in card footer container to make it white or remove background color. Use border and spacing utility classes for custom styling.
No border
Use
.border-top-0utility class to remove top border and .pt-0class to remove top padding from the card footer. Also don't forget to make background color white or transparent.
Basic elements
Just a mix of basic elementsText 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 multiple icons group
Plain text
Card footer with simple inline text. Use utility classes for proper spacing and alignment
Inline list
Card footer with simple inline list
Linked inline list
Card footer with linked inline list
Inline badges
Card footer with
.badgeelement displayed before/after the text
Pagination
Card footer pagination with optional
.justify-content-aroundclass that stretches items on small screens if used with breakpoints
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
.badge-pillelement displayed before/after the text
Pager
Card footer pager with optional
.justify-content-betweenclass that pushes items to start/end on small screens if used with breakpoints
Card footer thumbnails
Single and thumbnail groupsSingle 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
-
8
-
6
Linked thumbnail
Card footer with single linked thumbnail
Linked thumbnail group
Card footer with linked thumbnail group
Thumb with status badge
Card footer thumbnail with badge mark
Form components
A set of different form elementsSingle checkbox
Single checkbox. Available in both directions
Checkbox group
Card footer with group of inline checkboxes
Switchery toggle
Switchery toggle. Available in all styles and sizes
Text input
Card footer with basic text input and input group
File inputs
Card footer with default and/or custom file inputs
Single radio
Single radio. Available in both directions
Radio group
Card footer with group of inline radio buttons
Toggle switch
Card footer with Bootstrap toggle switch. Labels are optional
Input with icon
Input field and icon feedback, in both directions
Touchspin spinners
Card footer with
Touchspininput group spinner
Select menus
Various select optionsBasic selects
Card footer with basic (browser default) and custom selects
Single select2 selects
Card footer with a single
Select2select
Multiple select2 selects
Card footer with multiple
Select2select
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 styling options
Button dropdown
Footer with single button dropdown menu
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 card footer elementsFooter 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 options
jQuery UI slider
Card footer with jQuery UI slider. Available in all sizes and colors
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
Inline text dropdown
Card footer with inline text and attached dropdown menu
NoUI slider
Card footer with NoUI slider. Available in all sizes
Mixing elements
Different element variationsSelect and text
Mixing Select2 selects and inline text with icons
Checkbox and text dropdown
Mixing checkbox with label and inline text with dropdown
Switchery and input field
Mixing switchery 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 mobileAlways visible
Add
.header-elements-inlineclass to direct parent of .header-elementsto make header elements visible on mobile and desktop.
Wrap and show
To wrap footer elements to the second row, add
.header-elements-[breakpoint]-inlineclass 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-flexand .justify-content-centerclasses to center items in the 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
.header-elements-[breakpoint]-inlineclass in parent container and .d-nonein footer elements container.
Wrap and toggle
You can also use optional toggler - add
.d-flexto page title and custom markup for the toggle button. And .d-noneto footer elements container to make them hidden by default.
Single line
You can easily show footer elements in a single line, just wrap inner elements in container with
.d-flexand .align-items-centerclasses. Use other flex utilities for adjustments.
Justified elements
Use combination of
.d-flexand .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.