Card

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

Card Image Styled Webinar

webinar-1

Education Edition Deployment And Set Up

Thu, November 10, 2023
6:00 PM – 8:00 PM GMT
Register Now
<section class="py-6">
<div class="container">
    <div class="row">
        <div class="col-xxl-4 col-xl-6 col-lg-12">
            <div class="card mb-4 mb-xl-0 card-hover border">
                <a href="#!">
                    <img src="../assets/images/education/edu-webinar-1.jpg" alt="webinar-1" class="img-fluid w-100 rounded-top-3">
                </a>
                <div class="card-body">
                    <h3 class="mb-4 text-truncate">
                        <a href="#!" class="text-inherit">Education Edition Deployment And Set Up</a>
                    </h3>
                    <div class="mb-4">
                        <div class="mb-3 lh-1">
                            <span class="me-1">
                                <i class="bi bi-calendar-check"></i>
                            </span>
                            <span>Thu, November 10, 2023</span>
                        </div>
                        <div class="lh-1">
                            <span class="align-text-top me-1">
                              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16">
                                <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
                              </svg>                        </span>
                            <span>6:00 PM – 8:00 PM GMT</span>
                        </div>
                    </div>
                    <a href="#!" class="btn btn-light-primary text-primary">Register Now</a>
                </div>
            </div>
        </div>
    </div>
</div>
</section>

Card Top Image

<section class="py-6">
<div class="container">
  <div class="row">
    <div class="col-xxl-3 col-xl-6 col-12">
      <div class="card mb-4 card-hover border">
        <a href="#!">
          <img src="../assets/images/education/edu-img-1.jpg" alt="writing"
            class="img-fluid card-img-top">
        </a>
        <div class="card-body">
          <h4 class="mb-3">
            <a href="#!" class="text-inherit">Content Writing</a>
          </h4>
          <div class="d-flex align-items-center mb-5 lh-1">
            <div>
              <span class="text-inherit fw-semibold">4.9</span>
              <span class="ms-1"><svg xmlns="http://www.w3.org/2000/svg" width="12"
                  height="12" fill="var(--gk-success)"
                  class="bi bi-star-fill align-baseline" viewBox="0 0 16 16">
                  <path
                    d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
                  </path>
                </svg>
                (31)
              </span>
            </div>
            <div class=" mx-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                fill="var(--gk-gray-400)" class="bi bi-dot" viewBox="0 0 16 16">
                <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
              </svg></div>
            <div>
              <span class="text-inherit fw-semibold me-1">8</span> Hours
            </div>
        </div>
          <a href="#!">Enroll Today <span class=""><svg xmlns="http://www.w3.org/2000/svg"
                width="20" height="20" fill="currentColor" class="bi bi-arrow-right-short"
                viewBox="0 0 16 16">
                <path fill-rule="evenodd"
                  d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z">
                </path>
              </svg></span></a>
        </div>
      </div>
    </div>
    <div class="col-xxl-3 col-xl-6 col-12">
      <div class="card mb-4 card-hover border">
        <a href="#!">
          <img src="../assets/images/education/edu-img-2.jpg" alt="design"
            class="img-fluid  card-img-top">
        </a>
        <div class="card-body">
          <h4 class="mb-3">
            <a href="#!" class="text-inherit">UI / UX Design</a>
          </h4>
          <div class="d-flex align-items-center mb-5 lh-1">
        <span class="badge bg-success me-2">New</span>
            <div>
              <span class="text-inherit fw-semibold">4.9</span>
              <span class="ms-1"><svg xmlns="http://www.w3.org/2000/svg" width="12"
                  height="12" fill="var(--gk-success)"
                  class="bi bi-star-fill align-baseline" viewBox="0 0 16 16">
                  <path
                    d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
                  </path>
                </svg>
                (23)
              </span>
            </div>
            <div class=" mx-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                fill="var(--gk-gray-400)" class="bi bi-dot" viewBox="0 0 16 16">
                <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
              </svg></div>
            <div>
              <span class="text-inherit fw-semibold me-1">12</span>Hours
            </div>
          </div>
          <a href="#!">Enroll Today <span class=""><svg xmlns="http://www.w3.org/2000/svg"
                width="20" height="20" fill="currentColor" class="bi bi-arrow-right-short"
                viewBox="0 0 16 16">
                <path fill-rule="evenodd"
                  d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z">
                </path>
              </svg></span></a>
        </div>
      </div>
    </div>
  </div>
