Forum | Camp 404

CAMP404 FORUM

Perbedaan hasil dan source code Closed

Oleh FAIZ FADILAH 2 tahun yang lalu
Bootstrap Fundamentals | Layout, Navbar, Header & Content

<!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.  



2 Jawaban
Jawaban Pilihan

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

  1. <div class="row p-4 text-light">
  2. <div class="col bg-warning">
  3. Content 2.1
  4. </div>
  5. <div class="col p-4 bg-dark">
  6. Content 2.2
  7. </div>
  8. </div> ilangin p-4 paling atas, sama p-4 yang dibawah
Oleh Muamar Zidan T.A 2 tahun yang lalu

3

Oleh MUH. RIYANDRA 2 tahun yang lalu