<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<title>Bootstrap demo</title>
</head>
<body>
<!-- Navbar -->
<div class="container">
<div class="row bg-primary p-4 text-white">
Navbar
</div>
</div>
<!-- Header -->
<div class="container">
<div class="row bg-secondary p-4 text-white">
Header
</div>
</div>
<!-- Content -->
<div class="container">
<div class="row bg-light p-4 text-dark">
Content 1
</div>
<div class="row p-4 text-light">
<div class="col bg-warning">
Content 2.1
</div>
<div class="col p-4 bg-dark">
Content 2.2
</div>
</div>
<div class="row bg-light p-4 text-dark">
Content 3
</div>
<div class="row bg-info p-4 text-white">
<div class="position-relative start-50">
Content 4
</div>
</div>
</div>
<!-- Footer -->
<div class="container">
<div class="row bg-danger p-5 text-white">
Footer
</div>
</div>
<!-- <h1>Hello, world!</h1> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script> -->
</body>
</html>
Mengapa hasil pada code yang saya buat pada materi Layout Halaman berbeda dengan yang ada pada materi? padahal sudah sama dengan code yang ada pada materi, berikut saya lampirkan code dan screenshot hasilnya.
Camp404 memberikan alternatif untuk berkembang dan berinovasi dengan cara yang mudah, cepat dan efektif dalam peningkatan keahlian, rekrutmen tenaga kerja dan pengembangan perangkat lunak. Mari berdiskusi untuk berkembang bersama.
Copyright © Camp404
memang benar, code di materi masih ada yang kurang mnrt saya, saya juga seperti itu, akhirnya improve sendiri. Jika ingin sama, coba ini,
awal kan gini
<div class="row p-4 text-light">
<div class="col bg-warning">
Content 2.1
</div>
<div class="col p-4 bg-dark">
Content 2.2
</div>
</div> ilangin p-4 paling atas, sama p-4 yang dibawah
3