Gunakan heading untuk hierarki informasi. Konsistenkan ukuran dan jarak.
<!-- Headings -->
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
<!-- Display -->
<div class="display-6">Display 6</div>
<div class="display-5">Display 5</div>
<div class="display-4">Display 4</div>
<div class="display-3">Display 3</div>
<div class="display-2">Display 2</div>
<div class="display-1">Display 1</div>Ini adalah contoh paragraf dengan class .lead untuk teks yang lebih menonjol.
Paragraf biasa: sistem desain ini menggunakan skala tipografi yang nyaman dibaca pada perangkat apapun.
Teks kecil dan muted untuk keterangan atau hint.
<p class="lead">Ini adalah contoh paragraf dengan class <code>.lead</code> untuk teks yang lebih menonjol.</p>
<p>Paragraf biasa: sistem desain ini menggunakan skala tipografi yang nyaman dibaca pada perangkat apapun.</p>
<p class="small text-muted">Teks kecil dan <span class="text-muted">muted</span> untuk keterangan atau hint.</p>
<div class="row g-2">
<div class="col-12 col-md-4"><div class="p-2 text-start">.text-start</div></div>
<div class="col-12 col-md-4"><div class="p-2 text-center">.text-center</div></div>
<div class="col-12 col-md-4"><div class="p-2 text-end">.text-end</div></div>
</div>Anda dapat menggunakan mark untuk highlight, deleted dan strikethrough, inserted, underline, small, strong, dan emphasis.
Kode inline: const name = 'Rumah Jooocode'
Shortcut: tekan Ctrl + K untuk membuka Search.
<p>Anda dapat menggunakan <mark>mark</mark> untuk highlight <del>deleted</del> dan <u>underline</u>,<small>small</small>,<strong>strong</strong> dan ,<em>emphasis</em> </p>
<p>Kode inline: <code>const name = 'Rumah Jooocode'</code></p>
<p>Shortcut: <kbd>Ctrl</kbd> + <kbd>K</kbd></p>
<div class="text-lowercase">.text-lowercase</div>
<div class="text-uppercase">.text-uppercase</div>
<div class="text-capitalize">.text-capitalize</div><!-- Unordered -->
<ul>
<li>Item satu</li>
<li>Item dua</li>
<li>Item tiga</li>
</ul>
<!-- Ordered -->
<ol class="mb-0">
<li>Langkah satu</li>
<li>Langkah dua</li>
<li>Langkah tiga</li>
</ol>
<!-- Unstyled -->
<ul class="list-unstyled mb-0">
<li>Tanpa bullet</li>
<li>Lebih ringkas</li>
</ul>
<!-- Inline -->
<ul class="list-inline mb-0">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">/</li>
<li class="list-inline-item">Library</li>
</ul>“Bermimpilah setinggi langit maka tuhan akan memeluk mimpi-mimpi mu.”
<blockquote class="blockquote">
<p>"Bermimpilah setinggi langit maka tuhan akan memeluk mimpi-mimpi mu."</p>
<footer class="blockquote-footer">Sang Pemimpi</footer>
</blockquote><!-- Font Weight -->
<div class="fw-light">.fw-light</div>
<div class="fw-normal">.fw-normal</div>
<div class="fw-semibold">.fw-semibold</div>
<div class="fw-bold">.fw-bold</div>
<div class="fst-italic">.fst-italic</div>
<!-- Text Colors -->
<div>Default</div>
<div class="text-secondary">Secondary (brand)</div>
<div class="text-success">Success</div>
<div class="text-info">Info</div>
<div class="text-warning">Warning</div>
<div class="text-danger">Danger</div>
<!-- Badges -->
<span class="badge badge-outline">Default</span>
<span class="badge badge-soft-success">Success</span>
<span class="badge badge-soft-info">Info</span>
<span class="badge badge-soft-warning">Warning</span>
<span class="badge badge-soft-danger">Danger</span>Tipografi yang baik membantu pengguna memahami hierarki informasi dan meningkatkan keterbacaan.
Kamu dapat memanfaatkan utilitas Bootstrap seperti .lead, .text-muted, dan kelas heading untuk membuat struktur tulisan yang nyaman dibaca.
“Desain adalah tentang bagaimana sesuatu bekerja.”
// Contoh kode
const title = 'AdminToolkit';
console.log(title);<article>
<h2>Judul Artikel</h2>
<p class="lead">Ringkasan paragraf.</p>
<blockquote class="blockquote">...</blockquote>
<ul><li>Point</li></ul>
<pre><code>...</code></pre>
</article>