# Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

### Examples

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element.

##### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

    <div class="card" style="width: 18rem;">
      <img src="assets/images/course/4by3/02.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

We have used cards to display course grid style almost everywhere in theme. With the help of utility classes, we have designed many ready-to-use cards.

### Card with image and content

All level

##### Sketch from A to Z: for app designer

Proposal indulged no do sociable he throwing settling..

- 4.0/5.0

    <div class="card shadow h-100">
    	<!-- Image -->
    	<img src="assets/images/course/4by3/02.jpg" class="card-img-top" alt="course image">
    	<!-- Card body -->
    	<div class="card-body pb-0">
    		<!-- Badge and favorite -->
    		<div class="d-flex justify-content-between mb-2">
    			<a href="#" class="badge bg-primary bg-opacity-10 text-primary">All level</a>
    			<a href="#" class="text-dark"><i class="far fa-heart"></i></a>
    		</div>
    		<!-- Title -->
    		<h5 class="card-title fw-normal"><a href="#">Sketch from A to Z: for app designer</a></h5>
    		<p class="mb-2 text-truncate-2">Proposal indulged no do sociable he throwing settling..</p>
    		<!-- Rating star -->
    		<ul class="list-inline mb-0">
    			<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
    			<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
    			<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
    			<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
    			<li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
    			<li class="list-inline-item ms-2 text-dark">4.0/5.0</li>
    		</ul>
    	</div>
    	<!-- Card footer -->
    	<div class="card-footer pt-0 pb-3">
    		<hr>
    		<div class="d-flex justify-content-between">
    			<span class="text-dark"><i class="far fa-clock text-danger me-2"></i>12h 56m</span>
    			<span class="text-dark"><i class="fas fa-table text-orange me-2"></i>15 lectures</span>
    		</div>
    	</div>
    </div>

### Card with hover trigger action

Use `.action-trigger-hover` class with card and add `.item-show-hover` to hover element

Free
Design Beginner

##### The complete Digital Marketing Course - 8 Course in 1

4.5

(6500)

6500

(Student)
6h 56m 82 lectures

    <div class="card action-trigger-hover border">
    	<!-- Image -->
    	<img src="assets/images/course/4by3/23.jpg" class="card-img-top" alt="course image">
    	<!-- Ribbon -->
    	<div class="ribbon mt-3"><span>Free</span></div>
    	<!-- Card body -->
    	<div class="card-body pb-0">
    		<!-- Badge and favorite -->
    		<div class="d-flex justify-content-between mb-3">
    			<span class="hstack gap-2">
    				<a href="#" class="badge bg-primary bg-opacity-10 text-primary">Design</a>
    				<a href="#" class="badge text-bg-dark">Beginner</a>
    			</span>
    			<a href="#"><i class="far fa-bookmark text-dark"></i></a>
    		</div>
    		<!-- Title -->
    		<h5 class="card-title"><a href="#">The complete Digital Marketing Course - 8 Course in 1</a></h5>
    		<!-- Rating -->
    		<div class="d-flex justify-content-between mb-2">
    			<div class="hstack gap-2">
    				<p class="text-warning m-0">4.5<i class="fas fa-star text-warning ms-1"></i></p>
    				<span class="small">(6500)</span>
    			</div>
    			<div class="hstack gap-2">
    				<p class="text-dark m-0">6500</p>
    				<span class="small">(Student)</span>
    			</div>
    		</div>
    		<!-- Time -->
    		<div class="hstack gap-3">
    			<span class="text-dark"><i class="far fa-clock text-danger me-2"></i>6h 56m</span>
    			<span class="text-dark"><i class="fas fa-table text-orange me-2"></i>82 lectures</span>
    		</div>
    	</div>
    	<!-- Card footer -->
    	<div class="card-footer pt-0">
    		<hr>
    		<!-- Avatar and Price -->
    		<div class="d-flex justify-content-between align-items-center">
    			<!-- Avatar -->
    			<div class="d-flex align-items-center">
    				<div class="avatar avatar-sm">
    					<img class="avatar-img rounded-1" src="assets/images/avatar/01.jpg" alt="avatar">
    				</div>
    				<p class="mb-0 ms-2"><a href="#" class="text-dark">Larry Lawson</a></p>
    			</div>
    			<!-- Price -->
    			<div>
    				<h4 class="text-success mb-0 item-show">Free</h4>
    				<a href="#" class="btn btn-sm btn-success-soft item-show-hover"><i class="fas fa-shopping-cart me-2"></i>Add to cart</a>
    			</div>
    		</div>
    	</div>
    </div>

