Boostrap adalah salah satu css framework yang paling banyak digunakan untuk membuat sebuah tampilan website. Dengan boostrap maka proses development akan jauh lebih cepat, karena boostrap sudah menyediakan banyak sekali komponen yang berguna dalam pembuatan sebuah tampilan website.
Salah satu alasan belajar boostrap adalah market share yang besar dalam penggunaannya.
Daftar Isi
Pada tutorial kali ini kita akan belajar membuat sebuah halaman website statis dengan menggunakan boostrap 4.
Untuk tampilan website yang ingin kita buat kira-kira seperti sketsa dibawah ini:
Dari gambar di atas kita bisa membagi tampilan tersebut mejadi 6 bagian utama yaitu:
- Navigation Menu
- Image atau slideshow
- Service atau Layanan section
- Profile Section
- Contact Section dan
- Footer Section
Apa saja step-stepnya? Silakan ikuti terus tutoraial ini sampai akhir karena di akhir tutorial akan dibagikan link download dan demonya.
1. Installasi Boostrap 4
Langkah pertama buatlah sebuah folder baru dengan nama b4 atau bebas sesuai keinginan kalian.
Kemudian untuk menginstall Boostrap 4, ada 2 cara yaitu dengan cara meng-include file boostrap dari CDN secara online dan yang kedua adalah kamu bisa download file-file yang dibutuhkan dan di akses secara offline.
Pada tutorial ini kita akan memakai boostrap secara offline jadi ada beberapa file yang harus kita download dulu.
Buka file boostrap yang sudah didownload dan copy folder css dan js ke dalam diretory website yang mau kita buat.
Taruh file jquery dan poper yang sudah di download ke dalam folder js supaya rapi.
Tampilannya folder kurang lebih seperti di bawah ini.
2. Buat File index.html & style.css
File index.html akan menjadi file utama kita
Buat juga sebuah file css di dalam folder css dengan nama style.css. File style.css akan kita gunakan untuk menaruh css yang tidak ada atau custom style dari website yang akan kita buat.
Buka file index.html dan include css dan javascript yang diperlukan seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tutorial Boostrap 4</title>
<link rel="stylesheet" type="text/css" href="css/boostrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<script src="js/jquery-3.3.1.slim.min.js" ></script>
<script src="js/popper.min.js" ></script>
<script src="js/bootstrap.min.js" ></script>
</body>
</html>
Kalian bisa membuka file index.html dan pastikan semua css dan js terinclude dengan benar. Caranya jika kalian menggunakan Google Chrome bisa klik kanan dan inspect. Di tab network bisa dilihat js dan css yang sudah di include.
Langkah pertama sudah kita lewati, selanjutnya adalah membuat section pertama yaitu Navigation Menu
Navigation Menu
Untuk membuat menu, kita akan menggunakan komponen dari Boostrap 4 yaitu Navbar
Copy kode dibawah ini setelah tag body
<!-- Nav Section -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">NGIDE.NET</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="navbar-nav ml-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="#service">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Nav Section -->
Reload halaman index.html, kalian akan mendapatkan tampilan seperti di bawah ini:
Slide Section
Bagian kedua dari design yang kita buat adalah slideshow. Untuk itu kita akan memakai komponen dari boostrap yaitu carousel.
Tambahkan kode dibawah ini setelah navbar.
<!-- Slide Start -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/slide1.jpeg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3>Selamat Datang di NGIDE.NET</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/slide2.jpeg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3>Selamat Datang di NGIDE.NET</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Slide End -->
Reload halaman index.html dan kalian akan mendapatkan sebuah slider seperti contoh di bawah ini.
Oh ya jangan lupa siapkan gambar untuk masing-masing slide ya.
Untuk gambar-gambar yang bagus dan free to commercial use kamu bisa cari di website berikut ini:
Service Section
Pada bagian ketiga kita akan membuat bagian untuk service layanan. Kira-kira tampilannya nanti akan seperti di bawah ini.
Tambahkan kode berikut untuk service section.
<section class="service" id="service">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="images/service1.jpeg" class="img-fluid" alt="...">
<h3>Web Development</h3>
<p>Lorem ipsum dolor sit amet, petentium constituto ei quo, commodo repudiare vituperata per et. Eu utamur civibus pertinacia nec. Mei dicit dissentias interpretaris in. Mei odio purto interpretaris no, mea simul impedit eloquentiam ei.</p>
</div>
<div class="col-md-4">
<img src="images/service2.jpeg" class="img-fluid" alt="...">
<h3>Web Design</h3>
<p>Lorem ipsum dolor sit amet, petentium constituto ei quo, commodo repudiare vituperata per et. Eu utamur civibus pertinacia nec. Mei dicit dissentias interpretaris in. Mei odio purto interpretaris no, mea simul impedit eloquentiam ei.</p>
</div>
<div class="col-md-4">
<img src="images/service3.jpeg" class="img-fluid" alt="...">
<h3>SEO Service</h3>
<p>Lorem ipsum dolor sit amet, petentium constituto ei quo, commodo repudiare vituperata per et. Eu utamur civibus pertinacia nec. Mei dicit dissentias interpretaris in. Mei odio purto interpretaris no, mea simul impedit eloquentiam ei.</p>
</div>
</div>
</div>
</section>
About Section
Selanjutnya kita akan membuat tampilan untuk about. Disini kita akan memakai row dan juga memakai display:flex agar tulisan yang sebelah kanan berada di tengah-tengah secara vertical.
Kurang mengerti bagaimana maksudnya? Coba perhatikan gambar di bawah ini.
<section class="about">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="images/profile.jpeg" class="w-100" alt="...">
</div>
<div class="col-md-6 d-flex align-items-center justify-content-center flex-column">
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, petentium constituto ei quo, commodo repudiare vituperata per et. Eu utamur civibus pertinacia nec. Mei dicit dissentias interpretaris in. Mei odio purto interpretaris no, mea simul impedit eloquentiam ei.</p>
</div>
</div>
</div>
</section>
Copy kode di atas setelah service section.
Contact Section
Pada contact section, kita akan membuat sebuah tombol contact us yang berada di tengah-tengah halaman.
Caranya?
<section class="contact" id="contact">
<div class="container p-5">
<div class="row">
<div class="col-md-12 text-center">
<a href="" class="btn btn-success btn-lg btn-contact">Contact Us</a>
</div>
</div>
</div>
</section>
Footer Section
Nah inilah section terakhir dari design yang kita buat yaitu footer.
Di footer kita akan menampilkan informasi tentang about us dan juga menu-menu lainnya.
<footer class="bg-dark">
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, petentium constituto ei quo, commodo repudiare vituperata per et. Eu utamur civibus pertinacia nec. Mei dicit dissentias interpretaris in. Mei odio purto interpretaris no, mea simul impedit eloquentiam ei.</p>
</div>
<div class="col-md-3">
<h2>Find Me</h2>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Youtube</li>
</ul>
</div>
<div class="col-md-3">
<h2>Other Menu</h2>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>
</footer>
~~~
Pada footer saya memakai class bawaan dari boostrap yaitu .bg-dark agar backgroundnya berubah menjadi lebih gelap.
Tampilannya nanti akan seperti dibawah ini.
Footer Section
Nah selanjutnya kita akan menambahkan sedikit style agar tampilan website kita semakin menarik.
Copy code dibawah ini ke style.css
~~~html
body {
font-size: 16px;
line-height: 1.8;
}
h1,h2,h3,h4,h5 {
padding-top: 15px;
line-height: 2;
}
footer, section {
padding-top: 45px;
padding-bottom: 45px;
}
#service{
background-color: #fbfbfb;
}
#contact{
background-color: #fbfbfb;
}
.btn-contact {
padding: 15px 30px;
}
footer {
color: #ffffff;
}
Coba buka lagi file index.html dan lihat tampilan website kita sekarang. Sudah cukup bagus bukan?
Kamu bisa bereksperiment dengan menambahkan beberapa animasi sehingga tampilan webnya menjadi semakin menarik dan intuitif.
Sekian tutorial mengenai cara membuat sebuah website sederhana dengan menggunakan Bootstrap 4. Semoga tutorial ini membantu teman-teman yang baru belajar dalam membuat tampilan website.
Oh ya untuk link demo dan download source codenya di bawah ini ya:
Komen dan share artikel ini jika bermanfaat.
