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>

       </div>

        <div class="col-12 col-sm-6 col-lg-3 turun order-4">

         <div class="contoh ">3</div>

       </div>

       <div class="col-12 col-sm-6 col-lg-3 turun order-1">

         <div class="contoh ">4</div>

       </div>

angka berubah sesuai order, angka 1 berubah angka 4

Kalo belajar offset class / ofsite clas / ofseting

 <div class="container bordered">

      <div class="row" style="height: ;">

      <div class="col-3 turun ">

         <div class="contoh">1</div>

       </div>

       <div class="col-3 turun offset-md-4">

         <div class="contoh ">2</div>

       </div>

jarak akan secara otomatis, jika ukuran lebih kecil md tidak berlaku offset .

langsung belajar gutters / pading

      <div class="row" style="height: ;">

      <div class="col-12 col-sm-6 col-lg-3 g-0 ">

         <div class="contoh">1</div>

       </div>

       <div class="col-12 col-sm-6 col-lg-3 g-0 ">

         <div class="contoh ">2</div>

       </div>

        <div class="col-12 col-sm-6 col-lg-3 g-0 ">

         <div class="contoh ">3</div>

       </div>

       <div class="col-12 col-sm-6 col-lg-3 g-0">

         <div class="contoh ">4</div>

ini untuk semuanya, tapi kalau ingin ga penuh, harus pilh yang ataas

<div class="row g-0" style="height: ;">

      <div class="col-12 col-sm-6 col-lg-3 ">

         <div class="contoh">1</div>

       </div>

       <div class="col-12 col-sm-6 col-lg-3  ">

         <div class="contoh ">2</div>

       </div>

        <div class="col-12 col-sm-6 col-lg-3 ">

         <div class="contoh ">3</div>

       </div>

       <div class="col-12 col-sm-6 col-lg-3">

         <div class="contoh ">4</div>

Artikel Terkait: