Mengenal Sizing Pada Bootstrap 4

Haloo teman-teman Dumet School, Kali ini saya akan membahas tentang Mengenal Sizing Pada Bootstrap 4 dimana sizing ini berhubungan untuk menentukan sebuah lebar dari suatu objek atau element serta menentukan suatu tinggi dari elemen tersebut. Teman-teman bisa langsung pelajari juga di link resminya yaitu di getbootstrap.com.

Oke langsung saja saya akan mengulas sedikit untuk dapat Mengenal Sizing Pada Bootstrap 4. Pertama yang akan saya jelaskan yaitu tentang class bootstrap untuk mengatur lebar dari suatu elemen. Berikut ini adalah contoh penulisan scriptnya.

    <div class="w-25 p-3 bg-primary";">Lebar 25%</div>
    <div class="w-50 p-3 bg-info">Lebar 50%</div>
    <div class="w-75 p-3 bg-secondary">Lebar 75%</div>
    <div class="w-100 p-3 bg-warning">Lebar 100%</div>
    <div class="w-auto p-3 bg-success">Lebar auto</div>

Tampilannya script diatas akan seperti pada gambar di bawah ini. W mendeklarasikan width dan disambung dengan simbol “-“ baru kemudian persentase dari lebarnya.

Dan berikut adalah penjelasan tentang class bootstrap untuk mengatur tinggi suatu elemen. Dimana h mendeklarasikan height lalu disambung dengan simbol “-“ lalu kemudian presentase dari tinggi. Di bawah ini contoh scriptnya ya teman-teman.

<div style="height: 150px; background-color: rgba(255,0,0,0.1);" class="p-3">
      <div class="h-25 d-inline-block bg-primary text-center" style="width: 120px;">Tinggi 25%</div>
      <div class="h-50 d-inline-block bg-info text-center" style="width: 120px;">Tinggi 50%</div>
      <div class="h-75 d-inline-block bg-secondary text-center" style="width: 120px;">Tinggi 75%</div>
      <div class="h-100 d-inline-block bg-warning text-center" style="width: 120px;">Tinggi 100%</div>
      <div class="h-auto d-inline-block bg-success text-center" style="width: 120px;">Tinggi auto</div>
</div>

Dan jika teman-teman buka di browser masing-masing maka akan tampil seperti pada gambar di bawah ini.

Disini teman-teman juga bisa menggunakan max width dan max height. Dan format penulisannya seperti di bawah ini.

<img class="mw-100" src=".../1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">

<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="mh-100 w-25 bg-primary">Max-height 100%</div>
</div>

Nah teman-teman bisa perhatikan value presentase untuk menentukan suatu lebar atau tinggi dari elemen atau objek tertentu. Dimana presentase yang disiapkan oleh bootstrap 4 adalah 25%, 50%, 75% dan 100% kemudian value auto. Teman-teman bisa memanfaatkan class ini untuk membantu membuat sebuah tampilan website yang lebih responsive. Dan di bootstrap 4 ini banyak class yang bisa sangat membantu kita dalam pembuatan website.

Demikian artikel tenatng Mengenal Sizing Pada Bootstrap 4. Semoga dapat bermanfaat dan selamat mencoba ya.

Kategori