membuat Background Navbar Fullwidth pada Bootstrap 4

Membuat Background Navbar Fullwidth Bootstrap – Dengan adanya peningkatan fitur pada bootstrap 4, banyak sekali perubahan yang terjadi pada framework responsive paling popular ini. Salah satunya adalah pada navbar, dari beberapa kasus sebenarnya tidak sulit untuk melakukan kustomisasi pada navbar di bootstrap versi terbaru ini, namun ada beberapa mungkin dari teman – teman yang masih belajar bootstrap 3 namun ingin langsung memakai bootstrap 4, salah satu kasus yang ingin saya bahas adalah tentang bagaimana cara membuat navbar fullwidth di bootstrap 4.
Selain itu, saya juga akan memberikan trik untuk membuat navbar-right (item menu berada di sebelah kanan). Karena class navbar-right pada bootstrap 4 sudah dihapus.

Baiklah teman-teman pertama kita buat struktur html seperti berikut

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
</head>
<body>
    
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
</body>
</html>

Selanjutnya kita akan membuat struktur html untuk navbar dengan baris kode berikut

<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
    <div class="container">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link">Left Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link">Left Link 2</a>
    </li>
  </ul>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link">Right Link 1</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">            Dropdown on Right</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action with a lot of text inside of an item</a>
      </div>
    </li>
  </ul>
  </div>
</nav>

Yang terakhir, kita akan memberikan sedikit CSS untuk menyesuaikan  menu yang ada di sebelah kanan

.navbar-nav {
      flex-direction: row;
    }
    
    .nav-link {
      padding-right: .5rem !important;
      padding-left: .5rem !important;
    }
    
    .ml-auto .dropdown-menu {
      left: auto !important;
      right: 0px;
    }

 Baiklah teman -teman    jika sudah coba kalian lihat di browser, maka akan terlihat  backgroundnavbar menjadi full width. Demikian artikel kali ini yang membahas tentang cara Membuat Background Navbar Fullwidth Bootstrap, bagi kalian yang masih belajar bootstrap, artikel ini bisa dijadikan referensi untuk mempelajari bootstrap 4, Semoga bermanfaat

 

28 September 2018

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