Cara Membuat Menu Navbar Bootstrap 4 di Kanan

Cara Membuat Menu Navbar Bootstrap 4 di Kanan

HobbyTekno - Banyak pemula yang kebingungan ketika ingin membuat navbar tapi item-item linknya ingin ditaruh disebelah kanan, nah Pada post ini admin akan membagikan tipsnya.

Script ini berlaku untuk Bootstrap 4. Langsung saja berikut caranya.

Cara Membuat Menu Navbar Bootstrap 4 di Kanan

1. Pastikan anda sudah mengimport Bootstrap 4, jika belum silahkan salin Script Awal untuk memanggil Bootstrap 4 secara 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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 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.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Kalau hanya ingin Bootstrap nya saja silahkan salin script berikut:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

2. Copy Script berikut pada bagian <body> Script HTML anda.

<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: #0b0b0b;">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item mr-4 active">
<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="#">Features</a>
</li>
<li class="nav-item mr-4 ">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item mr-4 ">
<a class="nav-link" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>

Nah, bagaimana? Mudah bukan cara membuat Menu Navbar Bootstrap 4 di Kanan, Selebihnya anda pelajari sendiri class class bootstrap dalam script diatas. Mohon maaf jika Code nya berantakan.

Sekian Cara Membuat Menu Navbar Bootstrap di Kanan, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar.

No comments for "Cara Membuat Menu Navbar Bootstrap 4 di Kanan"