Alat Bantu Bootstrap 5

Kelas Utilities / Helper

Bootstrap 5 memiliki banyak kelas utility/helper yang dapat digunakan untuk merapikan gaya elemen tanpa memerlukan kode CSS.

Border

Gunakan kelas border untuk menambah atau menghapus border elemen:

Examples

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Try It Yourself

Lebar border

Using .border-1 ke .border-5 Ganti lebar border dengan:

Examples

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

Try It Yourself

Warna border

Gunakan kelas warna border konteks untuk menambahkan warna ke border:

Examples

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

Try It Yourself

Rounding border

Using rounded Tambahkan rounding ke elemen kelas:

Examples

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

Try It Yourself

Gerakan dan menghapus gerakan

Using .float-end Kelas menggerakkan ke kanan elemen, atau menggunakan .float-start Bergerak ke kiri dan menggunakan .clearfix Kelas menghapus gerakan:

Examples

<div class="clearfix">
  <span class="float-start">Bergerak ke kiri</span>
  <span class="float-end">Bergerak ke kanan</span>
</div>

Try It Yourself

Gerakan responsif

Menggerakkan elemen ke kiri atau ke kanan berdasarkan lebar layar menggunakan kelas gerakan responsif (.float-*-left|right) di mana * adalah:

  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

Examples

<div class="float-sm-end">Bergerak ke kanan di layar kecil atau lebar lebih besar</div><br>
<div class="float-md-end">Bergerak ke kanan di layar menengah atau lebar lebih besar</div><br>
<div class="float-lg-end">Bergerak ke kanan di layar besar atau lebar lebih besar</div><br>
<div class="float-xl-end">Bergerak ke kanan di layar super besar atau lebar lebih besar</div><br>
<div class="float-xxl-end">Bergerak ke kanan di layar super besar atau lebar lebih besar</div><br>
<div class="float-none">Tidak bergerak ke kiri atau ke kanan</div>

Try It Yourself

Pengaturan tengah

Using .mx-auto Elemen berada di tengah (tambahkan margin-left dan margin-right: auto):

Examples

<div class="mx-auto bg-warning" style="width:150px">Tengah</div>

Try It Yourself

Lebar

