Membuat Grid Bootstrap

Hasil dari coding nya



Codingnya

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
 
<div class="container-fluid mt-3">
  <h1>Kotak ke-1</h1>
  <div class="row">
    <div class="col-sm-5 p-3 bg-warning text-white">.col</div>
    <div class="col-sm-7 p-3 bg-primary text-white">.col</div>
  </div>
</div>

</body>
</html>

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
 
<div class="container-fluid mt-3">
  <h1>Kotak ke-2</h1>
  <div class="row">
    <div class="col-sm-1 p-3 bg-warning text-white">.col</div>
    <div class="col-sm-8 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-3 p-3 bg-danger text-white">.col</div>
  </div>
</div>

</body>
</html>

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
 
<div class="container-fluid mt-3">
  <h1>Kotak ke-3</h1>
  <div class="row">
    <div class="col-sm-6 p-3 bg-danger text-white">.col</div>
    <div class="col-sm-2 p-3 bg-warning text-white">.col</div>
    <div class="col-sm-2 p-3 bg-info text-white">.col</div>
    <div class="col-sm-2 p-3 bg-dark text-white">.col</div>
  </div>
</div>

</body>
</html>


Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas Membuat Tabel Barang Nama Kolom

Gambar
  Apa itu Tabel Barang? Tabel barang adalah cara yang terorganisir untuk menyimpan informasi tentang berbagai macam barang. Misalnya, jika kamu punya toko mainan, tabel barangmu bisa berisi informasi seperti nama mainan, harga, jumlah stok, dan tanggal kedatangan. Mengapa Kita Perlu Tabel Barang? Mudah mencari: Dengan tabel, kamu bisa dengan cepat menemukan barang yang kamu cari. Organisasi yang baik: Semua informasi tentang barangmu akan tersimpan rapi dalam satu tempat. Pengambilan keputusan: Tabel bisa membantu kamu membuat keputusan, seperti menentukan barang mana yang harus dipesan ulang atau barang mana yang paling populer. Cara Membuat Tabel Barang Kamu bisa membuat tabel barang menggunakan berbagai macam alat, seperti: Kertas dan pena: Cara paling sederhana, tapi mungkin kurang praktis jika kamu punya banyak barang. Microsoft Excel: Program komputer yang sangat populer untuk membuat tabel dan melakukan perhitungan. Google Sheets: Versi online dari Excel, bi...
Baca selengkapnya

Tugas PBO (Pak Andri)

 Bagian Home <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Ayunda Personal Website</ title >     < link rel = "shortcut icon" href = "favicon.ico" type = "image/x-icon" >     < link rel = "icon" href = "favicon.ico" type = "image/x-icon" >     < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin = "anonymous" > </ head > < style >     body {       background-image: url ( 'R.jpeg' );       background-repeat: no-repeat ;       background-attachment: fixed ;         background-size: ...
Baca selengkapnya