Js Cards | Theme Demo


CARDS - Bootstrap Docs

Please test examples and if you notice any issue in any browser/device let AK know.

Cards Variations


Card Title

Card Subtitle
Card Text
Card button

Card with background - primary

- .card .card-primary .card-inverse

Card with outline - primary

- .card .card-outline-primary

Card - Image at the bottom

- move image below .card-block
- add .card-image-bottom to an image

Card Links

- 
<a class="card-link" href="#">Link 1</a>

Link 1 Link 2 Link 3

Card Links

<div class="list-group list-group-flush">
  <a class="list-group-item list-group-item-action" href="#">Link 1</a>
</div>

- .list-group-item-action - link color & hover
- .list-group-flush - reset list-group for cards
Link 1 Link 2 Link 3

Card - Image overlay

- .card-inverse for white text
- .card-block .card-img-overlay - text over an image
- for better text visibility added background: rgba(0,0,0,0.4); to .card-block

Card - Header/Footer

Card - Header/Footer

<header class="card-header"></header>

<footer class="card-footer"> </footer>

Footer

Card - Header with Nav Tabs
Tab 1 Content
Card - Header with Nav Tabs
Tab 2 Content
Card - Header with Nav Tabs
Tab 3 Content


Grid - col-4 applied to .card

  1. All cards in a row get the same height.
  2. Card's elements alignment is not great and there is a double border between cards. Avoid this solution
Cards Grid
Footer
Cards Grid
Cards Grid
Footer
Cards Grid
Cards Grid
Cards Grid
Footer
Cards Grid
Footer


Grid - .card inside col-4 container

  1. Layout settings - xs 1 col, sm 2 cols, md 3 cols, lg and over 4 cols
  2. Cards get different height depending on content. Check Homepage panels for solution.
Cards Grid
Footer
Cards Grid
Cards Grid
Footer
Cards Grid
Cards Grid
Cards Grid
Footer
Cards Grid
Footer


Grid - Flex

  1. To keep columns in a nice grid we used B4 classes d-flex flex-wrap justify-content-between for the container and css flex-basis: 32% for cards.
  2. flex-basis: value% changes for different media queries depneding on how many columns we want to have.
  3. Footer always sticks to the bottom
  4. Always the same columns height in a row
Cards Grid
Footer
Cards Grid
Cards Grid
Footer
Cards Grid
Cards Grid
Cards Grid
Footer
Cards Grid
Footer


Grid - Bootstrap 4 .card-group class

  1. Nicley groups cards in one row without dooble border between them.
  2. Not very flexible. To break cards to next line you need to use another .card-group container.
Cards Grid
Footer
Cards Grid
Cards Grid
Footer
Cards Grid
Cards Grid
Cards Grid
Footer
Cards Grid
Footer
Cards Grid
Footer


Grid - Bootstrap 4 .card-deck class

  1. Nicley groups cards in one row with padding between them
  2. To adjust gutter use $card-deck-margin: ($grid-gutter-width-base / 2) !default; in _variables.scss partial
  3. The same as .card-group works best for small amount of columns.
  4. Not very flexible. To break cards to next line you need to use another .card-deck container.
Cards Grid
Footer
Cards Grid
Cards Grid
Footer
Cards Grid
Cards Grid
Cards Grid
Footer
Cards Grid
Footer


Grid - Bootstrap 4 .card-columns class

  1. Nice masonry-like columns layout. Cards are ordered from top to bottom and left to right.
  2. Layout settings - xs 1 col, sm 2 cols, md 3 cols, lg and over 4 cols
  3. To set number of columns for a specific tier use column-count
    		@include media-breakpoint-only(md) {
			.card-columns {
				column-count: 3;
			}
		}
  4. It's not 100% perfect so test it well with amount of columns and content length on different browsers/devices before you make it life.
Card 1
Cards Grid
Cards Grid
Cards Grid
Cards Grid
Cards Grid
Footer
Card 2
Cards Grid
Cards Grid
Footer
Card 3
Cards Grid
Cards Grid
Cards Grid
Cards Grid
Footer
Card 4
Cards Grid
Cards Grid
Footer
Card 5
Cards Grid
Cards Grid
Cards Grid
Footer
Card 6
Cards Grid
Cards Grid
Cards Grid
Cards Grid
Cards Grid
Footer
Card 7
Cards Grid
Cards Grid
Cards Grid
Cards Grid
Footer
Card 8
Cards Grid
Cards Grid
Cards Grid
Cards Grid
Cards Grid
Cards Grid
Cards Grid
Footer