Membuat tampilan web yang responsif dengan bootstrap 4 itu tidak sulit. Menurut rumah code inti dari pembuatan website yang responsif itu di bagi 3 bagian haeder isi dan footer. Kamu cukup mengikuti langkah langkah ini untuk membuat tampilan web yang responsif.
<html>
<head>
<title>Rumah Code</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<!--Header -->
<div class="row p-2">
<div class="col-md-12 border p-3">
header
</div>
</div>
<!--Body -->
<div class="row p-2">
<div class="col-md-12 border p-3 ">
Body
</div>
</div>
<!--Footer -->
<div class="row p-2">
<div class="col-md-12 border p-3 ">
Footer
</div>
</div>
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script defer src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>Source code di atas menjadkan tampilan seperti di bawah ini
<div class="row p-2">
<div class="col-md-9 mx-auto border">
<div class="row">
<div class="col-md-9 mx-auto border">
Body Kiri
</div>
<div class="col-md-3 mx-auto border">
Body Kanan
</div>
</div>
</div>
</div>col-md-12 menjadi col-md-9 hal ini bertujuan agar tampilan body menjadi tidak maximal. Sedangkan untuk membuat colom menjadi di tengah menggunakan class mx-auto. Untuk body kiri dan body kanan saya menggunakan class col-md-9 dan col-md-3 hal ini bertujuan untuk memberikan ukuran pada colom dengan ukuran yang berbeda. Jika ingin ukuran yang sama pada col kiri dan kana kamu cukup menggunakan class col-md-6.Demikian lah tutorial dasar untuk membuat tampilan web responsif yang sederhana. Silahkan kawan wan kembangkan sendiri untuk membuat tampilan yang lebih baik.
