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.

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.

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.

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.

Card footer plain text with left icon

Card footer with a single icon, inline or linked

Card footer with multiple icons group

Card footer with simple inline text. Use utility classes for proper spacing and alignment

Card footer with simple inline list

Card footer with linked inline list

Card footer with .badge element displayed before/after the text

Card footer pagination with optional .justify-content-around class that stretches items on small screens if used with breakpoints

Card footer with plain text and icon next to it

Card footer with single icon dropdown, both sides

Card footer with multiple icons and dropdown menu

Card footer text displayed on both sides. Make sure the text is wrapped in block element

Card footer with bullet inline list

Card footer with linked bullet inline list

Card footer with .badge-pill element displayed before/after the text

Card footer pager with optional .justify-content-between class that pushes items to start/end on small screens if used with breakpoints

Card footer with single thumbnail (left or right)

Card footer with thumbnail group

Card footer thumbnail with badge

Card footer with single linked thumbnail

Card footer with linked thumbnail group

Card footer thumbnail with badge mark

Single checkbox. Available in both directions

Card footer with group of inline checkboxes

Switchery toggle. Available in all styles and sizes

Card footer with basic text input and input group

Card footer with default and/or custom file inputs

Single radio. Available in both directions

Card footer with group of inline radio buttons

Card footer with Bootstrap toggle switch. Labels are optional

Input field and icon feedback, in both directions

Card footer with Touchspin input group spinner

Card footer with basic (browser default) and custom selects

Card footer with a single Select2 select

Card footer with multiple Select2 select

Card footer with single and multiple selects

Footer with basic button. Available in all sizes, colors and styling options

Footer with single button dropdown menu

Card footer with segmented buttons

Card footer with multiple buttons

Card footer with single icon button. Available in all sizes, colors and styling options

Card footer with icon button dropdown

Card footer with segmented icon button

Card footer with multiple icon buttons

Card footer with progress bar. Available in all colors and options

Card footer with jQuery UI slider. Available in all sizes and colors

Card footer with inline text and attached dropdown menu

Card footer with NoUI slider. Available in all sizes

Mixing Select2 selects and inline text with icons

Mixing checkbox with label and inline text with dropdown

Mixing switchery toggle and input field

Mixing inline text and button dropdown

Mixing inline text, rotating spinner icon and progress bar

Mixing icon group, inline text and link

Add .header-elements-inline class to direct parent of .header-elements to make header elements visible on mobile and desktop.

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.

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.

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.

To hide footer elements on certain breakpoints, use .header-elements-[breakpoint]-inline class in parent container and .d-none in footer elements container.

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.

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.

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.