Mengenal Bootstrap Typografi pada Bootstrap 4 – Pasa kesempatan kali ini saya masih akan membahas tentang bootstrap. Sebenarnya harusnya ini saya posting di awal tapi karena sudah terlanjur jadi tidak apa-apa daripada tidak sama sekali. Kali ini saya akan membahas tentang typhografi yag ada pada bootstrap. Ada banyak macamnya oleh sebab itu kita akan bahas satu persatu.
Seperti yang sudah-sudah saya selalu jelaskan diawal pasti kita perlu librari css dari bootstrap. Pada postingan ini saya contohkan dengan menambahkan baris dibawah pada tag <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
Saya menggunakan css online karena hanya keperluan demo saja. Jika sobat ingin menggunakan untuk keperluan development maka sobat harus mendownloadnya terlebih dahulu atau sobat bisa mendownloadnya pada akhir postingan ini bersama dengan project yang dibuat pada postingan ini.
1. Heading
Kita bisa membuat heading menggunakan elemen HTML seperti dibawah
<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>
Atau kita bisa membuatnya pada elemen paragraph dan menambahkan class heading seperti dibawah
<p class="h1">h1. Bootstrap heading</p> <p class="h2">h2. Bootstrap heading</p> <p class="h3">h3. Bootstrap heading</p> <p class="h4">h4. Bootstrap heading</p> <p class="h5">h5. Bootstrap heading</p> <p class="h6">h6. Bootstrap heading</p>
hasilnya akan sama saja seperti dibawah
Jika sobat ingin membuat heading super besar maka sobat bisa menambahkan class .display seperti contoh dibawah
<h1 class="display-1">Display 1</h1> <h1 class="display-2">Display 2</h1> <h1 class="display-3">Display 3</h1> <h1 class="display-4">Display 4</h1>
Hasilnya adalah sebagai berikut
Sobat juga bisa menambahkan tulisan kecil dengan tulisan abu-abu pada tag heading, cara penulisannya adalah sebagai berikut
<h3> Judul Utama <small class="text-muted">Judul kecil dengan tulisan abu-abu</small> </h3>
Tampilannya
2. Elemen teks
Ada banyak elemen teks yang bisa digunakan, seperti dalam word yaitu kita bisa membuatnya menjadi bols, italic, underline, highlight , dll. Contoh penggunaannya adalah sebagai berikut
<p>You can use the mark tag to <mark>highlight</mark> text.</p> <p><del>This line of text is meant to be treated as deleted text.</del></p> <p><s>This line of text is meant to be treated as no longer accurate.</s></p> <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> <p><u>This line of text will render as underlined</u></p> <p><small>This line of text is meant to be treated as fine print.</small></p> <p><strong>This line rendered as bold text.</strong></p> <p><em>This line rendered as italicized text.</em></p>
Tampilannya :
3. Text Aligment
Sama seperti word yang memiliki text aligment, pada bootstrap juga ada textalignment jadi sobat jika sudah menggunakan bootstrap tidak perlu lagi ya bikin cssnya sendiri karena tinggal pakai saja. Cara pemakaiannya adalah sebagai berikut
<p class="text-left"><b>Left aligned text</b> on all viewport sizes.</p> <p class="text-center"><b>Center aligned text</b> on all viewport sizes.</p> <p class="text-right"><b>Right aligned text</b> on all viewport sizes.</p> <p class="text-justify"><b>Justified text.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p class="text-nowrap"><b>No wrap text.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p> <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p> <p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p> <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
Hasil :
4. Text wrapping and overflow
Jika sobat ingin memotong tulisan secara otomatis bootstrap juga sudah menyediakan text wrapping dan memotong kata yang terlalu panjang, cara penggunaannya adalah sebagai berikut
<div class="text-nowrap" style="width: 8rem;">
This text should overflow the parent.
</div>
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
This text should overflow the parent.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
This text should overflow the parent.
</span>
<div class="row">
<div class="col-6">
<div class="badge badge-primary text-wrap" style="width: 6rem;">
Ini adalah teks panjang yang akan terpotong
</div>
</div>
</div>
<p class="text-break">teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
Tampilannya :
5. Text Case
Jika sobat ingin memaksa teks yang ingin ditampilkan pada website itu harus kecil semua, besar semua atau bisa capitalize seperti firut yang ada pada Microsoft Word maka sobat bisa menggunakan kode dibawah
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">CapiTaliZed text.</p>
Hasilnya :
6. Warna Teks
Jika sobat ingin mengganti warna teks, bootstrap sudah menyediakannya jadi sobat bisa langsung menggunakannya saja dengan memanggil classnya. Jadi sobat tidak perllu membuat css sendiri kecuali memang warna yang sobat inginkan tidak ada dalam list dibawah. Penulisannya adalah sebagai berikut
<p class="text-primary">.text-primary</p> <p class="text-secondary">.text-secondary</p> <p class="text-success">.text-success</p> <p class="text-danger">.text-danger</p> <p class="text-warning">.text-warning</p> <p class="text-info">.text-info</p> <p class="text-light bg-dark">.text-light</p> <p class="text-dark">.text-dark</p> <p class="text-muted">.text-muted</p> <p class="text-white bg-dark">.text-white</p>
Hasil :
7. Backgrond color
Selain mengganti warna teks sobat juga bisa mengganti warna latarnya atau background color, caranya adalah sebagai berikut
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div> <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div> <div class="p-3 mb-2 bg-success text-white">.bg-success</div> <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div> <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div> <div class="p-3 mb-2 bg-info text-white">.bg-info</div> <div class="p-3 mb-2 bg-light text-dark">.bg-light</div> <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div> <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
Hasil :
8. Blockquote
Penulisan Blockquote dalam bootstrap sangat mudah dan bisa juga dipadukan dengan text aligment, caranya yaitu
<h5 class="bg-dark text-white" align="center">Blockquote tanpa footer</h5> <blockquote class="blockquote"> <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote> <h5 class="bg-dark text-white" align="center">Blockquote dengan footer</h5> <blockquote class="blockquote"> <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> <h5 class="bg-dark text-white" align="center">Blockquote align center</h5> <blockquote class="blockquote text-center"> <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> <h5 class="bg-dark text-white" align="center">Blockquote align right</h5> <blockquote class="blockquote text-right"> <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>
Hasil
9. Unstyled Lists
Bootsrtrap juga menyediakan class .list-unstyled, jika sobat ingin membuat list tapi tanpa simbol dot atau yang lainnya, cara penggunaanya adalah sebagai berikut
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
10. Inline Lists
Inline list ini biasa digunakan saat sobat membuat navigation menu. Jadi bentuknya list namun tetap dalam satu baris dan tentunya ini bisa digabungkan dengan apa saja sesuai kreasi sobat. Cara penggunaannya adalah sebagai berikut
<ul class="list-inline"> <li class="list-inline-item">Lorem ipsum</li> <li class="list-inline-item">Phasellus iaculis</li> <li class="list-inline-item">Nulla volutpat</li> </ul>
Hasil :
11. Description list alignment
List bentuk ini sangat berguna sekal ketimbang sobat membuatnya menggunakan tabel karena memang banyak programmer yang mengakalinya dengan table no border untuk membuat list ini, cara penggunaannya adalah sebagai berikut
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
Hasil :
Dari contoh-contoh diatas tentunya bisa digabung-gabungkan sesuai kreasi sobat. Atau bisa juga digabungkan dengan fitu lainnya pada bootstrap.
Artikel Tentang Bootstrap Lainnya :
Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah
Macam-macam Form Input pada HTML dan Bootstrap
Cara Membuat SweetAlert dan Macam-Macamnya pada PHP
Membuat Bootstrap Modal dan Animasinya pada PHP
Membuat Badges Menggunakan Bootstrap 4
Membuat Alert pada HTML menggunakan Bootstrap 4
Menggunakan Popover pada Elemen HTML dan Bootstrap 4
Menggunakan Tooltip pada HTML dan Bootstrap 4
Sekian postingan saya tentang Mengenal Bootstrap Typography pada HTML dan Bootstrap 4. Apabila ada kesalahan saya mohon maaf dan jika ada pertanyaan bisa tinggalkan pada kolom komentar dibawah. Sampai ketemu lagi pada postingan selanjutnya.
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :