Oktober 20, 2024

Cara Membuat Profile Bootstrap yang Menarik dan Responsif

Bootstrap adalah salah satu framework yang paling populer untuk pengembangan web. Dikenal karena kemampuannya dalam menciptakan tampilan yang menarik dan responsif, Bootstrap juga dapat digunakan untuk membuat profil yang mengesankan. Dalam tutorial ini, kami akan membahas langkah-langkah untuk membuat profil Bootstrap yang menarik dan responsif.

Dalam tutorial ini, kami akan membahas langkah-langkah untuk membuat layout profil web yang menarik, menambahkan komponen responsif, dan mengkustomisasi tampilan profil web sederhana.

Langkah Membuat Profile Web Sederhana Dengan Bootstrap

1. Install Bootstrap

Install terlebih dahulu bootstrap pada projek kalian, bisa lihat disini untuk tutorial install bootstrapnya. Diprojek ini kami menggunakan bootstrap dengan mendownload compiled codenya.

<link href="css/stylesheet.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>

2. Buat Folder Img

Buat folder Img untuk menyimpan foto yang akan digunakan pada program kali ini. Jika kalian menggunakan link url langsung untuk menggunakan fotonya, maka tidak perlu membuat folder ini.

3. Buat File index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Simple Profile</title>
    <link href="style/style.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <div class="container-fluid p-3 border-2 shadow bg-body-secondary">
        <div class="container">
            <div class="row">
                <div class="col-sm">
                    <div class="row row-cols-1 text-center">
                        <div class="col mb-3">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQCr-WaFbRUOvjBEKNcRxQ1mhq_qBU9FcstmUNbHwICp1VsWSKDbqPHt-_m6KjlJzo6nMM6mkEcHigvrOR02ruZ9Bk61Pm3D7TFkQBgiYz3piPr8AFq02zWx6JYtD2A516q47CFPypykFDmGG6WrZnrdBQpxAQoIAzlsnFNIg2yP_JrjOvTa6mkZfQPVK/s512/profile-user.png" class="rounded-circle border border-3 shadow" width="300" height="300">
                        </div>
                        <div class="col">
                            <p>────────────────────</p>
                        </div>
                        <div class="col ">
                            <a class="p-3" href="https://github.com/teranixbq"><img
                                    class="rounded-circle border borderlight border-3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQCr-WaFbRUOvjBEKNcRxQ1mhq_qBU9FcstmUNbHwICp1VsWSKDbqPHt-_m6KjlJzo6nMM6mkEcHigvrOR02ruZ9Bk61Pm3D7TFkQBgiYz3piPr8AFq02zWx6JYtD2A516q47CFPypykFDmGG6WrZnrdBQpxAQoIAzlsnFNIg2yP_JrjOvTa6mkZfQPVK/s512/profile-user.png"
                                    alt="github" style="width:60px;height:60px;"></a>
                            <a class="p-3" href="#"><img
                                    class="rounded-circle border borderlight border-3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQCr-WaFbRUOvjBEKNcRxQ1mhq_qBU9FcstmUNbHwICp1VsWSKDbqPHt-_m6KjlJzo6nMM6mkEcHigvrOR02ruZ9Bk61Pm3D7TFkQBgiYz3piPr8AFq02zWx6JYtD2A516q47CFPypykFDmGG6WrZnrdBQpxAQoIAzlsnFNIg2yP_JrjOvTa6mkZfQPVK/s512/profile-user.png"
                                    alt="instagram" style="width:60px;height:60px;"></a>
                            <a class="p-3" href="https://kodeteks.com"><img
                                    class="rounded-circle border borderlight border-3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQCr-WaFbRUOvjBEKNcRxQ1mhq_qBU9FcstmUNbHwICp1VsWSKDbqPHt-_m6KjlJzo6nMM6mkEcHigvrOR02ruZ9Bk61Pm3D7TFkQBgiYz3piPr8AFq02zWx6JYtD2A516q47CFPypykFDmGG6WrZnrdBQpxAQoIAzlsnFNIg2yP_JrjOvTa6mkZfQPVK/s512/profile-user.png"
                                    alt="website" style="width:60px;height:60px;"></a>
                            <a class="p-3" href="https://kodeteks.com"><img
                                    class="rounded-circle border borderlight border-3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQCr-WaFbRUOvjBEKNcRxQ1mhq_qBU9FcstmUNbHwICp1VsWSKDbqPHt-_m6KjlJzo6nMM6mkEcHigvrOR02ruZ9Bk61Pm3D7TFkQBgiYz3piPr8AFq02zWx6JYtD2A516q47CFPypykFDmGG6WrZnrdBQpxAQoIAzlsnFNIg2yP_JrjOvTa6mkZfQPVK/s512/profile-user.png"
                                    alt="linkedin" style="width:60px;height:60px;"></a>
