Cara menggunakan font-weight bootstrap 5

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.

Table of Contents Show

Text Bootstrap 4
Text Untuk Quote
TUTORIAL MENARIK LAINNYA
Tutorial Bootstrap 4 #35 : Border Bootstrap 4
Tutorial Bootstrap 4 #34 : Tooltips Bootstrap 4
Tutorial Bootstrap 4 #33 : Toasts Bootstrap 4
Tutorial Bootstrap 4 #32 : Spinners Bootstrap 4

<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 blokquote ke kanan atau tengah dengan hanya menerapkan kelas-kelas text alignment .text-right atau .text-center pada elemen

.

Text Bootstrap 4 – Di tutorial bootstrap 4 bagian ke 6 ini kita akan belajar tentang class-class yang disediakan pada bootstrap 4 untuk diterapkan pada text.
Diwajibkan untuk membaca tutorial sebelumnya tentang cara penggunaan bootstrap jika teman-teman belum membacanya. dan disarankan kepada teman-teman yang belum mengikuti tutorial bootstrap 4 ini dari awal (bagian 1), sebaiknya membaca tutorial sebelumnya dulu.
Agar materi belajar bootstrap 4 nya lebih terarah dan terstruktur.
Text Bootstrap 4
Ada beberapa komponen yang akan di bahas pada Tutorial Bootstrap 4 #6 : Text Bootstrap 4 ini, di antaranya adalah tulisdan dalam bentuk paragraf, kemudian tulisan dalam bentuk quote.
Paragaf
Berikut contoh tampilan paragraf jika sudah terhubung dengan bootstrap.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="assets/css/bootstrap.css">
<title>Tutorial Heading Bootstrap 4 - www.malasngoding.com</title>
</head>
<body>

<center>
<h3>Tutorial Text Bootstrap 4</h3>
<h4><a href="https://www.malasngoding.com/text-bootstrap-4/">www.malasngoding.com</a></h4>
</center>

<div class="container">

<p>Ini contoh text yang <mark>ditebalkan</mark>.</p>
<p><del>Ini contoh text yang di coret.</del></p>
<p><u>Ini contoh text yang digaris bawahi</u></p>
<p><small>Ini contoh text berukuran kecil.</small></p>
<p><strong>Ini contoh text tebal.</strong></p>
<p><em>Ini contoh text miring.</em></p>

</div>

<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.js"></script>
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
dan coba jalankan.
text bootstrap 4
Sebenarnya untuk membuat paragraf seperti ini kita tidak harus menggunakan bootstrap. tapi di sini kita hanya ingin melihat bahwa jika menggunakan bootstrap, tampilan tulisan nya menjadi lebih bersih, karena secara default bootstrap sudah menggunakan jenis font yang berbeda (bukan Arial seperti default nya).
Tampilan text yang terhubung dengan bootstrap lebih rapi dibanding tampilan text yang halamnnya tidak terhubung dengan bootstrap.

Text Untuk Quote
Bootstrap 4 juga sudah menyediakan class-class untuk membuat tampilan text yang khusus seperti kutipan quote. perhatikan contoh berikut.
1
2
3
4

<blockquote class="blockquote">
<p>Jangan menjelaskan tentang dirimu kepada siapapun, karena yang menyukaimu tidak butuh itu. Dan yang membencimu tidak percaya itu.</p>
<footer class="blockquote-footer">Ali Bin Abi Thalib</footer>
</blockquote>
Untuk membuat tulisan quote, kita bisa menggunakan class blockquote. dan untuk tulisan keterangan nama pemilik quote nya kita bisa gunakan class blockquote-footer. seperti pada contoh di atas.
quote.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="assets/css/bootstrap.css">

<title>Tutorial Heading Bootstrap 4 - www.malasngoding.com</title>
</head>
<body>

<div class="container">

<center>
<h3>Tutorial Text Bootstrap 4</h3>
<h4><a href="https://www.malasngoding.com/text-bootstrap-4/">www.malasngoding.com</a></h4>
</center>

<br/>
<br/>

<blockquote class="blockquote">
<p>Jangan menjelaskan tentang dirimu kepada siapapun, karena yang menyukaimu tidak butuh itu. Dan yang membencimu tidak percaya itu.</p>
<footer class="blockquote-footer">Ali Bin Abi Thalib</footer>
</blockquote>

</div>

