Victoria Baker
Senior developer
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-white or .bg-transparent classes 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-0 utility class to remove top border and .pt-0 class 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
.badge element displayed before/after the text
Pagination
Card footer pagination with optional
.justify-content-around class 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-pill element displayed before/after the text
Pager
Card footer pager with optional
.justify-content-between class 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
Switch
Pure CSS toggle switcher
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
Switches
Pure CSS toggle switchers
Input with icon
Input field and icon feedback, in both directions
Touchspin spinners
Card footer with
Touchspin input 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
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 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
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 mobileAlways 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 footer 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
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-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 footer elements on certain breakpoints, use
.header-elements-[breakpoint]-inline class in parent container and .d-none in footer 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 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-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(l,r)-auto) classes to distribute items evenly in the line: first item is on the start line, last item on the end line.