Card Bootstrap 4 – Component Bootstrap 4

Card bootstrap 4 merupakan component bootstrap 4 yang terdiri atas berbagai macam bentuk kotak seperti container dengan ukuran yang bervariasi dan lebih fleksibel.

Card  Bootstrap 4
Cards Bootstrap 4

Card ini banyak digunakan untuk bagian content sebuah halaman web.

Sebuah halaman content terdiri atas judul dan isi. Cara menampilkan judul dan isi dari halaman web dapat dalam bentuk yang berbeda – beda. Dengan menggunakan card bootstrap 4 kebutuhan untuk menampilkan isi dalam bentuk yang berbeda – beda ini dapat diterapkan, mengingat begitu banyak style dan opsi yang disediakan oleh bootstrap.

Contoh Card Bootstrap 4

1. Card Bentuk dasar dengan ukuran 18 rem

contoh card

untuk bisa menampilkan card di atas secara offline silahkan terlebih dahulu mendownload bootstrap 4 dan baca cara menggunakannya.

cards .php

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="http://localhost/indonetsource/bootstrap/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="card" style="width: 18rem;">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="card-link">Card link</a>
                <a href="#" class="card-link">Another link</a>
            </div>
        </div>        
    </div>

</body>
<script src="http://localhost/indonetsource/bootstrap/js/jquery-3.5.1.min.js"></script>
<script src="http://localhost/indonetsource/bootstrap/js/popper.min.js"></script>
<script src="http://localhost/indonetsource/bootstrap/js/bootstrap.min.js"></script>

</html>

2. Contoh card bootstrap 4 dengan card-header dan card-body.

card header dan card-body
card header dan card-body

Card dengan header dan footer ini sering di jumpai di halaman form.

header biasanya berisi nama form sedangkan bagian body berisi form.

untuk membuat card seperti di atas dapat menggunakan script di bawah ini

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="http://localhost/indonetsource/bootstrap/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="card-header">
                Contoh Card Header 
            </div>
            <div class="card-body">
                Ini Adalah Contoh Card Body
            </div>
        </div>
    </div>

</body>
<script src="http://localhost/indonetsource/bootstrap/js/jquery-3.5.1.min.js"></script>
<script src="http://localhost/indonetsource/bootstrap/js/popper.min.js"></script>
<script src="http://localhost/indonetsource/bootstrap/js/bootstrap.min.js"></script>

</html>

3. Contoh Card Untuk halaman dengan Image dan deskripsi singkat kontent.

card dengan gambar
Card dengan gambar dan deskripsi singkat

Card seperti gambar di atas sering kita temui di halaman website.Selain sering terdapat pada halaman e-commerce bentuk card di atas juga sering muncul di halaman portal berita dan halaman web tutorial.

Bentuk card di atas dapat di buat menggunakan bootstrap 4 dengan menggunakan script sebagai berikut

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="http://localhost/indonetsource/bootstrap/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="card m-4" style="width: 18rem;">
                <img src="http://localhost/indonetsource/tutorial_bootstrap/images/image1.png" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
            </div>

            <div class="card m-4" style="width: 18rem;">
                <img src="http://localhost/indonetsource/tutorial_bootstrap/images/image1.png" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
            </div>

            <div class="card m-4" style="width: 18rem;">
                <img src="http://localhost/indonetsource/tutorial_bootstrap/images/image1.png" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
            </div>

            <div class="card m-4" style="width: 18rem;">
                <img src="http://localhost/indonetsource/tutorial_bootstrap/images/image1.png" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
            </div>

            <div class="card m-4" style="width: 18rem;">
                <img src="http://localhost/indonetsource/tutorial_bootstrap/images/image1.png" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
            </div>

            <div class="card m-4" style="width: 18rem;">
                <img src="http://localhost/indonetsource/tutorial_bootstrap/images/image1.png" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
            </div>
        </div>
    </div>

</body>
<script src="http://localhost/indonetsource/bootstrap/js/jquery-3.5.1.min.js"></script>
<script src="http://localhost/indonetsource/bootstrap/js/popper.min.js"></script>
<script src="http://localhost/indonetsource/bootstrap/js/bootstrap.min.js"></script>

</html>

card di atas menggunakan class card m-4 maksudnya jarak antar card memiliki margin 4.

Contoh card dapat dilihat secara lebih lengkap di laman documentasi bootstrap berikut:

https://getbootstrap.com/docs/4.4/components/card/

5. Contoh card berbentuk list group

contoh card list
card list

Card list seperti gambar di atas sering kita jumpai di sidebar kiri halaman web.

Untuk membuat card list sederhana di atas dapat menggunakan script berikut:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="http://localhost/indonetsource/bootstrap/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="card" style="width: 18rem;">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">Lokal</li>
                <li class="list-group-item">Nasional</li>
                <li class="list-group-item">Internasional</li>
            </ul>
        </div>
    </div>

</body>
<script src="http://localhost/indonetsource/bootstrap/js/jquery-3.5.1.min.js"></script>
<script src="http://localhost/indonetsource/bootstrap/js/popper.min.js"></script>
<script src="http://localhost/indonetsource/bootstrap/js/bootstrap.min.js"></script>

</html>

Penggunaan card list di atas dapat di sesuaikan dengan kebutuhan. jika ingin membuat card list menggunakan header maka dapt ditambahkan card header seperti contoh sebelumnya.

6. Card dengan bagian tombol seperti e – commerce

card e-commerce

Seperti yang kita lihat pada gambar card di atas card tersebut terdiri atas card body dan card footer. Sebuah halaman e commerce biasanya menggunakan bentuk card seperti gambar di atas untuk menampilkan produk.

script yang di gunakan untuk menampilkan card produk e-commerce sebagai berikut:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="http://localhost/indonetsource/bootstrap/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="card m-4 " style="width: 18rem;">
                <img src="http://localhost/indonetsource/tutorial_bootstrap/images/image1.png" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
                <div class="card-footer ">
                    <a href="#" class="btn btn-primary">Beli</a>
                </div>
            </div>
            <div class="card m-4 " style="width: 18rem;">
                <img src="http://localhost/indonetsource/tutorial_bootstrap/images/image1.png" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
                <div class="card-footer ">
                    <a href="#" class="btn btn-primary">Beli</a>
                </div>
            </div>
            <div class="card m-4 " style="width: 18rem;">
                <img src="http://localhost/indonetsource/tutorial_bootstrap/images/image1.png" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
                <div class="card-footer ">
                    <a href="#" class="btn btn-primary">Beli</a>
                </div>
            </div>

        </div>
    </div>
</body>
<script src="http://localhost/indonetsource/bootstrap/js/jquery-3.5.1.min.js"></script>
<script src="http://localhost/indonetsource/bootstrap/js/popper.min.js"></script>
<script src="http://localhost/indonetsource/bootstrap/js/bootstrap.min.js"></script>

</html>

Demikian tutorial mengenai card. Untuk tutorial lainnya mengenai tutorial bootstrap 4 silahkan kunjungi lama daftar tutorial menggunkan bootstrap 4 indonetsource.

Leave a comment