List Inline Bootstrap

li Sejajar Satu Baris

0

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:

ads by posciety

<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 !

Artikel Lainnya
Komentar

Email kamu tidak akan dibagikan kepada siapapun

Website ini menggunakan cookie untuk pengalaman yang lebih baik Setuju & Tutup Selengkapnya