Card

Geek's cards provide a flexible and extensible content container with multiple variants and options.

Horizontal Card with Image

Design
HTML

Courses

Getting started the Web App JavaScript in 2020

Our features, journey, tips and us being us. Lorem ipsum dolor sit amet, accumsan in, tempor dictum neque.

Dustin Warren

September 13, 2020

6 Min Read

<div class="card mb-4 card-hover  ">
                                                            <div class="row g-0">
                                                               <!-- Image -->
                                                               <a href="blog-single.html" class="col-lg-8 col-md-12 col-12 bg-cover img-left-rounded" style="background-image: url(../assets/images/blog/blogpost-2.jpg);">
                                                               <img src="../assets/images/blog/blogpost-2.jpg" class="img-fluid d-lg-none invisible" alt=""></a>
                                                               <div class="col-lg-4 col-md-12 col-12">
                                                                  <!-- Card Body -->
                                                                  <div class="card-body">
                                                                     <a href="#" class="badge bg-warning mb-3">Courses</a>
                                                                     <h1 class="mb-4"> <a href="blog-single.html" class="text-inherit">
                                                                        Getting started the Web App JavaScript in 2020
                                                                        </a>
                                                                     </h1>
                                                                     <p>Our features, journey, tips and us being us. Lorem ipsum dolor sit amet, accumsan
                                                                        in, tempor dictum neque.
                                                                     </p>
                                                                     <!-- Media Content -->
                                                                     <div class="row align-items-center g-0 mt-7">
                                                                        <div class="col-auto">
                                                                           <img src="../assets/images/avatar/avatar-6.jpg" alt="" class="rounded-circle avatar-sm me-2">
                                                                        </div>
                                                                        <div class="col lh-1 ">
                                                                           <h5 class="mb-1">Dustin Warren</h5>
                                                                           <p class="fs-6 mb-0">September 13, 2020</p>
                                                                        </div>
                                                                        <div class="col-auto">
                                                                           <p class="fs-6 mb-0">6 Min Read</p>
                                                                        </div>
                                                                     </div>
                                                                  </div>
                                                               </div>
                                                            </div>
                                                         </div>

Courses

How to become modern Stack Developer in 2020

Lorem ipsum dolor sit amet, accu msan in, tempor dictum nequrem ipsum...

Reva Yokk

September 05, 2020

20 Min Read

<div class="col-xl-4 col-lg-4 col-md-6 col-12">
                                                            <!-- Card -->
                                                            <div class="card card-hover ">
                                                               <a href="blog-single.html">
                                                               <img src="../assets/images/blog/blogpost-2.jpg" class="img-fluid  rounded-top-md" alt=""></a>
                                                               <!-- Card Body -->
                                                               <div class="card-body">
                                                                  <a href="#" class="badge bg-info mb-3">Courses</a>
                                                                  <h3><a href="blog-single.html" class="text-inherit">
                                                                     How to become modern Stack Developer in 2020
                                                                     </a>
                                                                  </h3>
                                                                  <p>Lorem ipsum dolor sit amet, accu msan in, tempor dictum nequrem ipsum...</p>
                                                                  <!-- Media Content -->
                                                                  <div class="row align-items-center g-0 mt-4">
                                                                     <div class="col-auto">
                                                                        <img src="../assets/images/avatar/avatar-7.jpg" alt="" class="rounded-circle avatar-sm me-2">
                                                                     </div>
                                                                     <div class="col lh-1">
                                                                        <h5 class="mb-1">Reva Yokk</h5>
                                                                        <p class="fs-6 mb-0">September 05, 2020</p>
                                                                     </div>
                                                                     <div class="col-auto">
                                                                        <p class="fs-6 mb-0">20 Min Read</p>
                                                                     </div>
                                                                  </div>
                                                               </div>
                                                            </div>
                                                         </div>

Card Course Thumbnail

Design
HTML

An Ultimate Guide for Beginners Bootstrap 5

3h 56m
Beginner

4.5 (9,300)

Morris Mccoy

<div class="row">
                              <div class="col-lg-3 col-md-6 col-12">
                                <!-- Card -->
                                <div class="card card-hover">
                                  <a href="#"><img src="../assets/images/course/course-bootstrap.jpg" alt=""
                                      class="img-fluid w-100 rounded-top-md"></a>
                                  <!-- Card Body -->
                                  <div class="card-body">
                                    <h3 class="h4 mb-2 text-truncate-line-2 "><a href="#" class="text-inherit">An Ultimate
                                        Guide for
                                        Beginners Bootstrap 5</a>
                                    </h3>
                                    <ul class="mb-3  list-inline">
                                      <li class="list-inline-item"><i class="far fa-clock me-1"></i>3h 56m
                                      </li>
                                      <li class="list-inline-item"><svg class="me-1 mt-n1" width="16" height="16"
                                          viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                          <rect x="3" y="8" width="2" height="6" rx="1" fill="#754FFE">
                                          </rect>
                                          <rect x="7" y="5" width="2" height="9" rx="1" fill="#DBD8E9">
                                          </rect>
                                          <rect x="11" y="2" width="2" height="12" rx="1" fill="#DBD8E9">
                                          </rect>
                                        </svg>Beginner </li>
                                    </ul>
                                    <div>
                                      <span>
                                        <i class="mdi mdi-star text-warning me-n1"></i>
                                        <i class="mdi mdi-star text-warning me-n1"></i>
                                        <i class="mdi mdi-star text-warning me-n1"></i>
                                        <i class="mdi mdi-star text-warning me-n1"></i>
                                        <i class="mdi mdi-star text-warning"></i>
                                      </span>
                                      <span class="text-warning">4.5</span>
                                      <span class="fs-6 text-muted">(9,300)</span>

                                    </div>
                                  </div>
                                  <!-- Card Footer -->
                                  <div class="card-footer">
                                    <div class="row align-items-center g-0">
                                      <div class="col-auto">
                                        <img src="../assets/images/avatar/avatar-3.jpg" class="rounded-circle avatar-xs" alt="">
                                      </div>
                                      <div class="col ms-2">
                                        <span>Morris Mccoy</span>
                                      </div>
                                      <div class="col-auto">
                                        <a href="#" class="text-muted bookmark">
                                          <i class="fe fe-bookmark  "></i>
                                        </a>
                                      </div>

                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>

Card Course Horizontal

Design
HTML

Bootstrap 5 Beginner Tutorial

2h 46m
Advance
4.5 (7,900)

Ted Hawkins

 <div class="px-4">
                              <div class="card mb-4 card-hover ">
                                <div class="row">
                                  <a class="col-12 col-md-12 col-xl-3 col-lg-3 bg-cover rounded-left"
                                    style="background-image: url(../assets/images/course/course-bootstrap.jpg);" href="#">
                                  </a>
                                  <div class="col-lg-9 col-md-12 col-12">
                                    <!-- Card Body -->
                                    <div class="card-body">
                                      <h3 class="mb-2 text-truncate-line-2 "><a href="#" class="text-inherit">Bootstrap 5
                                          Beginner
                                          Tutorial</a></h3>
                                      <ul class="mb-5  list-inline">
                                        <li class="list-inline-item"><i class="far fa-clock me-1"></i>2h 46m
                                        </li>
                                        <li class="list-inline-item"><svg class="me-1 mt-n1" width="16" height="16"
                                            viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <rect x="3" y="8" width="2" height="6" rx="1" fill="#754FFE">
                                            </rect>
                                            <rect x="7" y="5" width="2" height="9" rx="1" fill="#754FFE">
                                            </rect>
                                            <rect x="11" y="2" width="2" height="12" rx="1" fill="#754FFE">
                                            </rect>
                                          </svg>Advance </li>
                                        <li class="list-inline-item"> <span>
                                            <i class="mdi mdi-star text-warning me-n1"></i>
                                            <i class="mdi mdi-star text-warning me-n1"></i>
                                            <i class="mdi mdi-star text-warning me-n1"></i>
                                            <i class="mdi mdi-star text-warning me-n1"></i>
                                            <i class="mdi mdi-star text-warning"></i>
                                          </span>
                                          <span class="text-warning">4.5</span>
                                          <span class="fs-6 text-muted">(7,900)</span>
                                        </li>
                                      </ul>
                                      <div class="row align-items-center g-0">
                                        <div class="col-auto">
                                          <img src="../assets/images/avatar/avatar-2.jpg" class="rounded-circle avatar-xs" alt="">
                                        </div>
                                        <div class="col ms-2">
                                          <span>Ted Hawkins</span>
                                        </div>
                                        <div class="col-auto">
                                          <a href="#" class="text-muted bookmark">
                                            <i class="fe fe-bookmark  "></i>
                                          </a>
                                        </div>
                                      </div>
                                      <div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>

Card

<div class="card card-hover">
                                                            <div
                                                               class="d-flex justify-content-between align-items-center p-4">
                                                               <div class="d-flex">
                                                                  <a href="course-path-single.html"> <img
                                                                     src="../assets/images/path/path-bootstrap.jpg" alt=""
                                                                     class="avatar-md"></a>
                                                                  <div class="ms-3">
                                                                     <h4 class="mb-1">
                                                                        <a href="course-path-single.html"
                                                                           class="text-inherit">
                                                                        </a>
                                                                        Bootstrap
                                                                     </h4>
                                                                     <p class="mb-0 fs-6"> <span
                                                                        class="me-2"><span
                                                                        class="text-dark fw-medium">12</span>
                                                                        Courses</span>
                                                                        <span><span
                                                                           class="text-dark fw-medium">34
                                                                        </span> Hours</span>
                                                                     </p>
                                                                  </div>
                                                               </div>
                                                            </div>
                                                         </div>

Profile

Design
HTML

Jenny Wilson

Front-end Developer, Designer

4.5Instructor Rating

42 Courses 1,10,124 Students

I start my development and digital career studying digital design. After taking a couple of programming classes I realize that code is what I wanted to be doing, so I start learning by myself.

View Details

<div class="col-lg-6 col-md-6 col-12">
                                                            <!-- Card -->
                                                            <div class="card  mb-4">
                                                               <!-- Card Body -->
                                                               <div class="card-body">
                                                                  <div class="d-lg-flex">
                                                                     <div class="position-relative">
                                                                        <img src="../assets/images/avatar/avatar-1.jpg" alt="" class="rounded-circle
                                                                           avatar-xl mb-3 mb-lg-0 ">
                                                                        <a href="#" class="position-absolute
                                                                           mt-2 ms-n3" data-bs-toggle="tooltip" data-placement="top" title="" data-original-title="Verifed">
                                                                        <img src="../assets/images/checked-mark.svg" alt="" height="30" width="30">
                                                                        </a>
                                                                     </div>
                                                                     <div class="ms-lg-4">
                                                                        <h4 class="mb-0">Jenny Wilson</h4>
                                                                        <p class="mb-0 fs-6">Front-end Developer, Designer</p>
                                                                        <p class="fs-6 mb-1 text-warning"><span>4.5</span><span class="mdi mdi-star text-warning
                                                                           me-2"></span>Instructor Rating</p>
                                                                        <p class="fs-6 text-muted"><span class="ms-2"><span class="text-dark fw-medium">42</span>
                                                                           Courses</span><span class="ms-2"><span class="text-dark fw-medium">1,10,124 </span>
                                                                           Students</span>
                                                                        </p>
                                                                        <p>I start my development and digital career studying digital
                                                                           design. After taking a couple of programming classes I realize
                                                                           that code is what I wanted to be doing, so I start learning by
                                                                           myself.
                                                                        </p>
                                                                        <a href="#" class="btn btn-outline-white btn-sm">
                                                                        View Details
                                                                        </a>
                                                                     </div>
                                                                  </div>
                                                               </div>
                                                            </div>
                                                         </div>

List groups

Create lists of content in a card with a flush list group.

Design
HTML

