Membuat Menu Fullwidth dengan Bootstrap 4

Cara mudah membuat menu fullwidth dengan bootstrap 4 – Pernahkah kalian membuat sebuah struktur menu full width? Bagaimana cara kalian membuatnya? Apakah dengan cara manual? Dengan memberikan margin atau width dengan sama rata agar terlihat full width, tentu saja bias, namun bagaimana jika jumlah menunya bertambah atau berkurang? Pastinya kalian akan repot mengatur ulang menu tersebut.

Tahukah kalian bahwa pada bootstrap 4 juga ada fitur untuk membuat menu menjadi full width atau mengisi satu baris menu secara full tanpa mengatur ulang css meskipun menu nya berkurang atau bertambah. Ingin tahu caranya? Sekarang kita coba dahulu membuat struktur dasar bootstrap seperti biasa.

Disini saya menggunakan CDN bootstrap yang tentunya harus online.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
  </body>
</html>

Jika sudah kalian copy struktur basic temlate diatas, kita akan coba membuat struktur menu full width dengan baris kode dibawah ini

<div class="nav-scroller py-1 mb-2">
        <nav class="nav d-flex justify-content-between">
          <a class="p-2 text-muted" href="#">Indonesia</a>
          <a class="p-2 text-muted" href="#">U.S.</a>
          <a class="p-2 text-muted" href="#">Technology</a>
          <a class="p-2 text-muted" href="#">Design</a>
          <a class="p-2 text-muted" href="#">Culture</a>
          <a class="p-2 text-muted" href="#">Business</a>
          <a class="p-2 text-muted" href="#">Politics</a>
          <a class="p-2 text-muted" href="#">Opinion</a>
          <a class="p-2 text-muted" href="#">Science</a>
          <a class="p-2 text-muted" href="#">Health</a>
          <a class="p-2 text-muted" href="#">Style</a>
          <a class="p-2 text-muted" href="#">Travel</a>
        </nav>
      </div>

Pada struktur diatas kita melihat 12 daftar menu, yang bila kita hapus beberapa menu ataupun menambahkannya, kita akan tetap melihat menu tersebut tetap tertata rapi tanpa mengatur ulang margin atau padding. Kekurangan dari menu seperti ini adalah tidak responsive. Jadi kalian bias menggunakan opsi 2 buah menu, untuk mobile device dan untuk desktop. Demikian tutorial kali ini yang membahas tentang cara membuat menu fullwidth. Semoga bermanfaat

 

14 Juli 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