Membuat Layout Polling Checkbox Bootstrap 4

Membuat Polling Layout Bootstrap 4 – Hallo semuanya, sebelum memulai artikel ini, apakah kalian pernah melihat layout polling pada website? Biasanya, layout polling ini berada pada saat website tersebut melakukan survey. Pada artikel kali ini saya akan membuat sebuah layout sederhana berbentuk polling dengan mengunakan bootstrap 4. Untuk lebih jelasnya simak saja artikel berikut

 

Struktur HTML

Pada kode HTML berikut saya menggunakan layout yang sudah disediakan oleh bootstrap, yaitu:
-    Card (digunakan sebagai pembungkus layout polling yang ada di dalamnya)
-    List Group (digunakan. Sebagai list untuk menampilkan seluruh item polling yang ada)

 

<div class="container">
    <div class="col-md-4"></div>

    <div class="col-md-4">
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-header"><span class="fa fa-line-chart"></span> Please Rate our service</h3>
            </div>
            <div class="card-block">
                <ul class="list-group">
                    <li class="list-group-item">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value=""> Excellent
                            </label>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value=""> Good
                            </label>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value=""> Satisfactory
                            </label>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value=""> Needs Improvement
                            </label>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value=""> Poor
                            </label>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="card-footer text-xs-center">
                <button type="button" class="btn btn-primary btn-block btn-sm">
                    Vote</button>
                <a href="#" class="small">View Result</a>
            </div>
        </div>
    </div>
</div>


Style CSS

Pada css kali ini kita juga berkenalan dengan css yang mungkin jarang kalian gunakan, yaitu selector :not, selector ini bertujuan memilih elemen yang dituju yang tidak memiliki class tertentu.

Contohnya .panel-body:not(.two-col)
Dimana kita memilih panel-body yang tidak memiliki class .two-col.

    .panel-body:not(.two-col) {
        padding: 0px;
    }

    .glyphicon {
        margin-right: 5px;
    }

    .glyphicon-new-window {
        margin-left: 5px;
    }

    .panel-body .radio, .panel-body .checkbox {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .panel-body .list-group {
        margin-bottom: 0;
    }

    .margin-bottom-none {
        margin-bottom: 0;
    }

    .panel-body .radio label, .panel-body .checkbox label {
        display: block;
    }

Baiklah teman-teman pada artikel ini kita belajar tentang pemanfaatan selector baru yang sangat berguna untuk kalian gunakan saat membuat project. Demkian artikel kali ini yang menjelaskan tentang bagaimana cara membuat polling layout dengan bootstrap 4. Semoga bermanfaat

 

6 April 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