Penggunaan Fixed Bottom Bootstrap pada Navbar
Penggunaan Fixed Bottom Bootstrap pada Navbar - Banyak nya komponen bootstrap yang bisa kita manfaatkan untuk kebutuhan dalam mendesain membuat framework bootstrap menjadi salah satu framework favorit dan banyak digunakan saat ini.
Salah satu contoh berikut yang akan saya bagikan kepada kalian komponen bootstrap yang akan saya gunakan yakni navbar dan akan dibuat menjadi fixed bottom dengan sangat mudah.
Didalam bootstrap kita akan sangat mudah dalam memposisikan suatu komponen atau elemen, misalnya komponen navbar yang kita bahas kali ini, biasanya navbar diposisikan dipaling atas pada suatu website, namun kali ini akan saya posisikan dibawah dan tetap fix.
silahkan kalian bisa ketikan komponen untuk membuat nabvarnya seperti berikut.
<div class="container">
<a class="navbar-brand text-center" href="#">NAVBAR FIXED BOTTOM</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav mr-auto">
<li class="nav-item active mr-4">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item mr-4">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item mr-4">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item mr-4">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item mr-4">
<a class="nav-link" href="#">Maps</a>
</li>
<li class="nav-item mr-4">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-warning my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Untuk memposisikan navbar dibagian paling bawah dan tetap fix kalian hanya perlu menambahkan class fixed-bottom setelah nama class navbar. Dengan begitu navbar yang posisinya default atau dibagian paling atas, akan berpindah kebagian bawah.
Nah, mudah - mudahan dengan penjelasan singkat bootstrap fixed bottom kalian bisa menambah wawasan lagi tentang bootstrap. Semoga pembahasan ini bermanfaat selamat mencoba.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
