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.

    <nav class="navbar fixed-bottom navbar-expand-sm navbar-dark setting-menu">
      <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>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <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.

30 April 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat