Membuat Layout Polling Checkbox Bootstrap 4

06/04/2020    Maykhel David    1674    Website

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

HTML CSS, Bootstrap