Banyak sekali, kita tahu bahwa untuk membuat halaman web/blog saat ini tidak cukup dengan pengetahuan dasar css, belum lagi dengan responsifitas perangkat yang digunakan, misalnya tampilan web jika diakses dari gadget, tablet, maupun desktop itu sendiri. belum lagi dukungan responsifitas browser yang digunakan oleh user yang mengakses web/blog kita, dan masih banyak lagi hal-hal yang perlu diperhatikan dalam pembuatan desain halaman web.

Oleh karena itu, dengan menggunakan bootstrap akan sangat membantu sekali dalam proses pengerjaan project website/blog kita agar lebih efisien dan menghemat waktu, ditambah dengan bootstrap yang membolehkan kita untuk mengcustom dari tampilan element bootstrap itu sendiri, maksudnya kita bisa membuat desain css kita sendiri.

Diantara Kelebihan Bootstrap adalah :

  • Dokumentasi penggunaan bootstrap lengkap, untuk memudahkan kita dalam menggunakan framework bootstrap.
  • Dapat menghemat waktu dalam proses pembuatan web/blog.
  • Responsive atau mobile friendly dengan berbagai perangkat seperti gadget, smartphone, maupun tablet.
  • Boostrap dapat di custom sesuai keinginan kita.
  • Resource kecil dan ringan digunakan dalam project web/blog.
  • Dan masih banyak lagi kelebihan lainnya.

Untuk menggunakan Bootstrap secara offline ini, silahkan download terlebih dahulu bootstrap di situs resminya dan pilih Compiled CSS & JS.

Contoh penggunaan sebuah file index.html pada direktori utama web/blog, dan isi dari file tersebut seperti code dibawah ini.
<!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="./asset/css/bootstrap.min.css">
    <title>Belajar Bootstrap 4</title>
  </head>
  <body>
      
      
      <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <a class="navbar-brand" href="">♛ Developer</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Programming</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Bootstrap</a>
              <a class="dropdown-item" href="#">CSS</a>
              <a class="dropdown-item" href="#">HTML 5</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
      
    <div class="jumbotron">
        <h1 class="display-4">Selamat Datang</h1>
        <p class="lead">Materi pertama kita untuk belajar bootstrap dimulai dari sini.</p>
        <hr class="my-4">
        <p>ini adalah komponen <strong>jumbotron</strong> yang ada pada bootstrap</p><br>
         <a class="btn btn-danger btn-lg" href="https://ariansyah.net/belajar-menggunakan-bootstrap-4-offline/" role="button"> ← Back to Tutorial</a>    
        <a class="btn btn-primary btn-lg" href="https://ariansyah.net/bootstrap4/" role="button"> ♥ Oke Mengerti</a>
    </div>
    <!-- Optional JavaScript -->
    <!-- Pertama load jQuery, kemudian Bootstrap JS -->
    <script src="./asset/js/jquery-3.4.1.slim.min.js"></script>
    <script src="./asset/js/bootstrap.min.js"></script>
  </body>
</html>