<div class="col-xl-4 col-lg-6 col-md-12 col-12">
                                                            <div class="card" id="courseAccordion">
                                                               <!-- List group -->
                                                               <ul class="list-group list-group-flush">
                                                                  <li class="list-group-item p-0 bg-transparent">
                                                                     <!-- Toggle -->
                                                                     <a class="d-flex align-items-center text-inherit text-decoration-none py-3 px-4" data-bs-toggle="collapse" href="#courseTwo" role="button" aria-expanded="false" aria-controls="courseTwo">
                                                                        <div class="me-auto">
                                                                           <h4 class="mb-0">Course Overview</h4>
                                                                           <p class="mb-0 text-muted">14 videos (1 hour and 17 minutes)</p>
                                                                        </div>
                                                                        <!-- Chevron -->
                                                                        <span class="chevron-arrow ms-4">
                                                                        <i class="fe fe-chevron-down fs-4"></i>
                                                                        </span>
                                                                     </a>
                                                                     <!-- / .row -->
                                                                     <!-- Collapse -->
                                                                     <div class="collapse show" id="courseTwo" data-bs-parent="#courseAccordion">
                                                                        <!-- List group -->
                                                                        <ul class="list-group list-group-flush">
                                                                           <li class="list-group-item">
                                                                              <div>
                                                                                 <div class="progress" style="height: 6px;">
                                                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                                                                                 </div>
                                                                                 <small>5% Completed</small>
                                                                              </div>
                                                                           </li>
                                                                           <!-- List group -->
                                                                           <li class="list-group-item">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-success text-white icon-sm rounded-circle me-2"><i class="mdi mdi-play fs-4"></i></span>
                                                                                    <span>Introduction</span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>1m 7s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group -->
                                                                           <li class="list-group-item list-group-item-action active">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-white text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-primary icon-sm rounded-circle me-2"><i class="mdi mdi-play fs-4"></i></span>
                                                                                    <span>Installing Development Software</span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>3m 11s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group -->
                                                                           <li class="list-group-item">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-primary icon-sm rounded-circle me-2"><i class="mdi mdi-play fs-4"></i></span>
                                                                                    <span>Hello World Project from GitHub</span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>2m 33s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-muted icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Our Sample Website</span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>2m 15s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                        </ul>
                                                                     </div>
                                                                  </li>
                                                                  <li class="list-group-item p-0">
                                                                     <!-- Toggle -->
                                                                     <a class="d-flex align-items-center text-inherit text-decoration-none py-3 px-4" data-bs-toggle="collapse" href="#courseThree" role="button" aria-expanded="false" aria-controls="courseThree">
                                                                        <div class="me-auto">
                                                                           <!-- Title -->
                                                                           <h4 class="mb-0">JavaScript Beginning</h4>
                                                                           <p class="mb-0 text-muted">6 videos (34 minutes)</p>
                                                                        </div>
                                                                        <!-- Chevron -->
                                                                        <span class="chevron-arrow ms-4">
                                                                        <i class="fe fe-chevron-down fs-4"></i>
                                                                        </span>
                                                                     </a>
                                                                     <!-- / .row -->
                                                                     <!-- Collapse -->
                                                                     <div class="collapse" id="courseThree" data-bs-parent="#courseAccordion">
                                                                        <!-- List group item -->
                                                                        <ul class="list-group list-group-flush">
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <div>
                                                                                 <div class="progress" style="height: 6px;">
                                                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                                                                 </div>
                                                                                 <small>25% Completed</small>
                                                                              </div>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Introduction</span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>1m 41s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Adding JavaScript Code to a Web Page</span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>3m 39s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span> Working with JavaScript Files </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>6m 18s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Formatting Code </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>2m 18s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span> Detecting and Fixing Errors </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>3m 14s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Case Sensitivity </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>1m 48s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Commenting Code </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>2m 24s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Summary</span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>2m 14s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                        </ul>
                                                                     </div>
                                                                  </li>
                                                                  <li class="list-group-item p-0">
                                                                     <!-- Toggle -->
                                                                     <a class="d-flex align-items-center text-inherit text-decoration-none py-3 px-4" data-bs-toggle="collapse" href="#courseFour" role="button" aria-expanded="false" aria-controls="courseFour">
                                                                        <div class="me-auto">
                                                                           <!-- Title -->
                                                                           <h4 class="mb-0">Variables and Constants</h4>
                                                                           <p class="mb-0 text-muted">6 videos (3 hour and 24 minutes)</p>
                                                                        </div>
                                                                        <!-- Chevron -->
                                                                        <span class="chevron-arrow ms-4">
                                                                        <i class="fe fe-chevron-down fs-4"></i>
                                                                        </span>
                                                                     </a>
                                                                     <!-- / .row -->
                                                                     <!-- Collapse -->
                                                                     <div class="collapse" id="courseFour" data-bs-parent="#courseAccordion">
                                                                        <!-- List group -->
                                                                        <ul class="list-group list-group-flush">
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <div>
                                                                                 <div class="progress" style="height: 6px;">
                                                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                                                                 </div>
                                                                                 <small>0% Completed</small>
                                                                              </div>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Introduction</span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>1m 19s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>What Is a Variable?</span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>2m 11s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Declaring Variables </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>2m 30s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Using let to Declare Variables </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>3m 28s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Naming Variables </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>3m 14s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Common Errors Using Variables </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>3m 30s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Changing Variable Values </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>2m 4s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Constants </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>3m 15s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>The var Keyword </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>2m 20s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Summary</span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>1m 49s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                        </ul>
                                                                     </div>
                                                                  </li>
                                                                  <li class="list-group-item p-0">
                                                                     <!-- Toggle -->
                                                                     <a class="d-flex align-items-center text-inherit text-decoration-none py-3 px-4" data-bs-toggle="collapse" href="#courseSix" role="button" aria-expanded="false" aria-controls="courseSix">
                                                                        <div class="me-auto">
                                                                           <!-- Title -->
                                                                           <h4 class="mb-0">Program Flow</h4>
                                                                           <p class="mb-0 text-muted">5 videos (2 hour and 10 minutes)</p>
                                                                        </div>
                                                                        <!-- Chevron -->
                                                                        <span class="chevron-arrow ms-4">
                                                                        <i class="fe fe-chevron-down fs-4"></i>
                                                                        </span>
                                                                     </a>
                                                                     <!-- / .row -->
                                                                     <!-- Collapse -->
                                                                     <div class="collapse" id="courseSix" data-bs-parent="#courseAccordion">
                                                                        <!-- List group -->
                                                                        <ul class="list-group list-group-flush">
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <div>
                                                                                 <div class="progress" style="height: 6px;">
                                                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                                                                 </div>
                                                                                 <small>0% Completed</small>
                                                                              </div>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Introduction</span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>1m 52s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Clip Watched </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>4m 27s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Conditionals Using if() </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>4m 25s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Truthy and Falsy</span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>3m 30s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>if ... else </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>3m 30s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Comparing === and == </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>1m 52s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>The Ternary Operator </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>2m 47s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Block Scope Using let </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>2m 21s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Looping with for() </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>5m 30s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Looping with do ... while() </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>1m 58s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                           <!-- List group item -->
                                                                           <li class="list-group-item disabled" aria-disabled="true">
                                                                              <a class="mb-0 d-flex justify-content-between align-items-center text-inherit text-decoration-none">
                                                                                 <div class="text-truncate">
                                                                                    <span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
                                                                                    <span>Summary </span>
                                                                                 </div>
                                                                                 <div class="text-truncate">
                                                                                    <span>2m 21s</span>
                                                                                 </div>
                                                                              </a>
                                                                           </li>
                                                                        </ul>
                                                                     </div>
                                                                  </li>
                                                               </ul>
                                                            </div>
                                                         </div>

