Card image placement
Top, middle and bottom placements
Top placement
Default top placement - image always comes first
in the card with text or other content below. Use .card-img-top
image class to round top image corners.
Below card header
Example of the card image, placed right after card header and
before card content body. Image requires .img-fluid class for
proper sizing.
Middle placement
Example of middle placement - image placed between
card content containers (card header, card body and card footer). Image requires
.img-fluid class for proper sizing.
Multiple titles
Another example of middle image placement - after header,
before body that includes card title. Image also requires
.img-fluid class.
Bottom placement
Example of bottom placement - image always comes
last in the card with text or other content above. Use
.card-img-bottom image class to round bottom image corners.
Multiple footers
In this example card image is on top, but content has multiple containers - use spacing utility classes to control vertical spacing of card content.
Card image overlays
Link, zoom and overlay with actions
Linked image
By default, cards are designed to showcase linked images with minimal required markup, including default class for rounded corners.
Zooming
Extend card image with simple zoomable lightbox. The icon is inserted directly in HTML and can be easily changed.
Overlay buttons
Add as many buttons or links as you want, all of them will be vertically and horizontally centered. Supports all available styles.
Card video options
Video container placementsTop placement
Default top placement - video always comes first
in the card with text or other content below. Use .card-img-top
helper class to round top video container corners.
Middle placement
Example of middle placement - video placed between
card content containers (header, body and footer). Middle option doesn't require
any additional video container classes.
Bottom placement
Example of bottom placement - video always comes
last in the card with text or other content above. Use
.card-img-bottom helper class to round bottom video container
corners.
Card text options
Various text placement variationsBordered header and footer
This example demonstrates how header and footer can handle multiple text containers. Both containers have transparent background color.
Dark header, transparent footer
You can easily mix header and footer styles on the fly just by adding utility classes to the footer and header containers.
Transparent header, white footer
This combination can be useful when your main content and actions need to be separated, but visually be a part of the card.
Grey header and footer
In this example header and footer have light grey background
color. Grey color is default for the footer, but header requires
.bg-light class.
Transparent header, dark footer
This example demonstrates transparent card header and dark card footer. Card title is placed inside card body content.
Transparent header and footer
If you need to extend the card with 2 extra areas with context info without separation, this combination might be very useful.
Custom header and footer color
You can easily mix footer and header colors - just add color
helper class to both containers and optional .text-white class to
links.
Custom border color
If you want to highlight cards or content areas, add color helper classes to the card and/or card footer and header.
Grey header, transparent footer
And this combination is a perfect solution for displaying header with alternate content that is not really important, but nice to have.
Card content alignment
Horizontal and vertical content alignmentLeft alignment
Left content alignment is the default option in left-to-right direction that doesn't require any extra utility classes.
Read moreTop alignment
Top content alignment is also the default option in LTR layout. Other vertical alignment options require flex utility classes.
Read moreCard table options
Various table placement optionsCard body + table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| 4 | Franklin | Morrison | @Frank |
Table + card body
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| 4 | Franklin | Morrison | @Frank |
Combined table styles
.table class for proper
styling that matches Limitless theme.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| 4 | Franklin | Morrison | @Frank |
Table at the bottom
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| 4 | Franklin | Morrison | @Frank |
Card navigation options
Adapted navigation list for cardsText list group
Create lists of content in a card with a flush list group. Use
.list-group-flush class to remove borders and rounded corners.
- Sheared coasted so concurrent New
- Goodness instead gull vulture 38
- Devilish yellow unsafe jerkily Fixed
- Relentless ouch essentially 40
Linked list group
Actionable list group items with hover, disabled, and active states. Use flex utility classes if your list items contain badges, text etc.
Multi column
Simple example of list nav with multiple columns. Use a set of responsive flex and spacing utility classes for proper positioning and spacing.
-
Full name:
Victoria Anna Davidson
-
Phone number:
+31 641 266545
- Corporate email:
- Personal email:
