#### Content - Card Footer

Statistics Invoices Schedule

###### Card footer layouts

Default, custom, white and condensed

###### Default 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.

###### Light background

You can use `.bg-light` or `.bg-dark` classes in card footer container to make it lighter or darker. Use border and spacing utility classes for custom styling.

###### Condensed footer

Use `.pt-0` class to remove top padding from card footer so that spacing between content and footer is controlled by content spacing. In dark theme card footer has transparent background color and no border by default.

###### Basic elements

Just a mix of basic elements

###### Text 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 groups

###### Single thumbnail

Card footer with single thumbnail (left or right)

###### Thumbnail group

Card footer with thumbnail group

###### Thumb with badge

Card footer thumbnail with badge

###### 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 elements

###### Single 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 `Touchspin` input group spinner

###### Select menus

Various select options

###### Basic 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 options

###### Single 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 elements

###### Footer 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 variations

###### Select 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 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 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.