### Card with hover overlay and element

Use `.card-element-hover` and `.card-overlay-hover` classes to show element and overlay on hover

- 9.1k
- 4.5

##### The Complete Digital Marketing Course - 12 Courses in 1

Personal Development

### $140

    <div class="card p-2 shadow">
      <div class="rounded-top overflow-hidden">
        <div class="card-overlay-hover">
          <!-- Image -->
          <img src="assets/images/course/4by3/23.jpg" class="card-img-top" alt="course image">
        </div>
        <!-- Hover element -->
        <div class="card-img-overlay">
          <div class="card-element-hover d-flex justify-content-end">
            <a href="#" class="icon-md bg-white rounded-circle text-center">
              <i class="fas fa-shopping-cart text-danger"></i>
            </a>
          </div>
        </div>
      </div>
      <!-- Card body -->
      <div class="card-body">
        <!-- Badge and icon -->
        <div class="d-flex justify-content-between">
          <!-- Rating and info -->
          <ul class="list-inline hstack gap-2 mb-0">
            <!-- Info -->
            <li class="list-inline-item d-flex justify-content-center align-items-center">
              <div class="icon-md bg-orange bg-opacity-10 text-orange rounded-circle"><i class="fas fa-user-graduate"></i>
              </div>
              <span class="text-dark ms-2">9.1k</span>
            </li>
            <!-- Rating -->
            <li class="list-inline-item d-flex justify-content-center align-items-center">
              <div class="icon-md bg-warning bg-opacity-15 text-warning rounded-circle"><i class="fas fa-star"></i>
              </div>
              <span class="text-dark ms-2">4.5</span>
            </li>
          </ul>
          <!-- Avatar -->
          <div class="avatar avatar-sm">
            <img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
          </div>
        </div>
        <!-- Divider -->
        <hr>
        <!-- Title -->
        <h5 class="card-title"><a href="#">The Complete Digital Marketing Course - 12 Courses in 1</a></h5>
        <!-- Badge and Price -->
        <div class="d-flex justify-content-between align-items-center mb-0">
          <div>
            <a href="#" class="badge bg-info bg-opacity-10 text-info me-2"><i class="fas fa-circle small fw-bold"></i> Personal Development </a>
          </div>
          <!-- Price -->
          <h3 class="text-success mb-0">$140</h3>
        </div>
      </div>
    </div>

### Card with video button

To make video popup work you must include Glightbox CSS and Javascript file on the page.

##### Learn French Language: Complete Course

###### Live Students

- 1K+

    <div class="card p-2">
    	<div class="position-relative">
    		<img src="assets/images/course/4by3/02.jpg" class="card-img rounded-2" alt="Card image">
    		<div class="card-img-overlay">
    			<div class="position-absolute top-50 start-50 translate-middle">
    				<a href="https://www.youtube.com/embed/tXHviS-4ygo" class="btn btn-lg text-danger btn-round btn-white-shadow" data-glightbox="" data-gallery="video-tour">
    					<i class="fas fa-play"></i>
    				</a>
    			</div>
    		</div>
    	</div>

    	<!-- Card body -->
    	<div class="card-body">
    		<!-- Title -->
    		<h5><a href="#" class="stretched-link">Learn French Language: Complete Course</a></h5>
    		<!-- Avatar group and button -->
    		<div class="d-sm-flex justify-content-sm-between align-items-center mt-3">
    			<!-- Avatar Group -->
    			<div>
    				<h6 class="mb-1 fw-normal"><i class="fas fa-circle fw-bold text-success small me-2"></i>Live Students</h6>
    				<ul class="avatar-group mb-0">
    					<li class="avatar avatar-xs">
    						<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
    					</li>
    					<li class="avatar avatar-xs">
    						<img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
    					</li>
    					<li class="avatar avatar-xs">
    						<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
    					</li>
    					<li class="avatar avatar-xs">
    						<img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
    					</li>
    					<li class="avatar avatar-xs">
    						<div class="avatar-img rounded-circle bg-primary">
    							<span class="text-white position-absolute top-50 start-50 translate-middle small">1K+</span>
    						</div>
    					</li>
    				</ul>
    			</div>
    			<!-- Button -->
    			<button class="btn btn-sm btn-success mb-0">Join now</button>
    		</div>
    	</div>
    </div>

