Cara Membuat Kombinasi Slider dan Card Bootstrap 4

Cara Membuat Kombinasi Slider dan Card Bootstrap 4 - Membuat slider dengan bootstrap ? pernah ya.. membuat card dengan bootstrap, pernah juga kan ? tapi kalau membuat kombinasi slider dan card pernah ? jika belum, saya akan bagikan tutorial bagaimana Cara Membuat Kombinasi Slider dan Card Bootstrap 4.

Untuk membuat kombinasi Slider dan Card kalian harus menyiapkan file bootstrap 4, dan beberapa gambar untuk slider nya. Setelah itu barulah membuat layout untuk letak slidernya pada komponen card. Kalian bisa ketikan sintak bootstrap untuk membuat kombinasi slider dan card seperti berikut.

<div class="container mt-3">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-body rounded p-0">
          <!-- ROW CONTENT -->
          <div class="row">
            <div class="col-md-4">
              <!-- SLIDER -->
              <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
                <ol class="carousel-indicators">
                  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                  <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                  <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner rounded-left">
                  <div class="carousel-item active">
                    <img src="img-1.jpg" class="d-block w-100">
                  </div>
                  <div class="carousel-item">
                    <img src="img-2.jpg" class="d-block w-100">
                  </div>
                  <div class="carousel-item">
                    <img src="img-3.jpg" class="d-block w-100">
                  </div>
                </div>
              </div>
              <!-- END SLIDER -->
            </div>
            <div class="col-md-8">
              <h2 class="pt-6 px-2">DUMET School adalah tempat Kursus Website, Digital Marketing, dan Desain Grafis yang berlokasi di Jakarta dan Depok.</h2>
              <a href="https://www.dumetschool.com/" class="pl-2">- dumetschool.com</a>
            </div>
          </div>
          <!-- END ROW -->
        </div>
      </div>
    </div>
  </div>
</div>

Selanjutnya tambahkan sintak CSS untuk sedikit merubah style dari slider dan mengatur jarak pada teks didalam cardnya. silahkan kalian ketikan sintak CSS berikut ini.

  @import url('https://fonts.googleapis.com/css?family=Quicksand|Satisfy&display=swap');
  .carousel-indicators li{
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .card-body {background: #feeeb8}
  .pt-6 {padding-top: 4rem; font-family: 'Satisfy';}
  a {font-family: 'Quicksand'; color: #212529}
  a:hover {text-decoration: none; font-weight: 400;}

Setelah sintak CSS telah deketikan semua, silahkan simpan filenya kemudian kalian bisa melihat hasilnya dibrowser. Kombinasi slider dan card akan terlihat seperti gambar dibawah ini.

Cara Membuat Kombinasi Slider dan Card Bootstrap 4

Dengan memanfaatkan komponen slider dan card dari bootstrap dan sedikit styling CSS kita sudah bisa membuat desain dari bootstrap yang menarik yang bisa ditambahkan kedalam halaman website.

Baiklah cukup sekian tutorial bootstrap tentang bagaimana Cara Membuat Kombinasi Slider dan Card Bootstrap 4, semoga bermanfaat dan selamat mencoba.

28 Februari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat