Lebak Cyber Tips dan Trik Komputer
Tutorial Typography Bootstrap 5
lebakcyber.net – Tutorial Typography Bootstrap 5. Oke jadi pada pembahasan kali ini kita akan membahas mengenai Typography yang bisa kita gunakan pada framework Bootstrap 5.
Typography sendiri merupakan sebuah seni untuk memilih dan mengatur tata letak dari sebuah teks pada ruang yang tersedia agar bisa mendapatkan kenyamanan pada saat membaca menjadi senyaman mungkin.
Jadi pada postingan mengenai Typography kali ini yang akan kita implementasikan di Bootstrap 5 ini kita akan membahas mengenai :
- Heading Pada Bootstrap 5
- Display Pada Bootstrap 5
- Lead Pada Bootstrap 5
- Font Style Pada Bootstrap 5
- Text Decoration Pada Bootstrap 5
- Blockquote Pada Bootstrap 5
Jadi itulah beberapa pembahasan yang akan kita pelajari bersama-sama pada tutorial Bootstrap 5 kali ini.
Heading Pada Bootstrap 5
Heading pada bootstrap 5 sebenarnya sama saja penggunaannya seperti heading yang ada di HTML, namun dengan menggunakan Bootstrap 5, kita bisa membuat heading tersebut menjadi lebih responsive. Untuk membuat heading dengan menggunakan Bootstrap 5 silahkan ketikan perintah dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lebakcyber.net - Tutorial Bootstrap 5</title>
<!-- CSS Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<!-- JavaScript Lokal -->
<script src="js/bootstrap.min.js"></script>
<!-- 1. Heading -->
<h3 class="text-primary">Heading di Bootstrap 5</h3>
<h1 class="h1">Contoh Heading 1</h1>
<h2 class="h2">Contoh Heading 2</h2>
<h3 class="h3">Contoh Heading 3</h3>
<h4 class="h4">Contoh Heading 4</h4>
<h5 class="h5">Contoh Heading 5</h5>
<h6 class="h6">Contoh Heading 6</h6>
<br>
</body>
</html>
Bisa kita lihat pada tag heading kita menambahkan class heading (<h1 class=”h1″>) yang ada pada Bootstrap yang bisa kita sesuaikan jenis headingnya sesuai dengan yang kita inginkan.
Simpan perintah tersebut dengan nama index.html lalu buka pada browser. Nanti heading yang sudah kita tambahkan class Bootstrap akan memiliki sifat responsive, hasilnya seperti pada gambar dibawah ini :
Display Pada Bootstrap 5
Display pada Bootstrap 5 biasanya digunakan pada bagian headline dari suatu artikel atau postingan, selain itu ukuran dari display juga bisa lebih besar dari heading. Display juga bisa kita gunakan pada tag heading ataupun paragraf.
Untuk menggunakan Display pada bootstrap 5, silahkan masukan perintah dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lebakcyber.net - Tutorial Bootstrap 5</title>
<!-- CSS Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<!-- JavaScript Lokal -->
<script src="js/bootstrap.min.js"></script>
<!-- 1. Heading -->
<h3 class="text-primary">Display di Bootstrap 5</h3>
<h1 class = "display-1">Display-1</h1> <!-- Contoh Display pada heading 1 -->
<p class = "Display-2">Display-2</p> <!-- Contoh Display Pada Paragraf -->
<p class = "Display-3">Display-3</p> <!-- Contoh Display Pada Paragraf -->
<p class = "Display-4">Display-4</p> <!-- Contoh Display Pada Paragraf -->
<p class = "Display-5">Display-5</p> <!-- Contoh Display Pada Paragraf -->
<p class = "Display-6">Display-6</p> <!-- Contoh Display Pada Paragraf -->
<br>
</body>
</html>
Bisa kita lihat kalau pada tag heading dan juga beberapa tag paragraf sudah kita tambahkan class display untuk menggunakan display yang sudah disediakan oleh Bootstrap 5. Simpan file tersebut dengan nama index.html lalu buka pada browser, nanti hasilnya akan seperti pada gambar dibawah ini :
Lead Pada Bootstrap 5
Lead biasanya digunakan untuk menonjolkan sebuah paragraf dari artikel yang kita buat. Misalnya saja kita punya dua buah paragraf dan kita ingin salah satu paragraf dibuat lebih menonjol, maka kita bisa menggunakan fitur Lead yang ada pada Bootstrap 5 tersebut.
Agar lebih jelas, silahkan teman-teman ketikan perintah dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lebakcyber.net - Tutorial Bootstrap 5</title>
<!-- CSS Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<!-- JavaScript Lokal -->
<script src="js/bootstrap.min.js"></script>
<h3 class="text-primary">Lead di Bootstrap 5</h3>
<p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem ducimus aliquid commodi consequuntur neque eaque, perferendis, repudiandae expedita iusto, voluptates alias cum non! Iste</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia recusandae omnis, deserunt, quisquam quo aspernatur labore consequatur sint voluptatum perferendis aut fugiat, inventore maxime debitis similique.</p>
</body>
</html>
Pada contoh perintah diatas, kita memberikan class lead pada paragraf pertama. Jadi kita membuat paragraf pertama menjadi lebih menonjol. Silahkan teman-teman buka filenya melalui browser dan nanti hasilnya akan seperti pada gambar dibawah ini :
Font Style Pada Bootstrap 5
Font Style pasti menjadi salah satu class yang nantinya paling sering kita gunakan, karena dengan menggunakan font style kita bisa merubah-ubah font menjadi tebal, miring, huruf besar, huruf kecil dan sebagainya.
Untuk lebih jelasnya silahkan buat sebuah file index.html baru lalu masukan perintah dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lebakcyber.net - Tutorial Bootstrap 5</title>
<!-- CSS Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<!-- JavaScript Lokal -->
<script src="js/bootstrap.min.js"></script>
<h3 class="text-primary">Font Style di Bootstrap 5</h3>
<p class = "fw-bold">Contoh teks tebal</p> <!-- Membuat huruf menjadi tebal -->
<p class = "fw-normal">Contoh text Normal</p> <!-- Membuat huruf menjadi normal (gak ada bedanya hahahah)-->
<p class = "fw-light">Contoh Teks Tipis weight text.</p> <!-- Membuat huruf menjadi tipis -->
<p class = "fst-italic">Contoh teks miring / italic</p> <!-- Membuat huruf menjadi miring -->
<p class = "text-lowercase">Contoh text lowercase</p> <!-- Membuat huruf menjadi huruf kecil semua -->
<P class = "text-uppercase">Contoh text uppercase</P> <!-- Membuat huruf menjadi huruf besar semua -->
<p class = "text-capitalize">contoh teks capitalize</p> <!-- Membuat awalan huruf menjadi kapital -->
</body>
</html>
Bisa kita lihat pada perintah diatas, kita menambahkan beberapa class font yang bisa kita gunakan sesuai dengan kebutuhan. Silahkan buka file tersebut melalui browser dan nanti tampilannya akan seperti pada gambar dibawah ini :
Text Decoration Pada Bootstrap 5
Dengan menggunakan text decoration, kita bisa memberikan dekorasi pada teks yang ada pada website yang sedang kita buat, misalnya memberikan garis bawah atau underline atau misalnya memberikan dekorasi teks yang dicoret.
Sekarang langsung saja kita coba untuk praktekan, silahkan buat sebuah file index.html baru lalu silahkan teman-teman masukan perintah dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lebakcyber.net - Tutorial Bootstrap 5</title>
<!-- CSS Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<!-- JavaScript Lokal -->
<script src="js/bootstrap.min.js"></script>
<h3 class="text-primary">Text Decoration di Bootstrap 5</h3>
<br>
<p class="text-decoration-underline">Teks ini memiliki garis dibawahnya.</p>
<p class="text-decoration-line-through">Ini contoh teks yang dicoret.</p>
</body>
</html>
Pada perintah diatas bisa kita lihat kalau kita memasukan text decoration underline untuk memberikan garis bawah pada sebuah teks dan juga kita menambahkan text decoration line through untuk memberikan kesan kalau teks tersebut dicoret, hasilnya seperti pada gambar dibawah ini :
Blockquote Pada Bootstrap 5
Fitur Blockquote biasanya digunakan pada saat ingin memasukan sebuah kutipan dari sebuah teks, dan di Bootstrap 5 juga sudah menyediakan class Blockquote agar kutipan tersebut bisa menjadi responsive.
Silahkan teman-teman buat sebuah file index.html baru untuk mempraktekan cara membuat blockquote pada bootstrap 5 ini lalu masukan perintah seperti dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lebakcyber.net - Tutorial Bootstrap 5</title>
<!-- CSS Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<!-- JavaScript Lokal -->
<script src="js/bootstrap.min.js"></script>
<h3 class="text-primary text-center">Blockquote di Bootstrap 5</h3>
<br>
<blockquote class="blockquote">Karena Ilmu Pengetahuan Seharusnya Gratis</blockquote>
<figcaption class="blockquote-footer">
<cite>lebakcyber.net</cite>
</figcaption>
</body>
</html>
Pada perintah diatas kita memasukan class blockquote dan juga menambahkan class blockquote-footer untuk memberikan kutipan di bagian bawahnya. Sekarang silahkan buka file tersebut melalui browser lalu nanti hasilnya akan seperti pada gambar dibawah ini :
Oke jadi seperti itulah beberapa cara bagaimana menggunakan Typography di Bootstrap 5. Semoga tutorial sederhana ini bisa bermanfaat bagi teman-teman yang sedang belajar atau mencari tutorial mengenai Bootstrap 5.
Jangan lupa untuk selalu berkunjung ke Lebakcyber.net untuk mendapatkan tutorial mengenai Bootstrap lainnya, terima kasih.