### Card hover shadow

Use `.shadow-hover` class with card and to add shadow on hover

###### Larry Lawson

Tutor
All level 6 month

##### The Complete Digital Marketing Course - 12 Courses in 1

- 4.5
- (6,500)

#### $125

6h 56m

    <div class="card shadow-hover overflow-hidden">
    	<div class="position-relative">
    		<!-- Image -->
    		<img class="card-img-top" src="assets/images/course/4by3/23.jpg" alt="Card image">
    		<!-- Overlay -->
    		<div class="bg-overlay bg-dark opacity-4"></div>
    		<div class="card-img-overlay d-flex align-items-start flex-column">
    			<!-- Card overlay bottom -->
    			<div class="w-100 mt-auto d-inline-flex">
    				<div class="d-flex align-items-center bg-white p-2 rounded-2">
    					<!-- Avatar -->
    					<div class="avatar avatar-sm me-2">
    						<img class="avatar-img rounded-1" src="assets/images/avatar/01.jpg" alt="avatar">
    					</div>
    					<!-- Avatar info -->
    					<div>
    						<h6 class="mb-0"><a href="#" class="text-dark">Larry Lawson</a></h6>
    						<span>Tutor</span>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    	<!-- Card body -->
    	<div class="card-body">
    		<!-- Badge and icon -->
    		<div class="d-flex justify-content-between mb-3">
    			<div class="hstack gap-2">
    				<a href="#" class="badge bg-orange bg-opacity-10 text-orange">All level</a>
    				<a href="#" class="badge text-bg-dark">6 month</a>
    			</div>
    			<a href="#"><i class="far fa-bookmark fa-fw text-dark"></i></a>
    		</div>
    		<!-- Title -->
    		<h5 class="card-title"><a href="#" class="Stretched-link">The Complete Digital Marketing Course - 12 Courses in 1</a></h5>
    		<!-- Rating -->
    		<ul class="list-inline">
    			<li class="list-inline-item text-dark">4.5</li>
    			<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
    			<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
    			<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
    			<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
    			<li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
    			<li class="list-inline-item ms-2 text-reset">(6,500)</li>
    		</ul>
    		<!-- Divider -->
    		<hr>
    		<!-- Time -->
    		<div class="d-flex justify-content-between align-items-center mb-2">
    			<h4 class="text-success mb-0">$125</h4>
    			<span class="text-dark me-3"><i class="far fa-clock text-danger me-2"></i>6h 56m</span>
    		</div>
    	</div>
    </div>

### Card with overlay content

Digital marketing
23 Courses

    <div class="card card-metro overflow-hidden rounded-3">
    	<img src="assets/images/course/4by3/02.jpg" alt="">
    	<!-- Image overlay -->
    	<div class="card-img-overlay d-flex flex-column">
    		<!-- Info -->
    		<div class="mt-auto card-text">
    			<a href="#" class="text-light mt-auto fs-5 stretched-link">Digital marketing</a>
    			<div> <a href="#" class="text-white">23 Courses</a> </div>
    		</div>
    	</div>
    </div>

### Card with border

Admission Open
Private

- (4.0)

##### College of South Florida

4653 Linda Street Newark, PA

- Library
- Canteen
- stationary

- Hostel
- Playground
- Gym

