Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar Bootstrap Bagian 3 : Cara Membuat Fixed Layout, selanjutnya kita akan belajar cara membuat fluid layout di Bootstrap.
Di Bootstrap Anda dapat menggunakan class .container-fluid untuk membuat layout yang dapat menyesuaikan bentuk untuk memanfaatkan 100% lebar viewport di semua ukuran perangkat (ekstra kecil, kecil, sedang, besar, dan ekstra besar).
Class .container-fluid hanya menerapkan lebar: 100%, bukan lebar yang berbeda, untuk ukuran viewport yang berbeda.
Namun, layoutnya akan tetap responsif dan Anda dapat menggunakan class grid seperti biasa.
Contoh berikut akan membuat layout fluid yang mencakup 100% lebar layar.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Contoh Fluid Layout Bootstrap 4</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
<div class="container-fluid">
<a href="#" class="navbar-brand mr-3">Tutorial Mbah WP</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Beranda</a>
<a href="#" class="nav-item nav-link">Layanan</a>
<a href="#" class="nav-item nav-link">Tentang</a>
<a href="#" class="nav-item nav-link">Kontak</a>
</div>
<div class="navbar-nav ml-auto">
<a href="#" class="nav-item nav-link">Daftar</a>
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="jumbotron">
<h1>Belajar Membuat Website</h1>
<p class="lead"> Di dunia saat ini, internet adalah cara paling populer untuk berhubungan dengan orang-orang. Di <a href="https://mbahwp.com" target="_blank" rel="noopener"> mbahwp.com </a> Anda akan mempelajari teknologi pengembangan web yang penting beserta contoh praktik kehidupan nyata, sehingga Anda dapat membuat situs web Anda sendiri untuk terhubung dengan orang-orang di seluruh dunia.</p>
<p><a href="https://mbahwp.com" target="_blank" class="btn btn-success btn-lg" rel="noopener">Mulai Sekarang </a></p>
</div>
<div class="row">
<div class="col-md-4">
<h2>HTML</h2>
<p>HTML adalah bahasa markup standar untuk menjelaskan struktur halaman web. Tutorial HTML kami akan membantu Anda memahami dasar-dasar bahasa HTML5 terbaru, sehingga Anda dapat membuat halaman web atau situs Anda sendiri.</p>
<p><a href="https://mbahwp.com/category/coding/html/" target="_blank" class="btn btn-success" rel="noopener">Pelajari Selanjutnya »</a></p>
</div>
<div class="col-md-4">
<h2>CSS</h2>
<p> CSS digunakan untuk mendeskripsikan presentasi halaman web. CSS dapat menghemat banyak waktu dan tenaga. Tutorial CSS kami akan membantu Anda mempelajari dasar-dasar CSS3 terbaru, sehingga Anda dapat mengontrol gaya dan tata letak situs web Anda.</p>
<p><a href="https://mbahwp.com/category/coding/css/" target="_blank" class="btn btn-success" rel="noopener">Pelajari Selanjutnya »</a></p>
</div>
<div class="col-md-4">
<h2>Bootstrap</h2>
<p>Bootstrap adalah framework front-end yang kuat untuk pengembangan web yang lebih cepat dan lebih mudah. Tutorial Bootstrap kami akan membantu Anda mempelajari semua fitur framework Bootstrap 4 terbaru sehingga Anda dapat dengan mudah membuat situs web yang responsif.</p>
<p><a href="https://mbahwp.com/category/coding/bootstrap/" target="_blank" class="btn btn-success" rel="noopener">Pelajari Selanjutnya »</a></p>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-md-6">
<p>Copyright © 2021 Tutorial Mbah WP</p>
</div>
<div class="col-md-6 text-md-right">
<a href="#" class="text-dark">Terms of Use</a>
<span class="text-muted mx-2">|</span>
<a href="#" class="text-dark">Privacy Policy</a>
</div>
</div>
</footer>
</div>
</body>
</html>
Semoga tutorial ini bisa membantu Anda mempelajari cara membuat fluid layout menggunakan Bootstrap.
