List Inline Bootstrap

Jika menggunakan Bootstrap, kamu tidak perlu repot-repot lagi mengatur style agar daftar mengurut ke samping. Cukup berikan class list-inline maka secara otomatis akan tampil sejajar ke samping. Ini hanya mengganti posisi saja, biasanya ke bawah tapi sekarang menjadi satu...


Secara default, ketika membuat list (li) akan menyusun ke bawah, baik di HTML ataupun menggunakan framework Bootstrap. Perlu diberikan style tambahan jika ingin menyusunnya ke samping atau biasa disebut list inline.

Jika menggunakan Bootstrap, kamu tidak perlu repot-repot lagi mengatur style agar daftar mengurut ke samping. Cukup berikan class list-inline maka secara otomatis akan tampil sejajar ke samping. Ini hanya mengganti posisi saja, biasanya ke bawah tapi sekarang menjadi satu baris saja maka ia dipaksa menyusun ke samping.

Begini cara menggunakan class list-inline:

<h2>List Inline Bootstrap - Posciety</h2>
<ul class="list-inline">
  <li>li Pertama</li>
  <li>li Kedua</li>
  <li>li Ketiga</li>
  <li>li Keempat</li>
</ul>

Simpan dan lihat hasilnya !

gambar 1 - membuat list bootstrap sejajar baris kanan

Berikan class list-inline pada pembungkus (ul), secara otomatis li di dalamnya akan menyamping ke kanan. Ii seperti menu pada header website.

Selamat mencoba !


Jangan Lupa Share !!!

23
6 shares, 23 points

Apa Reaksimu ?

Bingung Bingung
3
Bingung
Kesal Kesal
1
Kesal
OMG OMG
3
OMG
Takut Takut
2
Takut
Keren Keren
10
Keren
Sedih Sedih
5
Sedih
Posciety Tech

Advanced Proficient

Official Channel Posciety.Com yang menyuguhkan informasi dan updates seputar dunia teknologi.

0 Komentar

Pilih Format
Artikel
Default, Membuat Artikel/Cerita
List
Listicle, Misalnya: 3 Hal yang Wajib Dilakukan Saat...
Kuis Kepribadian
Membuat kuis Tentang Kepribadian
Poll
Vote untuk Membuat Keputusan atau Mencari Saran
Meme
Membuat Meme dari Gambar Normal yang Kamu Miliki