Tutorial Bootstrap 4 #7 : Membuat List


membuat list dengan bootstrap 4

Membuat list dengan bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 di malasngoding.com. pada tutorial ini kita akan belajar tentang cara membuat list di bootstrap 4.

Pastikan teman-teman sudah membaca tutorial bootstrap 4  bagian sebelumnya. yaitu tentang pengenalan dan pengertian bootstrap 4 dan cara menggunakan bootstrap 4.

Membuat list dengan bootstrap 4

Di tutorial bootstrap 4 bagian ke tujuh ini kita akan belajar tentang bagaimana cara mendesain tampilan list jika menggunakan bootstrap 4.

BACA JUGA :

Ada 2 jenis class yang disediakan oleh bootstrap untuk mengatur tampilan list. seperti yang sudah teman-teman pelajari juga sebelumnya, untuk membuat list kita bisa menggunakan tag <ul> .. </ul>. dan membuat tag <li> .. </li> di dalamnya sebagai listnya.

Contoh.

Syntax di atas adalah contoh cara membuat list pada HTML.

Di bootstrap 4 ada 2 jenis list yang bisa kita buat, yaitu :

  • Unstyled
    list yang tidak memiliki titik-titik di sampingnya
  • List Inline
    list yang berbentuk horizontal, atau ke samping

Dan berikut adalah contoh list yang sudah menggunakan class-class dari bootstrap 4.

Pada contoh di atas kita membuat 3 buah list. yaitu ada Daftar Makanan yang menggunakan list biasa, Daftar Minuman yang menggunakan class list-unstyled, dan yang ketiga ada Daftar Nama Barang yang menggunakan class list-inline.

Nah, di bootstrap 4 ada class yang sudah disediakan untuk menghilangkan titik-titik yang ada pada list yang kita buat. atau disebut dengan unstyled pada bootstrap. untuk menggunakannya kita bisa menggunakan class list-unstyled pada tag <ul>.

Untuk contohnya perhatikan pada list kedua (Daftar Minuman).

Kita juga bisa membuat list yang berbentuk horizontal, atau urutan list nya ke samping. tidak ke bawah seperti biasanya.

untuk membuat inline list kita bisa menggunakan class list-inline, dan class list-inline-item pada masing-masing urutannya ( <li> .. </li> ). contohnya seperti pada list ketiga (Daftar Nama Barang).

Kita lihat hasilnya dengan menjalankannya di browser.

membuat list dengan bootstrap 4

membuat list dengan bootstrap 4

Dan gambar di atas adalah hasil dari contoh unstyled list dan inline list dari bootstrap 4.

Oke sekian tutorial membuat list dengan bootstrap 4. semoga dapat bermanfaat.

DEMO :

See the Pen Tutorial Membuat List Dengan Bootstrap 4 by Malas Ngoding (@malasngoding) on CodePen.0



Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

TUTORIAL MENARIK LAINNYA

jumbotron bootstrap
dropdown bootstrap 4
Diskusi
Tidak Ada Komentar