Latihan Membuat Website Menggunakan Bootstrap 5 Alpha!
Apa yang baru dari Boostrap 5?
Banyak banget perubahannya. namun yang paling mencolok adalah Boostrap sekarang tidak menggunakan JQuery lagi.
- jQuery was removed
- Switch to Vanilla JavaScript
- Drop Internet Explorer 10 and 11 support
- Improved grid system
- Improved documentation
- Improved modularity
- Improved forms
- New responsive font
- New utilities & helpers
- Easier customization & theming
- Lighter package
- New API available
Oke, sesuai judul artikel ini, pada kesempatan kali ini, kita akan belajar bersama - sama cara menggunakan Boostrap 5 Alpha dengan langsung terjun membuat projek website static yang pastinya keren dan juga responsive.
Untuk perlengkapannya cukup gunakan laptop dan IDE favorit kalian masing - masing. Namun saran saya gunakan Visual Studio Code saja. Oh iya satu lagi, untuk assets gambar nya nanti saya sertakan di link github dibawah ya.
1. Starter Template Boostrap 5
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
</head>
<body>
<!-- Optional JavaScript -->
<!-- Popper.js first, then Bootstrap JS -->
<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/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
</body>
</html>Silahkan copy paste starter template bootstrap 5 diatas pada Visual Studio Codenya (IDE). Jika sudah, mari kita buat bagian Navbarnya.
2. Membuat Navbar
Untuk membuat navbarnya, silahkan masukan code dibawah kedalam body html kita
<!-- Navbar -->
<nav class="py-3 navbar navbar-expand-lg fixed-top auto-hiding-navbar">
<div class="container">
<a class="navbar-brand"" href="#">
<img class="logo" src="/logo.png" /> Mari Menabung
</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">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->Jika sudah, buat file baru dengan nama style.css lalu masukan code berikut ini
/* Navbar */
body {
display: block;
overflow-x: hidden;
}
nav {
background-color: white;
}
.navbar-brand img {
max-height: 50px;
}
.navbar-brand {
font-size: 24px;
text-transform: uppercase;
font-weight: 900;
color: #3aa484;
}
nav ul li a {
color: #a9a9a9;
font-size: 22px;
margin: auto 10px;
}
nav ul li a:hover {
color: #318170;
}Hubungkan dile css tersebut kedalam starter template bootstrap dengan cara masukan kode dibawah ini kedalam head
<link rel="stylesheet" href="/style.css">3. Membuat Bagian Section
Lanjut membuat bagian section, silahkan masukan kode berikut ini
<!-- menabung section -->
<section id="menabung">
<div class="container">
<div class="row">
<div class="col">
<h1>Rencanakan<br>Masadepanmu!</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<button type="button" class="btn btn-dark btn-large">Learn more</button>
</div>
<div class="col img-col">
<img src="/menabung.svg" class="img-fluid" alt="Software Development">
</div>
</div>
<div class="row cards">
<div class="col-md-4 d-flex justify-content-center">
<div class="card" style="width: 18rem;">
<div class="card-body">
<img src="/icon1.svg" class="icon" alt="Service One"/>
<h5 class="card-title">Mudah Prosedurnya</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>
</div>
</div>
</div>
<div class="col-md-4 d-flex justify-content-center">
<div class="card" style="width: 18rem;">
<div class="card-body">
<img src="/icon2.svg" class="icon" alt="Service Two"/>
<h5 class="card-title">Laporan Transparan</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>
</div>
</div>
</div>
<div class="col-md-4 d-flex justify-content-center">
<div class="card" style="width: 18rem;">
<div class="card-body">
<img src="/icon3.svg" class="icon" alt="Service Three"/>
<h5 class="card-title">Invenstasi Masa Depan</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>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End menabung section -->Tak lupa, masukan juga kode berikut kedalam file css yang telah kita buat
/* Section */
section {
padding-top: 50px;
padding-bottom: 50px;
}
section h1 {
margin-top: 50px;
text-transform: uppercase;
font-weight: 900;
color: #318170;
text-align: left;
margin-bottom: 20px;
}
section p {
font-size: 16px;
font-weight: 300;
}
button {
max-width: 50%;
border-radius: 50px !important;
}
#menabung .row {
margin-bottom: 50px;
}
#menabung .col {
justify-content: center;
flex-direction: column;
display: flex;
}
#menabung .img-col {
justify-content: flex-end;
margin-top: 100px;
}
#menabung img {
max-width: 130% !important;
width: 130%;
}
#menabung .card {
box-shadow: 11px 7px 16px #f9f9f9;
border: 0;
text-align: center;
}
#menabung .icon {
width: 80px;
height: 80px;
margin-bottom: 20px;
}4. Membuat bagian About Us
Oke, biar makin cakep, tambahin juga komponen About Us, untuk kodenya ada dibawah ini
<!-- About us section -->
<section id="about-us">
<div class="container">
<div class="row align-items-center">
<div class="col">
<img src="/about-us.svg" class="img-fluid" alt="About Us">
</div>
<div class="col text-col">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<button type="button" class="btn btn-dark btn-large">Let's meet</button>
</div>
</div>
</div>
</section>
<!-- End About us section -->5. Membuat Bagian Footer
Oke, untuk terakhir, kita membuat bagian footer
<!-- Contact footer -->
<footer id="contact">
<div class="container">
<div class="row align-items-center">
<div class="col">
<h1>Contact US</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
</div>
</div>
</footer>
<!-- End Contact footer -->Tak lupa tambahkan css berikut ini kedalam file css yang sudah kita buat supaya makin bagus
/* Footer */
#contact {
text-align: center;
background-color: #318170;
color: white;
}
#contact h1 {
margin-top: 50px;
text-transform: uppercase;
font-weight: 900;
color: #318170;
text-align: left;
margin-bottom: 20px;
text-align: center;
color: white;
}Oke temen - temen, kurang lebih seperti itulah cara membuat website static menggunakan Boostrap 5. Untuk hasilnya kurang kebih bisa dilihat disini, dan untuk assets maupun source codenya bisa dilihat disini.
Mungkin cukup sekin untuk latihan kita hari ini, jan lupa share kita ini bermanfaat :)