Bootstrap 4 Teks/Tipografi
Bootstrap 4 Pengaturan Default
Bootstrap 4 menggunakan default
font-size16px, dan
line-height1,5.
Standarnya font-familyadalah "Helvetica Neue", Helvetica, Arial, sans-serif.
Selain itu, semua <p>elemen memiliki
margin-top: 0dan margin-bottom: 1rem(16px secara default).
<h1> - <h6>
Bootstrap 4 style heading HTML ( <h1>to
<h6>) dengan font-weight yang lebih tebal dan font-size yang ditingkatkan:
Contoh
h1 Bootstrap heading (2.5rem = 40px)
h2 Bootstrap heading (2rem = 32px)
h3 Bootstrap heading (1.75rem = 28px)
h4 Bootstrap heading (1.5rem = 24px)
h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)
Judul Tampilan
Judul tampilan digunakan untuk menonjol lebih dari judul normal (ukuran font lebih besar dan bobot font lebih ringan), dan ada empat kelas untuk dipilih: .display-1, .display-2, .display-3,.display-4
Contoh
Display 1
Display 2
Display 3
Display 4
<kecil>
Di Bootstrap 4 elemen HTML <small>digunakan untuk membuat teks sekunder yang lebih ringan di judul apa pun:
Contoh
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
<tanda>
Bootstrap 4 akan menata <mark>elemen HTML dengan warna latar belakang kuning dan beberapa padding:
Contoh
Use the mark element to highlight text.
<abbr>
Bootstrap 4 akan menata <abbr>elemen HTML dengan batas bawah putus-putus:
Contoh
The WHO was founded in 1948.
<blockquote>
Tambahkan .blockquotekelas ke a <blockquote>
saat mengutip blok konten dari sumber lain:
Contoh
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
<dl>
Bootstrap 4 akan menata <dl>elemen HTML dengan cara berikut:
Contoh
- Coffee
- - black hot drink
- Milk
- - white cold drink
<kode>
Bootstrap 4 akan menata <code>elemen HTML dengan cara berikut:
Contoh
The following HTML elements: span, section, and div defines a section in a document.
<kbd>
Bootstrap 4 akan menata <kbd>elemen HTML dengan cara berikut:
Contoh
Use ctrl + p to open the Print dialog box.
<pra>
Bootstrap 4 akan menata <pre>elemen HTML dengan cara berikut:
Contoh
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Lebih Banyak Kelas Tipografi
Kelas Bootstrap 4 di bawah ini dapat ditambahkan ke elemen HTML gaya lebih lanjut:
| Class | Description | Example |
|---|---|---|
.font-weight-bold |
Bold text | |
.font-weight-bolder |
Bolder text | |
.font-italic |
Italic text | |
.font-weight-light |
Light weight text | |
.font-weight-lighter |
Lighter weight text | |
.font-weight-normal |
Normal text | |
.lead |
Makes a paragraph stand out | |
.small |
Indicates smaller text (set to 80% of the size of the parent) | |
.text-left |
Indicates left-aligned text | |
.text-*-left |
Indicates left-aligned text on small, medium, large or xlarge screens | |
.text-break |
Prevents long text from breaking layout | |
.text-center |
Indicates center-aligned text | |
.text-*-center |
Indicates center-aligned text on small, medium, large or xlarge screens | |
.text-decoration-none |
Removes the underline from a link | |
.text-right |
Indicates right-aligned text | |
.text-*-right |
Indicates right-aligned text on small, medium, large or xlarge screens | |
.text-justify |
Indicates justified text | |
.text-monospace |
Monospaced text | |
.text-nowrap |
Indicates no wrap text | |
.text-lowercase |
Indicates lowercased text | |
.text-reset |
Resets the color of a text or a link (inherits the color from its parent) | |
.text-uppercase |
Indicates uppercased text | |
.text-capitalize |
Indicates capitalized text | |
.initialism |
Displays the text inside an <abbr> element in a slightly smaller font size |
|
.list-unstyled |
Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) |
|
.list-inline |
Places all list items on a single line (used together with
.list-inline-item on each <li> elements) |
|
.pre-scrollable |
Makes a <pre> element scrollable |
Referensi CSS Bootstrap 4 Lengkap
Untuk referensi lengkap semua kelas CSS yang tersedia di Bootstrap 4, kunjungi Referensi Semua Kelas Bootstrap 4 kami .