Cara menggunakan template form bootstrap

Question

Sebagai permulaan bagi teman-teman yang belum tahu. Bootstrap itu adalah framework frontend yang sangat populer saat ini. Bootstrap Menyediakan berbagai tampilan untuk memudahkan kita dalam pengembangan aplikasi web yang responsive.

Table of Contents Show

Bagaimana Cara Mengintegrasikan Template Bootstrap di Localhost
Apakah bootstrap termasuk template?
Bagaimana cara melakukan instalasi bootstrap?
Model form bootstrap dimana posisi label dan input form terletak dalam bentuk baris dinamakan?
Apa itu Bootstrap dan CSS?

Saat ini, sudah banyak sekali template-template website yang sudah terintegrasi dengan bootstrap, dari yang gratis hingga yang berbayar. Sebagai rujukan teman-teman bisa klik tautan ini untuk melihat berbagai template bootstrap https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/ atau https://www.creative-tim.com/bootstrap-themes/free ada banyak model template yang bisa kita gunakan. Dan template-template ini biasanya menyediakan fitur yang sangat lengkap, dari mulai tampilan dashboardnya, tombolnya, formnya, tabelnya dan komponen-komponen lainnya biasa sudah tersedia untuk langsung kita gunakan.

Di bawah ini saya tampilkan video review salah satu template bootstrap yaitu admin-lte versi 2. Berikut videonya.

Bagaimana Cara Mengintegrasikan Template Bootstrap di Localhost

Cara ini bisa kita terapkan hampir di semua template website yang menggunakan html, css, javascript dan Php. jadi teman-teman jangan bingung. cara ini bisa kita gunakan untuk memasang template-template lainnya.

Pada tutorial kali ini saya akan mengintegrasikan template admin-LTE ke project localhost kita. Teman-teman bisa download terlebih dahulu templatenya disini "download".

Sebelum kita mulai saya asumsikan teman-teman sudah menginstall xampp terlebih dahulu di komputernya masing-masing.

1. Download dan ekstrak template yang sudah kita download sebelumnya.

download admin-lte

2. Letakkan folder hasil ekstrak tadi di dalam htdocs kita

Ekstrak dan simpan folder di dalam htdocs

3. Ubah nama folder dengan nama yang diinginkan, karena nama folder ini nantinya akan digunakan untuk local domain yang akan kita akses nantinya. Disini saya merubah nama folder menjadi project
4. Hidupkan webservice teman-teman
5. lalu ketik url localhost/project. Dan .... berhasil. Cukup mudah bukan untuk mengintegrasikan template yang kita buat di project kita. Hasilnya akan tampak seperti gambar di bawah ini.

template admin-lte yang sudah berhasil dijalankan di localhost

Dan untuk diperhatikan, saat kita menjalankan localhost/namafolder di browser, maka program akan otomatis mencari file index, jadi pastikan file index teman-teman ada dan tersimpan di dalam project yang kita buat, karena jika tidak maka tampilannya akan seperti gambar di bawah ini.

File index tidak ada di dalam folder

Di tutorial-tutorial selanjutnya, insyaAllah saya akan membuat aplikasi webnya secara bertahap dengan template yang sudah kita implementasikan pada tutorial kali ini.

Sekian tutorial Cara Pasang Template Bootstrap di Localhost Server Cepat dan Mudah. Dan mudah-mudahan tulisan saya ini membantu teman-teman sekalian. Ada pertanyaan, kritik, dan saran bisa disampaikan di kolom komentar di bawah ini. Happy Coding !!!.

bewoksatukosong.com | Halo semuanya balik lagi dengan om bewok, kali ini Tutorial Terakhir Mengenai Belajar Bootstrap, Yaitu Final Cara Membuat Template Bootstrap 4, sebenarnya sudah kita buat dari part 1 sampai part 9, nah di part terakhir ini, om bewok akan menggabungkan tutorial yang pembuatan template tersebut, ga ngerti ya ?

Jadi di tutorial dari part 1 sampai part 9, om bewok sedikit demi sedikit membuat template, pasti ada di bagian bawahnya, nah tapi terpisah semua di part 1 - part 9, nah kali ini kita satuin semua, nah penasaran kan hasilnya jadi seperti apa, hehe.

Masih ga ngerti ya, kalian bisa check dulu DAFTAR TUTORIAL BOOTSTRAP 4. Intinya kita mau belajar buat template yang sebelumnya kita sudah buat di part - part tersebut.

Seperti Tutorial sebelumnya kita buat folder terlebih dahulu dengan nama

Part 10 Final Belajar Membuat Template Bootstrap 4

Lalu buat file dengan nama index.html

Seperti biasa kita buat folder css lalu buat file bernama style.css dan membuat folder img, kalau kamu bingung bisa check di github om bewok, untuk menyamai-Nya.

Gambar 1. Struktur Folder Final Template Bootstrap 4

Mari kita ngoding sedikit demi sedikit untuk index.html

Pertama - tama kita buat html dan buat include css bootstrap, font awesome ,include css kita yang berada di folder css/style.css dan jangan lupa untuk include js-Nya juga ya. kalian bisa copy aja dari github om bewok atau copy dibawah ini

Let's code

<!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">
    <title>Final Template Bootstrap 4</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
    crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
     
    <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

Kalau kalian lihat tidak ada hasilnya, ya memang tidak ada. hehehe
Pertama kita akan membuatkan navigation bar seperti dibawah ini yang dimaksud navbar

Gambar 2. Navbar Bootstrap 4Kodingan-Nya seperti dibawah ini ya (inget! di dalam <body>di sini</body>

<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">bewoksatukosong</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto my-2 my-lg-0">
        <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 us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Contact us</a>
        </li>
        <li class="nav-item mr-2">
          <a class="nav-link btn btn-dark" href="#" tabindex="-1" data-toggle="modal" data-target="#kampret">Signup</a>
        </li>
        <li class="nav-item mr-2">
          <a class="nav-link btn btn-dark" href="#" tabindex="-1" data-toggle="modal" data-target="#free">Login</a>
        </li>
      </ul>
    </div>
  </nav>

Perhatikan ! Pada bagian navbar ada button sign up dan login agar ketika diklik muncul popup.

Gambar 3. Popup Login

Gambar 4. Popup Signup
kita tambahkan pada index.html sebelum </body>

<!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">
  <title>Final Template Bootstrap 4</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
    crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
    crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">bewoksatukosong</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto my-2 my-lg-0">
        <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 us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Contact us</a>
        </li>
        <li class="nav-item mr-2">
          <a class="nav-link btn btn-dark" href="#" tabindex="-1" data-toggle="modal" data-target="#kampret">Signup</a>
        </li>
        <li class="nav-item mr-2">
          <a class="nav-link btn btn-dark" href="#" tabindex="-1" data-toggle="modal" data-target="#free">Login</a>
        </li>
      </ul>
    </div>
  </nav>
  <!-- Modal -->
  <div class="modal fade" id="kampret" tabindex="-1" role="dialog" aria-labelledby="kampret123" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="kampret123">Daftar</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
              <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Username</label>
              <input type="text" class="form-control" id="username" aria-describedby="emailHelp" placeholder="Enter username">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="exampleCheck1">
              <label class="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Daftar</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="free" tabindex="-1" role="dialog" aria-labelledby="free123" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="free123">Login</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
              <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="exampleCheck1">
              <label class="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Login</button>
        </div>
      </div>
    </div>
  </div>
  <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
</body>
</html>

Selanjutnya kita akan membuat jumbotron yang didalamnya fitur pencarian artikel

Gambar 5. Jumbotron fitur pencarian artikelKodingan-Nya seperti dibawah ini ya (dibawah setelah </navbar>.

  <!--end navbar-->
  <!--jumbotron-->
  <div class="jumbotron jumbotron-fluid bg-dark">
    <div class="container">
      <h1 class="display-4 text-center text-light">Pencarian Artikel</h1>
      <p class="lead text-center text-light">Kamu bisa mencari artikel apapun yang kamu mau.</p>
      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Cari Artikel" aria-label="Recipient's username"
          aria-describedby="basic-addon2">
        <div class="input-group-append">
          <button class="btn btn-dark" id="search">Search</button>
        </div>
      </div>
    </div>
  </div>
  <!--end jumbotron-->

Oke selanjutnya kita akan menampilkan 3 kategori

DAFTAR TUTORIAL BOOTSTRAP 4

Penampilan 3 kategori yang kita buat seperti dibawah ini ya.

Gambar 6. Fitur categories

    <!--end jumbotron-->
    <!-- Categories -->
    <div class="container-fluid">
      <h1 class="display-5 text-center mb-5">Categories</h1>
      <div class="card-deck mb-5">
        <div class="card">
          <img class="card-img-top img-thumbnail" src="img/produk/codeigniter.png" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Codeigniter</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-secondary">Readmore</a>
          </div>
        </div>
        <div class="card">
            <img class="card-img-top img-thumbnail" src="img/produk/images.png" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Laravel</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-secondary">Readmore</a>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top img-thumbnail" src="img/produk/express.png" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Express js</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-secondary">Readmore</a>
            </div>
        </div> 
      </div>    
    </div> 
    <!-- End Categories -->

Selanjutnya kita akan menampilkan artikel static ya

Kita menampilkan 6 artikel dengan cara yang mirip sama menampilkan categories, bedanya om bewok menambahkan gambar juga.

Gambar 7. Menampilkan ArtikelKodingan-Nya seperti dibawah ini ya

    <!-- End Categories -->
    <!-- Article -->
    <div class="container-fluid">
      <!-- Example row of columns -->
      <div class="row p-5 bg-dark text-light">
        <div class="col-md-12">
            <h1 class="display-5 text-center mb-5">Article</h1>
        </div>
        <div class="col-md-4">
          <h2>Cara Install Express js</h2>
          <p>bewoksatukosong.com | Untuk pelajaran pertama yang perlu dilakukan adalah Install Boostrap 4. Ada beberapa cara untuk menginstall boostrap 4. Tapi kali ini om bewok akan memberikan cara install-Nya yang sudah sering digunakan oleh para developer. Ada 2 cara untuk install boostrap 4. 
              Offline : kamu tidak membutuhkan internet untuk meload website tersebut.</p> 
          <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Cara Install Laravel</h2>
          <p>bewoksatukosong.com | Emoji sudah menjadi hal yang umum bagi pengguna handphone android iphone, dan laptop apple. Tapi ternyata windows juga tidak mau kalah untuk mengeluarkan       emoji. om bewok tidak tau apakah ini resmi atau tidak dalam windows, karena dalam pengunaan ini bener-bener
              tricky. kita ga perlu berlama - lama lagi mari kita langsung saja coba
               </p>
          <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Cara Install Codeigniter 2018</h2>
          <p>bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan share ke kamu "Cara Install Codeigniter 2018", gampang banget untuk install codeigniter. oke mari kita mulai cara install nya
          Kamu kunjugi website https://www.codeigniter.com/download.</p>
          <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Crud Menggunakan Codeigniter</h2>
            <p>bewoksatukosong.com | Untuk pelajaran pertama yang perlu dilakukan adalah Install Boostrap 4. Ada beberapa cara untuk menginstall boostrap 4. Tapi kali ini om bewok akan memberikan cara install-Nya yang sudah sering digunakan oleh para developer. Ada 2 cara untuk install boostrap 4. 
                Offline : kamu tidak membutuhkan internet untuk meload website tersebut.</p> 
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div>
          <div class="col-md-4">
            <h2>Crud Menggunakan Laravel</h2>
            <p>bewoksatukosong.com | Emoji sudah menjadi hal yang umum bagi pengguna handphone android iphone, dan laptop apple. Tapi ternyata windows juga tidak mau kalah untuk mengeluarkan       emoji. om bewok tidak tau apakah ini resmi atau tidak dalam windows, karena dalam pengunaan ini bener-bener
                tricky. kita ga perlu berlama - lama lagi mari kita langsung saja coba
                 </p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div>
          <div class="col-md-4">
            <h2>Crud Menggunakan Express js</h2>
            <p>bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan share ke kamu "Cara Install Codeigniter 2018", gampang banget untuk install codeigniter. oke mari kita mulai cara install nya
            Kamu kunjugi website https://www.codeigniter.com/download.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div>
      </div>
      <hr>
    </div>
    <!-- End Article -->

Selanjutnya kita membuatkan sebuah fitur Top author, kita menampilkan-Nya seperti dibawah ini ya dan tidak lupa kita menambahkan social media-Nya dengan mengunakan ul-list-item.

Gambar 8. Top Author

Kodingan-Nya seperti dibawah ini ya

    <!-- End Article -->
    <!-- Top Author -->
  <section class="bg-light" id="team">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2 class="section-heading text-uppercase">Top Author</h2>
          <h3 class="section-subheading text-muted">Penulis Yang Sering Mendapatkan Like, Comment Dan Share</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="team-member">
            <img class="mx-auto rounded-circle" src="img/author/gerald.jpg" alt="">
            <h4>Gerald Prambudi</h4>
            <p class="text-muted">Content Creator Tech</p>
            <ul class="list-inline social-buttons">
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-facebook-f"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-linkedin-in"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="team-member">
            <img class="mx-auto rounded-circle" src="img/author/am.jpg" alt="">
            <h4>Arief Muhammad</h4>
            <p class="text-muted">Content Creator About Social Media</p>
            <ul class="list-inline social-buttons">
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-facebook-f"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-linkedin-in"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="team-member">
            <img class="mx-auto rounded-circle" src="img/author/rd.jpg" alt="">
            <h4>Raditya Dika</h4>
            <p class="text-muted">Content Creator Review Film</p>
            <ul class="list-inline social-buttons">
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-facebook-f"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-linkedin-in"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-8 mx-auto text-center">
          <p class="large text-muted">Top Author ini akan selalu update setiap minggu sekali, jika kamu ingin berkontribusi seperti mereka, kamu bisa contact kami di [email protected]</p>
        </div>
      </div>
    </div>
  </section>

    <!-- End Top Author -->

Selanjutnya kita membuatkan sebuah form contact, ini digunakan jika ingin memberikan saran atau kritik kepada pemilik website tersebut.

Gambar 9. Form Contact

Kodingan-Nya seperti dibawah ini ya

  <!-- End Top Author -->
  <!-- Contact Us -->
  <div class="container-fluid">
    <div class="col-md-12 bg-dark text-light py-5 px-5">
      <h1 class="display-h4 text-center">Contact Us</h1>
      <form>
        <div class="form-group">
          <label for="email">Email address</label>
          <input type="text" class="form-control" id="email" placeholder="[email protected]">
        </div>
        <div class="form-group">
          <label for="subject">Subject</label>
          <input type="text" class="form-control" id="subject" placeholder="Subject">
        </div>

        <div class="form-group">
          <label for="message">Message</label>
          <textarea class="form-control" id="message" rows="3">Tulis Disini</textarea>
        </div>
        <button class="btn btn-dark">Send</button>
      </form>
    </div>
  </div>
  <!-- End Contact Us -->

Terakhir kita tambahkan footer.

 <!-- End Contact Us -->
  <!-- Footer -->
  <footer>
    <div class="container-fluid">
      <div class="col-md-12 p-4 bg-dark text-light text-center">
        <span class="copyright">Copyright &copy; <a href="https://github.com/geraldprambudi/Belajar-Bootstrap-4" class=" text-light">Free
            Template blog bewoksatukosong.com 2019</a> </span>
      </div>
    </div>
  </footer>

Full code-Nya seperti 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">
  <title>Final Template Bootstrap 4</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
    crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
    crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">bewoksatukosong</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto my-2 my-lg-0">
        <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 us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Contact us</a>
        </li>
        <li class="nav-item mr-2">
          <a class="nav-link btn btn-dark" href="#" tabindex="-1" data-toggle="modal" data-target="#kampret">Signup</a>
        </li>
        <li class="nav-item mr-2">
          <a class="nav-link btn btn-dark" href="#" tabindex="-1" data-toggle="modal" data-target="#free">Login</a>
        </li>
      </ul>
    </div>
  </nav>
  <!--end navbar-->
  <!--jumbotron-->
  <div class="jumbotron jumbotron-fluid bg-dark">
    <div class="container">
      <h1 class="display-4 text-center text-light">Pencarian Artikel</h1>
      <p class="lead text-center text-light">Kamu bisa mencari artikel apapun yang kamu mau.</p>
      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Cari Artikel" aria-label="Recipient's username"
          aria-describedby="basic-addon2">
        <div class="input-group-append">
          <button class="btn btn-dark" id="search">Search</button>
        </div>
      </div>
    </div>
  </div>
  <!--end jumbotron-->
  <!-- Categories -->
  <div class="container-fluid">
    <h1 class="display-5 text-center mb-5">Categories</h1>
    <div class="card-deck mb-5">
      <div class="card">
        <img class="card-img-top img-thumbnail" src="img/produk/codeigniter.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Codeigniter</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
            content.</p>
          <a href="#" class="btn btn-secondary">Readmore</a>
        </div>
      </div>
      <div class="card">
        <img class="card-img-top img-thumbnail" src="img/produk/images.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Laravel</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
            content.</p>
          <a href="#" class="btn btn-secondary">Readmore</a>
        </div>
      </div>
      <div class="card">
        <img class="card-img-top img-thumbnail" src="img/produk/express.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Express js</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
            content.</p>
          <a href="#" class="btn btn-secondary">Readmore</a>
        </div>
      </div>
    </div>
  </div>
  <!-- End Categories -->
  <!-- Article -->
  <div class="container-fluid">
    <!-- Example row of columns -->
    <div class="row p-5 bg-dark text-light">
      <div class="col-md-12">
        <h1 class="display-5 text-center mb-5">Article</h1>
      </div>
      <div class="col-md-4">
        <h2>Cara Install Express js</h2>
        <p>bewoksatukosong.com | Untuk pelajaran pertama yang perlu dilakukan adalah Install Boostrap 4. Ada beberapa
          cara untuk menginstall boostrap 4. Tapi kali ini om bewok akan memberikan cara install-Nya yang sudah sering
          digunakan oleh para developer. Ada 2 cara untuk install boostrap 4.
          Offline : kamu tidak membutuhkan internet untuk meload website tersebut.</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Cara Install Laravel</h2>
        <p>bewoksatukosong.com | Emoji sudah menjadi hal yang umum bagi pengguna handphone android iphone, dan laptop
          apple. Tapi ternyata windows juga tidak mau kalah untuk mengeluarkan emoji. om bewok tidak tau apakah ini
          resmi atau tidak dalam windows, karena dalam pengunaan ini bener-bener
          tricky. kita ga perlu berlama - lama lagi mari kita langsung saja coba
        </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Cara Install Codeigniter 2018</h2>
        <p>bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan share ke kamu "Cara
          Install Codeigniter 2018", gampang banget untuk install codeigniter. oke mari kita mulai cara install nya
          Kamu kunjugi website https://www.codeigniter.com/download.</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Crud Menggunakan Codeigniter</h2>
        <p>bewoksatukosong.com | Untuk pelajaran pertama yang perlu dilakukan adalah Install Boostrap 4. Ada beberapa
          cara untuk menginstall boostrap 4. Tapi kali ini om bewok akan memberikan cara install-Nya yang sudah sering
          digunakan oleh para developer. Ada 2 cara untuk install boostrap 4.
          Offline : kamu tidak membutuhkan internet untuk meload website tersebut.</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Crud Menggunakan Laravel</h2>
        <p>bewoksatukosong.com | Emoji sudah menjadi hal yang umum bagi pengguna handphone android iphone, dan laptop
          apple. Tapi ternyata windows juga tidak mau kalah untuk mengeluarkan emoji. om bewok tidak tau apakah ini
          resmi atau tidak dalam windows, karena dalam pengunaan ini bener-bener
          tricky. kita ga perlu berlama - lama lagi mari kita langsung saja coba
        </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Crud Menggunakan Express js</h2>
        <p>bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan share ke kamu "Cara
          Install Codeigniter 2018", gampang banget untuk install codeigniter. oke mari kita mulai cara install nya
          Kamu kunjugi website https://www.codeigniter.com/download.</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
    </div>
    <hr>
  </div>
  <!-- End Article -->
  <!-- Top Author -->
  <section class="bg-light" id="team">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2 class="section-heading text-uppercase">Top Author</h2>
          <h3 class="section-subheading text-muted">Penulis Yang Sering Mendapatkan Like, Comment Dan Share</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="team-member">
            <img class="mx-auto rounded-circle" src="img/author/gerald.jpg" alt="">
            <h4>Gerald Prambudi</h4>
            <p class="text-muted">Content Creator Tech</p>
            <ul class="list-inline social-buttons">
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-facebook-f"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-linkedin-in"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="team-member">
            <img class="mx-auto rounded-circle" src="img/author/am.jpg" alt="">
            <h4>Arief Muhammad</h4>
            <p class="text-muted">Content Creator About Social Media</p>
            <ul class="list-inline social-buttons">
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-facebook-f"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-linkedin-in"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="team-member">
            <img class="mx-auto rounded-circle" src="img/author/rd.jpg" alt="">
            <h4>Raditya Dika</h4>
            <p class="text-muted">Content Creator Review Film</p>
            <ul class="list-inline social-buttons">
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-facebook-f"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-linkedin-in"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-8 mx-auto text-center">
          <p class="large text-muted">Top Author ini akan selalu update setiap minggu sekali, jika kamu ingin
            berkontribusi seperti mereka, kamu bisa contact kami di [email protected]</p>
        </div>
      </div>
    </div>
  </section>
  <!-- End Top Author -->
  <!-- Contact Us -->
  <div class="container-fluid">
    <div class="col-md-12 bg-dark text-light py-5 px-5">
      <h1 class="display-h4 text-center">Contact Us</h1>
      <form>
        <div class="form-group">
          <label for="email">Email address</label>
          <input type="text" class="form-control" id="email" placeholder="[email protected]">
        </div>
        <div class="form-group">
          <label for="subject">Subject</label>
          <input type="text" class="form-control" id="subject" placeholder="Subject">
        </div>

        <div class="form-group">
          <label for="message">Message</label>
          <textarea class="form-control" id="message" rows="3">Tulis Disini</textarea>
        </div>
        <button class="btn btn-dark">Send</button>
      </form>
    </div>
  </div>
  <!-- End Contact Us -->
  <!-- Footer -->
  <footer>
    <div class="container-fluid">
      <div class="col-md-12 p-4 bg-dark text-light text-center">
        <span class="copyright">Copyright &copy; <a href="https://github.com/geraldprambudi/Belajar-Bootstrap-4" class=" text-light">Free
            Template blog bewoksatukosong.com 2019</a> </span>
      </div>
    </div>
  </footer>

  <!-- Modal -->
  <div class="modal fade" id="kampret" tabindex="-1" role="dialog" aria-labelledby="kampret123" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="kampret123">Daftar</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
              <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Username</label>
              <input type="text" class="form-control" id="username" aria-describedby="emailHelp" placeholder="Enter username">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="exampleCheck1">
              <label class="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Daftar</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="free" tabindex="-1" role="dialog" aria-labelledby="free123" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="free123">Login</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
              <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="exampleCheck1">
              <label class="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Login</button>
        </div>
      </div>
    </div>
  </div>
  <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
</body>
</html>

jangan lupa kalian tambahkan css-Nya juga, ada di folder css/style.css

Kodingan-Nya seperti dibawah ini ya

<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">bewoksatukosong</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto my-2 my-lg-0">
        <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 us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Contact us</a>
        </li>
        <li class="nav-item mr-2">
          <a class="nav-link btn btn-dark" href="#" tabindex="-1" data-toggle="modal" data-target="#kampret">Signup</a>
        </li>
        <li class="nav-item mr-2">
          <a class="nav-link btn btn-dark" href="#" tabindex="-1" data-toggle="modal" data-target="#free">Login</a>
        </li>
      </ul>
    </div>
  </nav>

0

Hasilnya seperti dibawah ini

Gambar 10. Full Version Tampilan Website Bootstrap 4 DONETerimakasih sudah membaca tutorial series bootstrap 4 ini, semoga bisa bermanfaat bagi teman - teman, jangan lupa share like, comment dan subscribe haha. Senang sekali rasanya menyelesaikan Tutorial Bootstrap 4 ini. Kamu bisa download source kode nya dan melihat

Apakah bootstrap termasuk template?

Bootstrap merupakan framework CSS yang di dalamnya berisi template HTML, CSS, dan JavaScript yang untuk membuat sebuah website yang responsif dengan cepat dan mudah.

Bagaimana cara melakukan instalasi bootstrap?

Dan berikut cara menginstal Bootstrap secara Offline..

Download terlebih dahulu file bootstrap melalui laman resminya. ... .

Selanjutnya bukalah teks editor Anda. ... .

Kemudian klik menu File yang ada di bagian toolbar aplikasi Sublime. ... .

Selanjutnya simpanlah file tersebut dengan cara klik menu File lalu pilih menu Save..

Model form bootstrap dimana posisi label dan input form terletak dalam bentuk baris dinamakan?

form dengan model inline adalah sebuah form yang label dan form inputnya terletak sebaris.

Apa itu Bootstrap dan CSS?

Bootstrap merupakan salah satu jenis framework untuk CSS (Cascading Style Sheet) yang digunakan untuk perancangan situs website. Pengunaan bootstrap sangatlah membantu progammer dalam membangun tampilan sebuah website. Hal tersebut tertulis di buku Bootstrap: Responsive Web Development karangan Jake Spurlock.

kode bootstrap