Tampilkan postingan dengan label bootstraps. Tampilkan semua postingan
Tampilkan postingan dengan label bootstraps. Tampilkan semua postingan

Sabtu, 01 Agustus 2026

reordering column bootstrap 5 | belajar reordering column bagi pemula

 Belajar bagaimana reordering untuk column bagi pemula

maka akan muncul 

 <div class="row" style="height: ;">
      <div class="col-12 col-sm-6 col-lg-3 turun order-2">
         <div class="contoh">1</div>
       </div>
       <div class="col-12 col-sm-6 col-lg-3 turun order-3">
         <div class="contoh ">2</div>

lanjutan responsible column

 kembali lagi dengan bagaimana belajar responsive dengan belajar column , disini kita belajar pembagian column di web mau berapa dan diposisi mana

  <div class="container bordered">
      <div class="row" style="height: 100vh;">
      <div class="col-12 col-sm-6 col-lg-3 turun">
         <div class="contoh">1</div>
       </div>
       <div class="col-12 col-sm-6 col-lg-3 turun">
         <div class="contoh ">2</div>
       </div>

Tutorial Bootstrapp | responsive, breakpoints, container, grid

 belajar container 

untuk membuat container


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-5.0.2-dist/css/bootstrap.min.css" />
// buat style seperti ini
    <style>
      .bordered {
        border: solid;

tutorial belajar bootstraps | download dan instal bootstraps | bisa ofline maupun online

 download complides css dan js . ini untuk ofline

, tanpa internet pun bisa

setelah download, extrak di folder untuk kita pelajari

buat folder belajar bootsraps , lalu tambahkan file tes.html lalu buka dengan vs code. kemudian isi

ketikkan html5 maka akan muncul 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <link rel="stylesheet" href="bootstrap-5.0.2-dist/css/bootstrap.min.css">
        // ini adalah cara memasukkan bootstrap dari folder yang sudah kita download,
            kenapa pilih (min) karena ringan, kalo ingin yang lain bisa hapus min nya
</head>

<body>
     <script src="bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

lalu masukkan scrip ini