Design
HTML

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

<div class="card" style="width: 18rem;">
   <ul class="list-group list-group-flush">
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Vestibulum at eros</li>
   </ul>
</div>

Design
HTML

Featured

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Card with Icon

Design
HTML

Make Education Accessible

Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id blanvolutpat nunc.

Learn and Grow

Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id blanvolutpat nunc.

Make Education Accessible

Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id blanvolutpat nunc.

<div class="container">
                                <div class="row">
                                   <div class="col-md-4 col-12">
                                      <!-- card -->
                                      <div class="card mb-4 mb-lg-0">
                                         <!-- card body -->
                                         <div class="card-body p-5">
                                            <!-- icon -->
                                            <div class="mb-3"><i class="mdi mdi-school-outline mdi-48px text-primary lh-1 "></i></div>
                                            <h3 class="mb-2">Make Education Accessible</h3>
                                            <p class="mb-0">Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id
                                               blanvolutpat nunc.
                                            </p>
                                         </div>
                                      </div>
                                   </div>
                                   <div class="col-md-4 col-12">
                                      <!-- card -->
                                      <div class="card mb-4 mb-lg-0">
                                         <!-- card body -->
                                         <div class="card-body p-5">
                                            <!-- icon -->
                                            <div class="mb-3"><i class="mdi mdi-account-group mdi-48px text-primary lh-1 "></i></div>
                                            <h3 class="mb-2">Learn and Grow</h3>
                                            <p class="mb-0">Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id
                                               blanvolutpat nunc.
                                            </p>
                                         </div>
                                      </div>
                                   </div>
                                   <div class="col-md-4 col-12">
                                      <!-- card -->
                                      <div class="card mb-4 mb-lg-0">
                                         <!-- card body -->
                                         <div class="card-body p-5">
                                            <!-- icon -->
                                            <div class="mb-3"><i class="mdi mdi-finance mdi-48px text-primary lh-1 "></i></div>
                                            <h3 class="mb-2">Make Education Accessible</h3>
                                            <p class="mb-0">Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id
                                               blanvolutpat nunc.
                                            </p>
                                         </div>
                                      </div>
                                   </div>
                                </div>
                             </div>

Card 2 Column

Design
HTML

Course Description

What will you learn?

Vanilla JS is a fast, lightweight, cross-platformframework for building incredible, powerful JavaScript applications.

Introduction to JavaScript Free

Courses - 1 6 Lessons 1 Hour 12 Min

In et tempus dui, in porta dolor. Donec molestie a purus ut interdum. Donec quis felis dignissim, luctus libero ornare.

View Chapter Details

JavaScript Beginning

Courses - 2 4 Lessons 32 Min

Malesuada fames ac turpis egesta mpor tempus tincidunt. Aliquam congue lacus ac tellus consectetur malesuada.

View Chapter Details

Variables and Constants

Courses - 3 8 Lessons 10 Min

Aliquam pulvinar eros a dictur vitae diam imperdiet, ornare turpis vequet elit nec, imperdiet lectuna liquam qs.

View Chapter Details

Types and Operators

Courses - 4 10 Lessons 32 Min

In lobortis quam eu augue spendisse imperdiet nec orci ipsum, tempus pharetra posuere imperdiet, lacinia a nisl.

View Chapter Details

<div class="py-8 bg-light">
                                        <div class="container">
                                          <div class="row mb-8 justify-content-center">
                                            <div class="col-lg-8 col-md-12 col-12 text-center">
                                              <!-- caption -->
                                              <span class="text-primary mb-3 d-block text-uppercase fw-semi-bold ls-xl">Course Description</span>
                                              <h2 class="mb-2 display-4 fw-bold">What will you learn?</h2>
                                              <p class="lead">Vanilla JS is a fast, lightweight, cross-platformframework for building incredible, powerful
                                                JavaScript applications.</p>
                                            </div>
                                          </div>
                                          <!-- row -->
                                          <div class="row">
                                            <div class="col-lg-6 col-md-12 col-12">
                                              <!-- Features -->
                                              <div class="card mb-4">
                                                  <!-- Card body -->
                                                <div class="card-body p-6">
                                                  <div class="d-md-flex mb-4">
                                                    <div class="mb-3 mb-md-0">
                                                        <!-- Img -->
                                                      <img src="../assets/images/svg/feature-icon-1.svg" alt="" class=" bg-primary icon-shape icon-xxl rounded-circle">
                                                    </div>
                                                   <!-- Content -->
                                                    <div class="ms-md-3">
                                                      <h2 class="fw-bold mb-1">Introduction to JavaScript <span class="badge bg-warning ms-2">Free</span></h2>
                                                      <p class="text-uppercase fs-6 fw-semi-bold mb-0"><span class="text-dark">Courses -
                                                          1</span> <span class="ms-3">6 Lessons</span> <span class="ms-3">1 Hour 12 Min</span></p>
                                                    </div>
                                                  </div>
                                                  <p class="mb-4 fs-4">In et tempus dui, in porta dolor. Donec molestie a purus ut interdum. Donec
                                                    quis felis dignissim, luctus libero ornare.</p>
                                                  <a href="#" class="btn-link" data-bs-toggle="modal" data-bs-target="#courseModal">View Chapter Details <i class="fe fe-plus"></i></a>
                                                </div>
                                              </div>
                                            </div>
                                            <div class="col-lg-6 col-md-12 col-12">
                                              <!-- features -->
                                              <div class="card mb-4">
                                                <div class="card-body p-6">
                                                  <div class="d-md-flex mb-4">
                                                    <div class="mb-3 mb-md-0">
                                                      <img src="../assets/images/svg/feature-icon-2.svg" alt="" class=" bg-primary icon-shape icon-xxl rounded-circle">
                                                    </div>
                                                    <div class="ms-md-3">
                                                      <h2 class="fw-bold mb-1">JavaScript Beginning</h2>
                                                      <p class="text-uppercase fs-6 fw-semi-bold mb-0"><span class="text-dark">Courses -
                                                          2</span> <span class="ms-3">4 Lessons</span> <span class="ms-3">32 Min</span></p>
                                                    </div>
                                                  </div>
                                                  <p class="mb-4 fs-4">Malesuada fames ac turpis egesta mpor tempus tincidunt. Aliquam congue lacus
                                                    ac tellus consectetur malesuada.</p>
                                                  <a href="#" class="btn-link" data-bs-toggle="modal" data-bs-target="#courseModal">View Chapter Details <i class="fe fe-plus"></i></a>
                                                </div>
                                              </div>
                                            </div>
                                            <div class="col-lg-6 col-md-12 col-12">
                                              <!-- features -->
                                              <div class="card mb-4">
                                                <div class="card-body p-6">
                                                  <div class="d-md-flex mb-4">
                                                    <div class="mb-3 mb-md-0">
                                                      <img src="../assets/images/svg/feature-icon-3.svg" alt="" class=" bg-primary icon-shape icon-xxl rounded-circle">
                                                    </div>
                                                    <div class="ms-md-3">
                                                      <h2 class="fw-bold mb-1">Variables and Constants</h2>
                                                      <p class="text-uppercase fs-6 fw-semi-bold mb-0"><span class="text-dark">Courses -
                                                          3</span> <span class="ms-3">8 Lessons</span> <span class="ms-3">10 Min</span></p>
                                                    </div>
                                                  </div>
                                                  <p class="mb-4 fs-4">Aliquam pulvinar eros a dictur vitae diam imperdiet, ornare turpis vequet
                                                    elit nec, imperdiet lectuna liquam qs.</p>
                                                  <a href="#" class="btn-link" data-bs-toggle="modal" data-bs-target="#courseModal">View Chapter Details <i class="fe fe-plus"></i></a>
                                                </div>
                                              </div>
                                            </div>
                                            <div class="col-lg-6 col-md-12 col-12">
                                              <!-- features -->
                                              <div class="card mb-4">
                                                <div class="card-body p-6">
                                                  <div class="d-md-flex mb-4">
                                                    <div class="mb-3 mb-md-0">
                                                      <img src="../assets/images/svg/feature-icon-4.svg" alt="" class=" bg-primary icon-shape icon-xxl rounded-circle">
                                                    </div>
                                                    <div class="ms-md-3">
                                                      <h2 class="fw-bold mb-1">Types and Operators</h2>
                                                      <p class="text-uppercase fs-6 fw-semi-bold mb-0"><span class="text-dark">Courses -
                                                          4</span> <span class="ms-3">10 Lessons</span> <span class="ms-3">32 Min</span></p>
                                                    </div>
                                                  </div>
                                                  <p class="mb-4 fs-4">In lobortis quam eu augue spendisse imperdiet nec orci ipsum, tempus pharetra
                                                    posuere imperdiet, lacinia a nisl.</p>
                                                  <a href="#" class="btn-link" data-bs-toggle="modal" data-bs-target="#courseModal">View Chapter Details <i class="fe fe-plus"></i></a>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>

Card

Horizontal Card with Image

Getting started the Web App JavaScript in 2020

Dustin Warren

Card Thumbnail

How to become modern Stack Developer in 2020

Reva Yokk

Card Course Thumbnail

An Ultimate Guide for Beginners Bootstrap 5

Card Course Horizontal

Bootstrap 5 Beginner Tutorial

Card

Profile

Jenny Wilson

List groups

Course Overview

JavaScript Beginning

Variables and Constants

Program Flow

Card with Icon

Make Education Accessible

Learn and Grow

Make Education Accessible

Card 2 Column

What will you learn?

Introduction to JavaScript Free

JavaScript Beginning

Variables and Constants

Types and Operators

Pete Martin

Olivia Cooper

Jamarcus Streich

Lauren Wilson

User Name

Rosalee Roberts