Gunakan kelas w-* (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）Tetapkan lebar elemen:

Examples

<div class="w-25 bg-warning">Lebar 25%</div>
<div class="w-50 bg-warning">Lebar 50%</div>
<div class="w-75 bg-warning">Lebar 75%</div>
<div class="w-100 bg-warning">Lebar 100%</div>
<div class="w-auto bg-warning">Lebar otomatis</div>
<div class="mw-100 bg-warning">Lebar maksimal 100%</div>

Try It Yourself

Tinggi

Gunakan kelas h-* (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）Tetapkan tinggi elemen:

Examples

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Tinggi 25%</div>
  <div class="h-50 bg-warning">Tinggi 50%</div>
  <div class="h-75 bg-warning">Tinggi 75%</div>
  <div class="h-100 bg-warning">Tinggi 100%</div>
  <div class="h-auto bg-warning">Tinggi otomatis</div>
  <div class="mh-100 bg-warning" style="height:500px">Tinggi maksimal 100%</div>
</div>

Try It Yourself

Jarak

Bootstrap 5 memiliki berbagai program kelas margin dan padding yang responsif. Mereka cocok untuk semua batas resolusi:

  • xs (<= 576px)
  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

Format penggunaan kelas ini adalah:{property}{sides}-{size} Untuk xs，dan {property}{sides}-{breakpoint}-{size} Untuk sm、md、lg、xl dan xxl。

property Adalah salah satu dari berikut:

  • m - Mengatur margin
  • p - Mengatur padding

sides Adalah salah satu dari berikut:

  • t - Mengatur margin-top or padding-top
  • b - Mengatur margin-bottom or padding-bottom
  • s - Mengatur margin-left or padding-left
  • e - Mengatur margin-right or padding-right
  • x - Mengatur bersamaan padding-left dan padding-right or margin-left dan margin-right
  • y - Mengatur bersamaan padding-top dan padding-bottom or margin-top dan margin-bottom
  • blank - Mengatur di empat sisi elemen margin or padding

size Adalah salah satu dari berikut:

  • 0 - Buat margin or padding Ditetapkan sebagai 0
  • 1 - Buat margin or padding Ditetapkan sebagai .25rem
  • 2 - Buat margin or padding Ditetapkan sebagai .5rem
  • 3 - Buat margin or padding Ditetapkan sebagai 1rem
  • 4 - Buat margin or padding Ditetapkan sebagai 1.5rem
  • 5 - Buat margin or padding Ditetapkan sebagai 3rem
  • auto - Buat margin Ditetapkan sebagai auto

Examples

<div class="pt-4 bg-warning">Saya hanya memiliki padding atas (1.5rem)</div>
<div class="p-5 bg-success">Saya memiliki padding di semua sisi (3rem)</div>
<div class="m-5 pb-5 bg-info">Saya memiliki margin di semua sisi (3rem) dan padding bawah (3rem)</div>

Try It Yourself

Contoh jarak yang lebih banyak

.m-# / m-*-# Margin semua sisi Coba
.mt-# / mt-*-# Margin atas Coba
.mb-# / mb-*-# Margin bawah Coba
.ms-# / ms-*-# Margin kiri Coba
.me-# / me-*-# Margin kanan Coba
.mx-# / mx-*-# Padding kiri dan kanan Coba
.my-# / my-*-# Margin atas dan bawah Coba
.p-# / p-*-# Padding semua sisi (isikan) Coba
.pt-# / pt-*-# Padding atas Coba
.pb-# / pb-*-# Padding bawah Coba
.ps-# / ps-*-# Padding kiri Coba
.pe-# / pe-*-# Padding kanan Coba
.py-# / py-*-# Padding atas dan bawah Coba
.px-# / px-*-# Padding kiri dan kanan Coba

Anda dapat melihat di Panduan Unit CSS Baca lebih lanjut tentang rem dan ukuran satuan berbeda di.

Bayangan

Gunakan shadow- Kelas menambahkan bayangan pada elemen:

Examples

<div class="shadow-none p-4 mb-4 bg-light">Tidak ada bayangan</div>
<div class="shadow-sm p-4 mb-4 bg-white">Gelanggang kecil</div>
<div class="shadow p-4 mb-4 bg-white">Gelanggang standar</div>
<div class="shadow-lg p-4 mb-4 bg-white">Gelanggang besar</div>

Try It Yourself

Penyejajaran vertikal

Gunakan align- Kelas mengubah penyejajaran elemen (hanya berlaku untuk elemen inline, inline-block, inline-table, dan sel tabel):

Examples

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

Try It Yourself

Aspek rasio

Buat video atau slideshow yang responsif berdasarkan lebar induk.

Tambahkan .ratio Kelas dengan aspek rasio yang dipilih .aspect-ratio-* Tambahkan ke elemen induk dan tambahkan media yang disematkan (video atau iframe):

Examples

<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

Try It Yourself

Kenyataan

Using .visible or .invisible Kelas dapat mengendalikan kenampakan elemen:

Keterangan:Kelas ini tidak akan mengubah nilai CSS display. Mereka hanya menambahkan visibility:visible or visibility: hidden.

Examples

<div class="visible">I am visible.</div>
<div class="invisible">I am invisible.</div>

Try It Yourself

Close Icon

Using .btn-close Classes can set the style of the close icon. Usually used in alert boxes and modals.

Examples

<button type="button" class="btn-close"></button>

Try It Yourself

Screen Reader

Using .visually-hidden Classes can hide elements on all devices except for screen readers:

Examples

<span class="visually-hidden">I will be hidden on all screens except for screen readers.</span>

Try It Yourself

Colors

As described in the 'Color' chapter, the following list shows all text and background color classes:

Classes for text colors are:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body(Default body color/usually black)
  • .text-light

Examples

Try It Yourself

Contextual text classes can also be used for links:

Examples

Try It Yourself

You can also use .text-black-50 or .text-white-50 classes to add 50% opacity to black or white text:

Examples

Try It Yourself

Background Color

Classes for background colors are:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Please note that the background color will not set the text color, so in some cases, you need to use them with .text-* Classes should be used together.

Examples

Try It Yourself