</div>
</section>

Card icon with hover

Browse Category

Discover jobs across popular roles

Select a role and we'll show you relevant jobs for it!

Analtyics

2k Jobs

UI / UX Design

1k Jobs

Developer

800 Jobs

Product Manager

1.2K Jobs

SEO

1200 Jobs

Data Analytics

200 Jobs

Mobile Developer

120 Jobs

Finance

5k Jobs

   <div class="py-lg-14 bg-light pt-8 pb-8">
                      <!-- container -->

                      <div class="container">
                        <div class="row">
                          <!-- col -->

                          <div class="col-md-12 col-12">

                            <div class="row text-center">
                              <div class="col-md-12 px-lg-8 mb-8 mt-6">
                                <!-- text -->

                                <span class="text-uppercase text-primary fw-semibold ls-md">Browse Category
                                </span>
                                <!-- heading -->

                                <h2 class="h1 fw-bold mt-3">Discover jobs across popular roles
                                </h2>
                                <!-- text -->

                                <p class="mb-0 fs-4">Select a role and we'll show you relevant jobs for it!</p>

                              </div>
                            </div>
                            <div class="row gy-4">
                              <div class="col-xl-3 col-lg-6 col-md-6 col-12">
                                <!-- card -->

                                <div class="card  border-top border-muted border-4  card-hover-with-icon">
                                  <!-- card body -->

                                  <div class="card-body">
                                    <!-- icon  -->

                                    <div class="icon-shape icon-lg rounded-circle bg-light  mb-3  card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-activity" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"></path>
                                      </svg></div>
                                    <div class="d-flex align-items-center justify-content-between">
                                      <div>
                                        <!-- heading -->

                                        <h4 class="mb-0">Analtyics</h4>
                                        <!-- text -->

                                        <p class="mb-0 ">2k Jobs</p>
                                      </div>
                                      <!-- arrow -->

                                      <a href="#" class="text-inherit">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                                          <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
                                        </svg>
                                      </a>
                                    </div>
                                  </div>

                                </div>

                              </div>
                              <div class="col-xl-3 col-lg-6 col-md-6 col-12">
                                <!-- card -->

                                <div class="card  border-top border-muted border-4  card-hover-with-icon">
                                  <!-- card body -->

                                  <div class="card-body">
                                    <!-- icon -->

                                    <div class="icon-shape icon-lg rounded-circle bg-light  mb-3  card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-palette" viewBox="0 0 16 16">
                                        <path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
                                        <path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"></path>
                                      </svg></div>
                                    <div class="d-flex align-items-center justify-content-between">
                                      <div>
                                        <!-- heading -->

                                        <h4 class="mb-0">UI / UX Design</h4>
                                        <!-- text -->

                                        <p class="mb-0 ">1k Jobs</p>
                                      </div>
                                      <!-- icon -->

                                      <a href="#" class="text-inherit">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                                          <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
                                        </svg>
                                      </a>
                                    </div>
                                  </div>

                                </div>

                              </div>
                              <div class="col-xl-3 col-lg-6 col-md-6 col-12">
                                <!-- card -->

                                <div class="card  border-top border-muted border-4  card-hover-with-icon">
                                  <!-- card body -->

                                  <div class="card-body">
                                    <div class="icon-shape icon-lg rounded-circle bg-light  mb-3  card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-code-slash" viewBox="0 0 16 16">
                                        <path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"></path>
                                      </svg></div>
                                    <div class="d-flex align-items-center justify-content-between">
                                      <div>
                                        <!-- heading -->

                                        <h4 class="mb-0">Developer</h4>
                                        <!-- text -->

                                        <p class="mb-0 ">800 Jobs</p>
                                      </div>
                                      <a href="#" class="text-inherit">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                                          <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
                                        </svg>
                                      </a>
                                    </div>
                                  </div>

                                </div>

                              </div>
                              <div class="col-xl-3 col-lg-6 col-md-6 col-12">
                                <!-- card -->

                                <div class="card  border-top border-muted border-4  card-hover-with-icon">
                                  <!-- card body -->

                                  <div class="card-body">
                                    <!-- icon -->

                                    <div class="icon-shape icon-lg rounded-circle bg-light  mb-3  card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-people" viewBox="0 0 16 16">
                                        <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"></path>
                                      </svg></div>
                                    <div class="d-flex align-items-center justify-content-between">
                                      <div>
                                        <!-- heading -->

                                        <h4 class="mb-0">Product Manager</h4>
                                        <!-- text -->

                                        <p class="mb-0 ">1.2K Jobs</p>
                                      </div>
                                      <!-- icon -->

                                      <a href="#" class="text-inherit">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                                          <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
                                        </svg>
                                      </a>
                                    </div>
                                  </div>

                                </div>

                              </div>
                              <div class="col-xl-3 col-lg-6 col-md-6 col-12">
                                <!-- card -->

                                <div class="card  border-top border-muted border-4  card-hover-with-icon">
                                  <!-- card body -->

                                  <div class="card-body">
                                    <div class="icon-shape icon-lg rounded-circle bg-light  mb-3  card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
                                      </svg></div>
                                    <div class="d-flex align-items-center justify-content-between">
                                      <div>
                                        <!-- heading -->

                                        <h4 class="mb-0">SEO</h4>
                                        <!-- text -->

                                        <p class="mb-0 ">1200 Jobs</p>
                                      </div>
                                      <!-- icon -->

                                      <a href="#" class="text-inherit">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                                          <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
                                        </svg>
                                      </a>
                                    </div>
                                  </div>

                                </div>

                              </div>
                              <div class="col-xl-3 col-lg-6 col-md-6 col-12">
                                <!-- card -->

                                <div class="card  border-top border-muted border-4  card-hover-with-icon">
                                  <!-- card body -->

                                  <div class="card-body">
                                    <!-- icon -->

                                    <div class="icon-shape icon-lg rounded-circle bg-light  mb-3  card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bar-chart" viewBox="0 0 16 16">
                                        <path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"></path>
                                      </svg></div>
                                    <div class="d-flex align-items-center justify-content-between">
                                      <div>
                                        <!-- heading -->

                                        <h4 class="mb-0">Data Analytics</h4>
                                        <p class="mb-0 ">200 Jobs</p>
                                      </div>
                                      <!-- icon -->

                                      <a href="#" class="text-inherit">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                                          <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
                                        </svg>
                                      </a>
                                    </div>
                                  </div>

                                </div>

                              </div>
                              <div class="col-xl-3 col-lg-6 col-md-6 col-12">
                                <!-- card -->

                                <div class="card  border-top border-muted border-4  card-hover-with-icon ">
                                  <!-- card body -->

                                  <div class="card-body">
                                    <div class="icon-shape icon-lg rounded-circle bg-light  mb-3  card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-phone" viewBox="0 0 16 16">
                                        <path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"></path>
                                        <path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
                                      </svg></div>
                                    <div class="d-flex align-items-center justify-content-between">
                                      <div>
                                        <!-- heading -->

                                        <h4 class="mb-0">Mobile Developer
                                        </h4>
                                        <!-- text -->

                                        <p class="mb-0 ">120 Jobs</p>
                                      </div>
                                      <a href="#" class="text-inherit">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                                          <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
                                        </svg>
                                      </a>
                                    </div>
                                  </div>

                                </div>

                              </div>
                              <div class="col-xl-3 col-lg-6 col-md-6 col-12">
                                <!-- card -->

                                <div class="card  border-top border-muted border-4  card-hover-with-icon">
                                  <!-- card body -->

                                  <div class="card-body">
                                    <!-- icon -->

                                    <div class="icon-shape icon-lg rounded-circle bg-light  mb-3 card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bank" viewBox="0 0 16 16">
                                        <path d="M8 .95 14.61 4h.89a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H15v7a.5.5 0 0 1 .485.379l.5 2A.5.5 0 0 1 15.5 17H.5a.5.5 0 0 1-.485-.621l.5-2A.5.5 0 0 1 1 14V7H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 4h.89L8 .95zM3.776 4h8.447L8 2.05 3.776 4zM2 7v7h1V7H2zm2 0v7h2.5V7H4zm3.5 0v7h1V7h-1zm2 0v7H12V7H9.5zM13 7v7h1V7h-1zm2-1V5H1v1h14zm-.39 9H1.39l-.25 1h13.72l-.25-1z"></path>
                                      </svg></div>
                                    <div class="d-flex align-items-center justify-content-between">
                                      <div>
                                        <!-- heading -->

                                        <h4 class="mb-0">Finance
                                        </h4>
                                        <!-- text -->

                                        <p class="mb-0 ">5k Jobs</p>
                                      </div>
                                      <div>
                                        <!-- icon -->

                                        <a href="#" class="text-inherit">
                                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                                            <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
                                          </svg>
                                        </a>
                                      </div>
                                    </div>
                                  </div>

                                </div>

                              </div>
                              <!-- button -->

                              <div class="col-12 mt-8 text-center">
                                <a href="#" class="btn btn-outline-primary">View All Category</a>
                              </div>

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

                      </div>
                    </div>

Card Thumbnail V2

Intermediate

How to easily create a website with JavaScript

By: Claire Evans
4.5 (9,300)
Beginner

CSS: ultimate CSS course from beginner to advanced

By: Carolyn Welborn
4.5 (8,890)
Intermediate

The Gatsby Course: build web application

By: Floyd Amall
4.5 (8,890)
<div class="py-8">
<div class="container">
  <div class="row row-cols-1 row-cols-md-3 g-4">

    <div class="col">
      <!-- Card -->
      <div class="card card-hover">
        <a href="../course-single.html"><img
            src="../assets/images/course/course-javascript.jpg" alt=""
            class=" card-img-top"></a>
        <!-- Card Body -->
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <span class="badge bg-info-soft">Intermediate</span>
            <a href="#" class=" fs-5"><i class="fe fe-heart align-middle"></i></a>
          </div>
          <h4 class="mb-2 text-truncate-line-2 "><a href="../course-single.html"
              class="text-inherit">How to
              easily create a website with JavaScript </a></h4>

          <small>By: Claire Evans</small>
          <div class="mt-3 d-flex align-baseline lh-1">
            <span class="fs-6">

              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                <path
                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                <path
                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                <path
                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                <path
                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                <path
                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
              </svg>

            </span>
            <span class="text-warning mx-1">4.5</span>
            <span class="fs-6 ">(9,300)</span>
          </div>
        </div>
        <!-- Card Footer -->
        <div class="card-footer">
          <div class="row align-items-center g-0">
            <div class="col">
              <h5 class="mb-0">$39.00</h5>
            </div>

            <div class="col-auto">
              <a href="#" class="text-inherit">
                <i class="fe fe-shopping-cart text-primary align-middle me-2"></i>Get Enrolled
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col">
      <!-- Card -->
      <div class="card card-hover">
        <a href="../course-single.html"><img
            src="../assets/images/course/course-css.jpg" alt=""
            class="card-img-top "></a>
        <!-- Card Body -->
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <span class="badge bg-danger-soft">Beginner</span>
            <a href="#" class=" fs-5"><i class="fe fe-heart align-middle"></i></a>
          </div>
          <h4 class="mb-2 text-truncate-line-2 "><a href="../course-single.html"
              class="text-inherit">CSS:
              ultimate CSS course from beginner to advanced</a></h4>

          <small>By: Carolyn Welborn</small>
          <div class="mt-3 d-flex align-baseline lh-1">
            <span class="fs-6">

              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                <path
                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                <path
                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                <path
                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                <path
                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                <path
                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
              </svg>

            </span>
            <span class="text-warning mx-1">4.5</span>
            <span class="fs-6 ">(8,890)</span>
          </div>
        </div>
        <!-- Card Footer -->
        <div class="card-footer">
          <div class="row align-items-center g-0">
            <div class="col">
              <h5 class="mb-0">$30.00</h5>
            </div>

            <div class="col-auto">
              <a href="#" class="text-inherit">
                <i class="fe fe-shopping-cart text-primary align-middle me-2"></i>Get Enrolled
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col">
      <!-- Card -->
      <div class="card card-hover">
        <a href="../course-single.html"><img
            src="../assets/images/course/course-gatsby.jpg" alt=""
            class="card-img-top "></a>
        <!-- Card Body -->
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <span class="badge bg-info-soft">Intermediate</span>
            <a href="#" class=" fs-5"><i class="fe fe-heart align-middle"></i></a>
          </div>
          <h4 class="mb-2 text-truncate-line-2 "><a href="../course-single.html"
              class="text-inherit">The
              Gatsby
              Course: build web application</a></h4>

          <small>By: Floyd Amall</small>
          <div class="mt-3 d-flex align-baseline lh-1">
            <span class="fs-6">

              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                <path
                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                <path
                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                <path
                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                <path
                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
                <path
                  d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
              </svg>

            </span>
            <span class="text-warning mx-1">4.5</span>
            <span class="fs-6 ">(8,890)</span>
          </div>
        </div>
        <!-- Card Footer -->
        <div class="card-footer">
          <div class="row align-items-center g-0">
            <div class="col">
              <h5 class="mb-0">$34.00</h5>
            </div>

            <div class="col-auto">
              <a href="#" class="text-inherit">
                <i class="fe fe-shopping-cart text-primary align-middle me-2"></i>Get Enrolled
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

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

Card 2 Column

Course Description

What will you learn?

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

icon

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
icon

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
icon

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
icon

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-semibold 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="icon"
                                class="bg-primary icon-shape icon-xxl rounded-circle">
                        </div>
                        <!-- Content -->
                        <div class="ms-md-4">
                            <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-semibold 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="icon"
                                class="bg-primary icon-shape icon-xxl rounded-circle">
                        </div>
                        <div class="ms-md-4">
                            <h2 class="fw-bold mb-1">JavaScript Beginning</h2>
                            <p class="text-uppercase fs-6 fw-semibold 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="icon"
                                class="bg-primary icon-shape icon-xxl rounded-circle">
                        </div>
                        <div class="ms-md-4">
                            <h2 class="fw-bold mb-1">Variables and Constants</h2>
                            <p class="text-uppercase fs-6 fw-semibold 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="icon"
                                class="bg-primary icon-shape icon-xxl rounded-circle">
                        </div>
                        <div class="ms-md-4">
                            <h2 class="fw-bold mb-1">Types and Operators</h2>
                            <p class="text-uppercase fs-6 fw-semibold 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 with Icon

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"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"
            fill="currentColor" class="bi bi-mortarboard text-primary" viewBox="0 0 16 16">
            <path
              d="M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917l-7.5-3.5ZM8 8.46 1.758 5.965 8 3.052l6.242 2.913L8 8.46Z" />
            <path
              d="M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466 4.176 9.032Zm-.068 1.873.22-.748 3.496 1.311a.5.5 0 0 0 .352 0l3.496-1.311.22.748L8 12.46l-3.892-1.556Z" />
          </svg></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">
          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
            class="bi bi-people-fill text-primary" viewBox="0 0 16 16">
            <path
              d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7Zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216ZM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
          </svg>
        </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"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"
            fill="currentColor" class="bi bi-graph-up-arrow text-primary" viewBox="0 0 16 16">
            <path fill-rule="evenodd"
              d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z" />
          </svg></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>

List groups

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

<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  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 ">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 ">
            <div class="text-truncate">
              <span
                class="icon-shape bg-success text-white icon-sm rounded-circle me-2"><svg
                  xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                  fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
                  <path
                    d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z" />
                </svg></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 ">
            <div class="text-truncate">
              <span
                class="icon-shape bg-light text-primary icon-sm rounded-circle me-2"><svg
                  xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                  fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
                  <path
                    d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z" />
                </svg></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 ">
            <div class="text-truncate">
              <span
                class="icon-shape bg-light text-primary icon-sm rounded-circle me-2"><svg
                  xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                  fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
                  <path
                    d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z" />
                </svg></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 ">
            <div class="text-truncate">
              <span class="icon-shape bg-light  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  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 ">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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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  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 ">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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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  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 ">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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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>

Profile

Jenny Wilson

Front-end Developer, Designer

4.5 Instructor 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.

View Details
<div class="col-lg-6 col-md-6 col-12">
<!-- Card -->
<div class="card">
  <!-- 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="Verifed">
          <img src="../assets/images/svg/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 d-flex align-items-center">
          <span class=" text-warning">4.5</span><span class="mx-1">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
              fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
              <path
                d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
            </svg>
          </span>Instructor Rating
        </p>
        <p class="fs-6 "><span class="me-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-secondary btn-sm">
          View Details
        </a>
      </div>
    </div>
  </div>
</div>
</div>

Card

Bootstrap

12 Courses 34 Hours

<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.svg" 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>

Card Course Horizontal

Bootstrap 5 Beginner Tutorial

  • 2h 46m
  • Advance
  • 4.5 (7,900)
Ted Hawkins
<!-- 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>
  <!-- List inline -->
  <ul class="mb-5 list-inline">
    <li class="list-inline-item"><span class="">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
        class="bi bi-clock align-baseline" viewBox="0 0 16 16">
        <path
          d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" />
        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z" />
      </svg>
    </span><span>2h
      46m</span>
    </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 class="align-top lh-1">
        <span class="fs-6 ">

          <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor"
            class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
            <path
              d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor"
            class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
            <path
              d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor"
            class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
            <path
              d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor"
            class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
            <path
              d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor"
            class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
            <path
              d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
          </svg>

        </span>
      </span>

      <span class="text-warning">4.5</span>
      <span class="fs-6 ">(7,900)</span>
    </li>
  </ul>
  <!-- Row -->
  <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=" bookmark">
        <i class="fe fe-bookmark fs-4  "></i>
      </a>
    </div>
  </div>
  <div>
  </div>
</div>

Card Course Thumbnail

course

An Ultimate Guide for Beginners Bootstrap 5

  • 3h 56m
  • Beginner
4.5 (9,300)
 <!-- Card -->
<div class="card  mb-4 card-hover">
  <a href="#"><img src="../assets/images/course/course-bootstrap.jpg" alt="course"
      class="card-img-top"></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>
    <!-- List inline -->
    <ul class="mb-3 list-inline">
      <li class="list-inline-item"><span class="">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
            class="bi bi-clock align-baseline" viewBox="0 0 16 16">
            <path
              d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" />
            <path
              d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z" />
          </svg>
        </span><span>3h
          56m</span>
      </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 class="d-flex align-baseline lh-1">
      <span class="fs-6">

        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
          class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
          <path
            d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
          </path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
          class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
          <path
            d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
          </path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
          class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
          <path
            d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
          </path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
          class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
          <path
            d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
          </path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
          class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
          <path
            d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
          </path>
        </svg>

      </span>
      <span class="text-warning mx-1">4.5</span>
      <span class="fs-6 ">(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="avatar">
      </div>
      <div class="col ms-2">
        <span>Morris Mccoy</span>
      </div>
      <div class="col-auto">
        <a href="#" class=" bookmark">
          <i class="fe fe-bookmark fs-4  "></i>
        </a>
      </div>
    </div>
  </div>
</div>

Card Thumbnail

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=" card-img-top"
      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>

Horizontal Card with Image

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>