Penggunaan Fixed Bottom Bootstrap pada Navbar

30/04/2020    Risman Hakim    228     Website

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.

Web Design, Bootstrap

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More