Navigasi bootstrap 4

tutorial Navigasi bootstrap 4 dari www.malasngoding.com

by malasngoding

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">

  <center>
    <h3>Tutorial Membuat Navigasi Dengan Bootstrap 4</h3>
    <h4><a href="https://www.malasngoding.com/navs-bootstrap-4/">www.malasngoding.com</a></h4>
  </center>

  <br />
  <br />
  <br />

  <h4>Menu navigasi</h4>
  <br>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Kontak Kami</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Tentang</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Shop</a>
    </li>
  </ul>

  <hr>

  <h4>Menu navigasi di kiri</h4>
  <br>
  <nav class="nav">
    <a class="nav-link active" href="#">Home</a>
    <a class="nav-link" href="#">Kontak Kami</a>
    <a class="nav-link" href="#">Tentang</a>
    <a class="nav-link disabled" href="#">Shop</a>
  </nav>

  <hr>

  <h4>Menu navigasi di tengah</h4>
  <br>
  <nav class="nav justify-content-center">
    <a class="nav-link active" href="#">Home</a>
    <a class="nav-link" href="#">Kontak Kami</a>
    <a class="nav-link" href="#">Tentang</a>
    <a class="nav-link disabled" href="#">Shop</a>
  </nav>

  <hr>

  <h4>Menu navigasi di kenan</h4>
  <br />
  <nav class="nav justify-content-end">
    <a class="nav-link active" href="#">Home</a>
    <a class="nav-link" href="#">Kontak Kami</a>
    <a class="nav-link" href="#">Tentang</a>
    <a class="nav-link disabled" href="#">Shop</a>
  </nav>

  <hr>

  <h4>Menu navigasi vertikal</h4>
  <br>
  <nav class="nav flex-column">
    <a class="nav-link active" href="#">Home</a>
    <a class="nav-link" href="#">Kontak Kami</a>
    <a...