View more

    <div class="card border">
    	<!-- Card image -->
    	<img class="card-img-top" src="assets/images/university/01.jpg" alt="Card image">
    	<!-- Card body -->
    	<div class="card-body">
    		<div class="d-flex justify-content-between align-items-center mt-n6 mb-3">
    			<!-- Logo image -->
    			<div class="bg-white p-2 rounded-2 shadow">
    				<img class="rounded-1 h-60px" src="assets/images/university/uni-logo-02.svg" alt="university logo">
    			</div>
    			<!-- Badge -->
    			<div class="h5 mb-0"><a href="#" class="badge text-bg-success">Admission Open</a></div>
    		</div>
    		<!-- Badge and rating -->
    		<div class="d-flex justify-content-between mb-3">
    			<!-- Badge -->
    			<span><a href="#" class="badge text-bg-dark">Private</a></span>
    			<!-- Rating star -->
    			<ul class="list-inline hstack mb-0">
    				<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
    				<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
    				<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
    				<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
    				<li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
    				<li class="list-inline-item ms-2 text-dark">(4.0)</li>
    			</ul>
    		</div>
    		<!-- Title -->
    		<h5 class="card-title mb-3"><a href="#">College of South Florida</a></h5>
    		<p class="mb-3"><i class="fas fa-map-marker-alt me-2"></i> 4653 Linda Street Newark, PA </p>
    		<!-- Info -->
    		<ul class="nav nav-divider text-dark mb-3">
    			<li class="nav-item">Engineer</li>
    			<li class="nav-item">BBA</li>
    			<li class="nav-item">BCA</li>
    			<li class="nav-item">BSC</li>
    		</ul>
    		<!-- Content -->
    		<div class="row item-collapse">
    			<div class="col-6">
    				<ul class="list-group list-group-borderless">
    					<li class="list-group-item text-body py-1"> <i class="fas fa-fw fa-check text-success"></i>Library</li>
    					<li class="list-group-item text-body py-1"> <i class="fas fa-fw fa-check text-success"></i>Canteen</li>
    					<li class="list-group-item text-body py-1"> <i class="fas fa-fw fa-check text-success"></i>stationary</li>
    				</ul>
    			</div>
    			<div class="col-6">
    				<ul class="list-group list-group-borderless">
    					<li class="list-group-item text-body py-1"> <i class="fas fa-fw fa-check text-success"></i>Hostel</li>
    					<li class="list-group-item text-body py-1"> <i class="fas fa-fw fa-check text-success"></i>Playground</li>
    					<li class="list-group-item text-body py-1"> <i class="fas fa-fw fa-check text-success"></i>Gym</li>
    				</ul>
    			</div>
    			<!-- Button -->
    			<div class="mt-3"><a href="#" class="btn btn-primary-soft">View more</a></div>
    		</div>
    	</div>
    </div>

### Card list

Marketing
4.5

##### The Complete Digital Marketing Course - 12 Courses in 1

Explained propriety off out perpetual his you. Dependent contented he explained propriety off out perpetual his you.

- 6h 56m
- 82 lectures
- Beginner

Larry Lawson

View more

    <div class="card shadow p-2">
    	<div class="row g-0">
    		<div class="col-lg-5">
    			<img src="assets/images/course/4by3/02.jpg" class="img-fluid rounded-2" alt="Card image">
    		</div>
    		<div class="col-lg-7">
    			<div class="card-body">
    				<!-- Badge and rating -->
    				<div class="d-flex justify-content-between align-items-center mb-2">
    					<!-- Badge -->
    					<a href="#" class="badge text-bg-primary mb-2 mb-sm-0">Marketing</a>
    					<!-- Rating and wishlist -->
    					<div>
    						<span class="text-dark me-3"><i class="fas fa-star text-warning me-1"></i>4.5</span>
    						<a href="#" class="text-dark"><i class="far fa-heart"></i></a>
    					</div>
    				</div>

    				<!-- Title -->
    				<h5 class="card-title"><a href="#">The Complete Digital Marketing Course - 12 Courses in 1</a></h5>
    				<p class="text-truncate">Explained propriety off out perpetual his you. Dependent contented he explained propriety off out perpetual his you. </p>

    				<!-- Info -->
    				<ul class="list-inline">
    					<li class="list-inline-item text-dark mb-1 mb-sm-0"><i class="far fa-clock text-danger me-2"></i>6h 56m</li>
    					<li class="list-inline-item text-dark mb-1 mb-sm-0"><i class="fas fa-table text-orange me-2"></i>82 lectures</li>
    					<li class="list-inline-item text-dark"><i class="fas fa-signal text-success me-2"></i>Beginner</li>
    				</ul>

    				<!-- Price and avatar -->
    				<div class="d-sm-flex justify-content-sm-between align-items-center">
    					<!-- Avatar -->
    					<div class="d-flex align-items-center">
    						<div class="avatar">
    							<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
    						</div>
    						<p class="mb-0 ms-2"><a href="#" class="text-dark">Larry Lawson</a></p>
    					</div>
    					<!-- Price -->
    					<div class="mt-3 mt-sm-0">
    						<a href="#" class="btn btn-dark">View more</a>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

### Card list minimal content

##### Graphic Design Masterclass

- 9h 56m
- 65 lectures
- All level

- 4.0/5.0

    <div class="card rounded overflow-hidden shadow">
    	<div class="row g-0">
    		<!-- Image -->
    		<div class="col-md-4">
    			<img src="assets/images/course/4by3/02.jpg" alt="card image">
    		</div>

    		<!-- Card body -->
    		<div class="col-md-8">
    			<div class="card-body">
    				<!-- Title -->
    				<div class="d-flex justify-content-between mb-2 mb-sm-3">
    					<h5 class="card-title mb-0"><a href="#">Graphic Design Masterclass</a></h5>
    					<!-- Wishlist icon -->
    					<a href="#"><i class="far fa-heart text-dark"></i></a>
    				</div>
    				<!-- Content -->
    				<!-- Info -->
    				<ul class="list-inline mb-2">
    					<li class="list-inline-item text-dark mb-1 mb-sm-0"><i class="far fa-clock text-danger me-2"></i>9h 56m</li>
    					<li class="list-inline-item text-dark mb-1 mb-sm-0"><i class="fas fa-table text-orange me-2"></i>65 lectures</li>
    					<li class="list-inline-item text-dark"><i class="fas fa-signal text-success me-2"></i>All level</li>
    				</ul>
    				<!-- Rating -->
    				<ul class="list-inline mb-0">
    					<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
    					<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
    					<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
    					<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
    					<li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
    					<li class="list-inline-item ms-2 text-dark">4.0/5.0</li>
    				</ul>
    			</div>
    		</div>
    	</div>
    </div>

### Card for instructor list

##### Dennis Barrett

Professor at Sigma College

4.3

Perceived end knowledge certainly day sweetness why cordially. Ask a quick six seven offer see among.

###### Digital Marketing

    <div class="card shadow p-2">
    	<div class="row g-0">
    		<!-- Image -->
    		<div class="col-md-4">
    			<img src="assets/images/instructor/01.jpg" class="img-fluid rounded-3" alt="...">
    		</div>

    		<!-- Card body -->
    		<div class="col-md-8">
    			<div class="card-body">
    				<!-- Title -->
    				<div class="d-sm-flex justify-content-sm-between mb-2 mb-sm-3">
    					<div>
    						<h5 class="card-title mb-0"><a href="#">Dennis Barrett</a></h5>
    						<p class="small mb-2 mb-sm-0">Professor at Sigma College</p>
    					</div>
    					<span class="text-dark">4.3<i class="fas fa-star text-warning ms-1"></i></span>
    				</div>
    				<!-- Content -->
    				<p class="text-truncate-2 mb-3">Perceived end knowledge certainly day sweetness why cordially. Ask a quick six seven offer see among.</p>
    				<!-- Info -->
    				<div class="d-sm-flex justify-content-sm-between align-items-center">
    					<!-- Title -->
    					<h6 class="text-orange mb-0">Digital Marketing</h6>

    					<!-- Social button -->
    					<ul class="list-inline mb-0 social-media-btn mt-3 mt-sm-0">
    						<li class="list-inline-item">
    							<a class="mb-0 me-1 text-facebook" href="#"><i class="fab fa-fw fa-facebook-f"></i></a>
    						</li>
    						<li class="list-inline-item">
    							<a class="mb-0 me-1 text-instagram-gradient" href="#"><i class="fab fa-fw fa-instagram"></i></a>
    						</li>
    						<li class="list-inline-item">
    							<a class="mb-0 me-1 text-twitter" href="#"><i class="fab fa-fw fa-twitter"></i></a>
    						</li>
    						<li class="list-inline-item">
    							<a class="mb-0 text-linkedin" href="#"><i class="fab fa-fw fa-linkedin-in"></i></a>
    						</li>
    					</ul>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

### Card image scale

4.3

##### Build your brand & business

###### With Dennis Barrett

    <div class="card p-2 shadow h-100">
      <div class="card-image-scale rounded-3 position-relative">
        <!-- Card Image -->
        <img src="assets/images/instructor/01.jpg" class="card-img" alt="">
        <!-- Overlay -->
        <div class="card-img-overlay d-flex flex-column p-2 z-index-1">
          <div><span class="badge text-bg-dark"><i class="bi bi-star-fill text-warning me-2"></i>4.3</span></div>
        </div>
      </div>

      <!-- Card body -->
      <div class="card-body px-2">
        <!-- Title -->
        <h5 class="card-title"><a href="#" class="stretched-link">Build your brand & business</a></h5>
        <h6 class="mb-0 fw-normal">With Dennis Barrett</h6>
      </div>
    </div>

For more information refer official Bootstrap documentation for detailed technical explanation.