<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.js"></script>
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
Kita lihat hasilnya.
quote bootstrap 4
Gambar di atas adalah tampilan hasil dari contoh penggunaan class blockquote tadi.
Kita juga bisa mengubah posisi nya, jika teman-teman ingin tulisan nya ke tengah atau rata kanan bisa perhatikan contoh berikut.
1
2
3
4
5
6
7
8
9
10
11
<blockquote class="blockquote text-center">
<p>Jangan menjelaskan tentang dirimu kepada siapapun, karena yang menyukaimu tidak butuh itu. Dan yang membencimu tidak percaya itu.</p>
<footer class="blockquote-footer">Ali Bin Abi Thalib</footer>
</blockquote>

<hr>

<blockquote class="blockquote text-right">
<p>Jangan menjelaskan tentang dirimu kepada siapapun, karena yang menyukaimu tidak butuh itu. Dan yang membencimu tidak percaya itu.</p>
<footer class="blockquote-footer">Ali Bin Abi Thalib</footer>
</blockquote>
teman-teman tinggal menambahkan class text-center jika ingin tulisannya ke tengah, atau class text-right juga teman-teman ingin tulisannya rata kanan.
text quote bootstrap 4
Oke selesai.
Silahkan teman-teman bereksperimen agar lebih paham tentang penggunaan class bootstrap untuk membuat penulisan text dengan bentuk quote ini.
Pada tutorial bootstrap 4 selanjutnya kita akan masuk ke cara membuat list menggunakan bootstrap 4.
DEMO & Source Code

Incoming search terms:
https://www malasngoding com/text-bootstrap-4/
rata tengah pada bootstrap
Tutorial Bootstrap 4 #5 :
rata kirimkanan pada bootstrap
cara membuat text bold di boostrap
cara menambahkan teks di dalam class
membuat text link dengan bootstrap
boostrap rata kiri kanan font
bootstrap tulisan ke seblah kanna
cara mengatur rata atas dan rata bawah di boostrap
SHARE :
Diki Alfarabi Hadi
Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
Author's profile
All posts by Diki Alfarabi Hadi
Tags: blockquote, blockquote-footer, bootstrap 4 dasar untuk pemula, bootstrap alert, bootstrap class code, bootstrap font family, bootstrap font style, font bootstrap, font size bootstrap 4, font weight bootstrap, image with text bootstrap 4, output bootstrap, quote bootstrap, seri tutorial bootstrap 4, table bootstrap, template table bootstrap, text bootstrap 4, text color bootstrap, text justify bootstrap 4, tutorial bootstrap lengkap
Produk
Source Code Website Reservasi Kamar Hotel Dengan PHP dan MySQLi Rp 200,000
Source Code Aplikasi Pengajuan Cuti Karyawan Berbasis Website Rp 200,000
Source Code Toko Sport PHP dan MySQLi Rp 200,000
Source Code Sistem Informasi Kuesioner Berbasis Web Rp 200,000
Tutorial Terbaru
Tutorial Python # 13 : Jenis Operator Pada Python September 24, 2022
Membuat Laporan PDF Dengan PHP dan MySQLi September 3, 2022
Export Data ke Excel Dengan PHP dan MySQLi August 23, 2022
Membuat Select Option Dinamis Menggunakan Ajax August 17, 2022
Membuat QR Code Dengan PHP August 3, 2022
Toko Kami
SOCIAL
Malas Ngoding
TUTORIAL MENARIK LAINNYA
Bootstrap 4
Tutorial Bootstrap 4 #35 : Border Bootstrap 4
22 October 2019
Border Bootstrap 4 -Setelah sebelumnya dari tutorial bootstrap 4 bagian 1 sampai bagian 34, sudah dijelaskan tentang dasar-dasar dari bootstrap. Mulai dari pengenalan apa itu ...
Diki Alfarabi Hadi
Bootstrap 4
Tutorial Bootstrap 4 #34 : Tooltips Bootstrap 4
13 September 2019
Tooltips Bootstrap 4 – Selamat datang kembali di tutorial lengkap bootstrap 4 step by step untuk pemula sampai mahir di www.malasngoding.com. Setelah pada tutorial sebelumnya ...
Diki Alfarabi Hadi
Bootstrap 4
Tutorial Bootstrap 4 #33 : Toasts Bootstrap 4
9 September 2019
Toasts Bootstrap 4 – Setelah sebelumnya pada tutorial bootstrap dasar untuk pemula, Dibahas tentang spinners bootstrap 4, maka pada tutorial ini akan dibahas lanjutannya, yaitu ...
Diki Alfarabi Hadi
Bootstrap 4
Tutorial Bootstrap 4 #32 : Spinners Bootstrap 4
7 September 2019
Spinners Bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 dasar untuk pemula. setelah sebelumnya kita belajar tentang komponen scrollspy bootstrap, Untuk melanjutkan ...