Menggunakan Heading
Kalian dapat mendefinisikan semua judul HTML, <h1> hingga <h6> – Dengan cara yang sama seperti kalian mendefinisikan dalam dokumen HTML sederhana. kalian juga dapat menggunakan kelas heading .h1 hingga .h6 pada elemen lain, jika kalian ingin menerapkan style pada teks elemen sama seperti heading.
<h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6>
Output dari contoh di atas akan terlihat seperti ini:
Customize Heading
Selain itu, kalian dapat menggunakan tag <small> dengan kelas .text-mute untuk menampilkan teks sekunder dari sembarang judul dalam variasi yang lebih kecil dan lebih ringan. Berikut contohnya:
<h2>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h2>
Output dari contoh di atas akan terlihat seperti ini:
Menampilkan Heading
Bootstrap 4 memperkenalkan judul tampilan yang dapat digunakan saat kalian membutuhkan judul yang menonjol. Judul tampilan ditampilkan dengan font-size yang lebih besar tetapi font-weight lebih ringan.
Tersedia empat judul tampilan berbeda. Berikut ini contohnya:
<h1 class="display-1">Display Heading 1</h1> <h1 class="display-2">Display Heading 2</h1> <h1 class="display-3">Display Heading 3</h1> <h1 class="display-4">Display Heading 4</h1>
Output dari contoh di atas akan terlihat seperti ini:
Menggunakan Paragraph
Font-size default global Bootstrap adalah 1rem (biasanya 16px), dengan line-height 1,5. Ini diterapkan pada <body> dan semua paragraf. Selain itu, margin bawah setengah tinggi garis mereka (10px secara default) diterapkan ke semua paragraf yaitu elemen <p>.
Kalian juga dapat membuat paragraf lebih menonjol dengan menambahkan kelas .lead di atasnya.
<p>This is how a normal paragraph looks like in Bootstrap.</p> <p class="lead">This is how a paragraph stands out in Bootstrap.</p>
Kode HTML dalam contoh di atas akan menghasilkan hasil sebagai berikut:
Kalian dapat dengan mudah menyelaraskan (alignment) teks ke kiri, kanan, dan tengah di dalam paragraf menggunakan kelas text alignment.
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p>
Kalian juga dapat menyelaraskan teks berdasarkan ukuran layar menggunakan kelas responsive text alignment. Kelas-kelas ini menggunakan viewport width breakpoint yang sama dengan sistem grid.
<p class="text-sm-left">Text aligned to left on small or wider viewports.</p> <p class="text-md-left">Text aligned to left on medium or wider viewports.</p> <p class="text-lg-left">Text aligned to left on large or wider viewports.</p> <p class="text-xl-left">Text aligned to left on extra-large or wider viewports.</p>
Format Text
Kalian bebas menggunakan tag pemformatan teks seperti <strong>, <i>, <small> untuk membuat teks kalian bold, italic, small dan sebagainya, dengan cara yang sama seperti yang kalian lakukan dalam HTML sederhana.
<p><b>This is bold text</b></p> <p><code>This is computer code</code></p> <p><em>This is emphasized text</em></p> <p><i>This is italic text</i></p> <p><mark>This is highlighted text</mark></p> <p><small>This is small text</small></p> <p><strong>This is strongly emphasized text</strong></p> <p>This is <sub>subscript</sub> and <sup>superscript</sup></p> <p><ins>This text is inserted to the document</ins></p> <p><del>This text is deleted from the document</del></p>
Output dari contoh di atas akan terlihat seperti ini:
Text Transformation
Kalian juga dapat mengubah teks menjadi huruf kecil, huruf besar atau membuatnya menjadi huruf besar kapital.
<p class="text-lowercase">The quick brown fox jumps over the lazy dog.</p> <p class="text-uppercase">The quick brown fox jumps over the lazy dog.</p> <p class="text-capitalize">The quick brown fox jumps over the lazy dog.
Output dari contoh di atas akan terlihat seperti ini:
Pewarnaan Text
Warna adalah metode yang sangat baik untuk menyampaikan informasi penting dalam desain situs sebuah web.
Bootstrap memiliki beberapa kelas utilitas penekanan yang dapat digunakan untuk tujuan ini seperti menampilkan pesan sukses dalam warna hijau, warning atau pesan error dalam warna merah, dll.
<p class="text-primary">Primary: Please read the instructions carefully before proceeding.</p> <p class="text-secondary">Secondary: This is featured has been removed from the latest version.</p> <p class="text-success">Success: Your message has been sent successfully.</p> <p class="text-info">Info: You must agree with the terms and conditions to complete the sign up process.</p> <p class="text-warning">Warning: There was a problem with your network connection.</p> <p class="text-danger">Danger: An error has been occurred while submitting your data.</p> <p class="text-muted">Muted: This paragraph of text is grayed out.</p>
Output dari contoh di atas akan terlihat seperti ini:
Styling Blockquotes
Kalian juga dapat memberikan tampilan yang cantik pada blockquotes kalian – Cukup tentukan blockquotes menggunakan elemen standar <blockquote> dan bootstrap style sheet akan melakukan sisanya.
Selain itu, untuk mengidentifikasi sumber, kalian dapat menambahkan elemen <footer> dengan class .blockquote-footer, dan membungkus nama sumbernya di <cite>, seperti ini:
<blockquote class="blockquote">
<p class="mb-0">The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.</p>
<footer class="blockquote-footer">by <cite>Albert Einstein</cite></footer>
</blockquote>
Output dari contoh di atas akan terlihat seperti ini:
Kalian juga dapat menyelaraskan blokquote ke kanan atau tengah dengan hanya menerapkan kelas-kelas text alignment .text-right atau .text-center pada elemen <blockquote>.