<a class="p-3" href="https://github.com/teranixbq"><img
                                    class="rounded-circle border borderlight border-3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQCr-WaFbRUOvjBEKNcRxQ1mhq_qBU9FcstmUNbHwICp1VsWSKDbqPHt-_m6KjlJzo6nMM6mkEcHigvrOR02ruZ9Bk61Pm3D7TFkQBgiYz3piPr8AFq02zWx6JYtD2A516q47CFPypykFDmGG6WrZnrdBQpxAQoIAzlsnFNIg2yP_JrjOvTa6mkZfQPVK/s512/profile-user.png"
                                    alt="github" style="width:60px;height:60px;"></a>
                        </div>
                    </div>
                </div>
                <div class="col-sm py-3 my-2 rounded border-2 shadow bg-body-tertiary">
                    <div class="row row-cols-1">
                        <div class="col">
                            <figure class="text-center">
                                <blockquote class="blockquote fs-4">
                                    <p>My Name</p>
                                </blockquote>
                                <figcaption class="blockquote-footer  fw-lighter fs-6">
                                    I am a Blogger and Junior Programmer
                                </figcaption>
                            </figure>
                            <ul class="list-group list-group-flush  fs-6 m-1 ">
                                <li class="list-group-item bg-body-tertiary">
                                    <pre>Age     : <a class="text-dark-emphasis text-decoration-none">20</a></pre>
                                </li>
                                <li class="list-group-item bg-body-tertiary">
                                    <pre>Date    : <a class="text-dark-emphasis text-decoration-none">DD-MM-YYYY</a></pre>
                                </li>
                                <li class="list-group-item bg-body-tertiary">
                                    <pre>Address : <a class="text-dark-emphasis text-decoration-none">City</a></pre>
                                </li>
                                <li class="list-group-item bg-body-tertiary">
                                    <pre>Phone   : <a class="text-dark-emphasis text-decoration-none">0822-9999-0000-2222</a></pre>
                                </li>
                                <li class="list-group-item bg-body-tertiary">
                                    <pre>Email   : <a class="text-dark-emphasis text-decoration-none">[email protected]</a></pre>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container mt-5">
        <div id="card-list" class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
            <!-- Cards will be added here dynamically -->
        </div>
    </div>

    <script>
        const cardListContainer = document.getElementById('card-list');

        function addCard(imageSrc, title, text, linkto) {
            const cardHtml = `
            <div class="col">
                <div class="card h-100 shadow-sm border border-secondary">
                    <img src="${imageSrc}" class="card-img-top" alt="..." style="height:200px;">
                    <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${text}</p>
                        <a href="${linkto}" class="btn btn-primary">Go to ${title}</a>
                    </div>
                </div>
            </div>
        `;
            cardListContainer.innerHTML += cardHtml;
        }

        addCard('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQCr-WaFbRUOvjBEKNcRxQ1mhq_qBU9FcstmUNbHwICp1VsWSKDbqPHt-_m6KjlJzo6nMM6mkEcHigvrOR02ruZ9Bk61Pm3D7TFkQBgiYz3piPr8AFq02zWx6JYtD2A516q47CFPypykFDmGG6WrZnrdBQpxAQoIAzlsnFNIg2yP_JrjOvTa6mkZfQPVK/s512/profile-user.png','Project 1', 'This is the description of project 1.', '#');
        addCard('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQCr-WaFbRUOvjBEKNcRxQ1mhq_qBU9FcstmUNbHwICp1VsWSKDbqPHt-_m6KjlJzo6nMM6mkEcHigvrOR02ruZ9Bk61Pm3D7TFkQBgiYz3piPr8AFq02zWx6JYtD2A516q47CFPypykFDmGG6WrZnrdBQpxAQoIAzlsnFNIg2yP_JrjOvTa6mkZfQPVK/s512/profile-user.png','Project 2', 'This is the description of project 2.', '#');
    </script>
</body>

</html>

Selesai, bagaimana sederhana bukan ? hanya butuh satu file sudah bisa membuat profile web sederhana. Kalian bisa lihat demonya disini .

Repository : https://github.com/teranixbq/Simple-Profile-Bootstrap