Pada artikel kali ini kita akan belajar bagaimana Cara Sederhana Membuat Efek Shadow Menggunakan Bootstrap. Jika sahabat sudah pernah belajar tentang HTML CSS pasti selanjutnya akan mengenal Framework Bootstrap. Jadi Framework Bootstrap sendiri sangat mudah dan simple dalam menggunakan. Sehingga saat kita membutuhkan komponent untuk layout sudah tersedia pada Bootstrap. Baiklah dalam kasus kali ini saya membahas tentang membuat efek shadow menggunakan Bootstrap.

Langsung saja sahabat membuka website Bootstrap lalu pilih button get start kemudia copy saja code struktur htmlnya.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  </body>
</html>

Jika sudah tambahkan code dibawah ini pada bagian <body>

<div class="container my-5">
      <div class="col-md-6 offset-3">
        <h5 class="bg-info p-3 text-white font-weight-bold">Membuat Efek Shadow Menggunakan Bootstrap</h5>
        <div class="shadow-none my-2 py-3">Tanpa Efek Shadow</div>
        <div class="shadow my-5 py-3">Efek Shadow</div>
        <div class="shadow-sm my-4 py-3">Efek Shadow Small</div>
        <div class="shadow-lg my-4 py-3">Efek Shadow Large</div>
      </div>

Jadi pada Framework Bootstrap kita hanya menambahkan class=”shadow” untuk memberikan efek shadow. Disini saya menambahkan class yang dipakai seperti :

  • class=”shadow-none” tampilan tanpa shadow
  • class=”shadow” tampilan dengan shadow
  • class=”shadow-sm” tampilan dengan efek shadow ukuran small
  • class=”shadow-lg” tampilan dengan efek shadow ukuran large

Sahabat langsung saja simpan code diatas kemudia buka pada browser maka akan seperti berikut tampilannya.

Membuat Efek Shadow Menggunakan Bootstrap

Demikian pembahasan pada kesempatan kali ini, semoga bermanfaat dan sampai jumpa dengan pembhasan lainnya.

terima kasih.

WhatsApp chat