Cara Membuat Menu Navbar Center pada Bootstrap 4

Cara Membuat Menu Navbar Center pada Bootstrap 4 - Didalam bootstrap terdapat komponen navbar untuk bisa kita gunakan sebagai menu dihalaman website, komponen menu ini bisa kita custome menjadi menu yang sedikit berbeda dari menu bootstrap biasanya, misalnya menu dengan posisi di sebelah kanan, kiri atau dibagian tengah (center). Nah, pada kesempatan ini saya akan bagikan tutorial bootstrap bagaimana Cara Membuat Menu Navbar Center pada Bootstrap 4. Bagi kalian yang ingin mencoba membuat menu center silahkan bisa ikuti langkah - langkahnya berikut ini.

Langkah pertama silahkan kalian persiapkan file boottsrapnya, seperti biasa kalian bisa gunakan file bootstrap secara offline ataupun secara online, pada kasus ini saya menggunakan file bootstrap secara online. Setelah itu kalian bisa membuat komponen menu navbar bootstrap seperti berikut.

<nav class="navbar navbar-expand-lg navbar-light bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav mx-auto">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
    </div>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control form-control-sm mr-sm-2 rounded-0" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-light btn-sm my-2 my-sm-0 rounded-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Dengan menambahkan kelas mx-auto setelah class navbar-nav, maka list menu sudah berpindah pada posisi center, cara ini adalah cara yang paling mudah karena kita hanya tinggal menggunakan class yang sudah disediakan oleh bootstrap. Atau kalian juga bisa menggunakan custome style sendiri pada file CSS.

Kalian juga bisa menambahkan sedikit style pada font dan toggle icon untuk mengubah warna teksnya seperti berikut.

<style>
    .navbar-light .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    .navbar-toggler {
        border: 1px solid white !important;
        border-radius: 0;
    }
    a.navbar-brand,
    .navbar-nav a {
        color: white !important;
    }
</style>

Jika sudah selesai kalian ketikan sintak diatas, langkah selanjutnya silahkan simpan filenya kemudian kalian bisa lihat hasil akhirnya pada browser masing - masing.

Baiklah, cukup sekian tutorial bootstrap 4 tentang bagaimana Cara Membuat Menu Navbar Center pada Bootstrap 4, semoga bermanfaat dan selamat mencoba.

28 Januari 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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat