Tutorial Bootstrap 4

Tutorial Belajar Bootstrap 4 Part 7 – Text/Typography pada bootstrap

Selamat datang lagi dalam tutorial warung belajar, dalam tutorial kali ini kita masih melanjutkan pembahasan mengenai bootstrap 4 yaitu mengenai Text/Typography.

pada bootstrap 4 terdapat beberapa class yang bisa anda gunakan untuk mengatur tampilan dari text pada tampilan web, selain itu ada beberapa perbedaan tampilan default text ketika menggunakan bootstrap 4 ini,

baik kita akan bahas satu persatu mengenai text/typography dalam bootstrap 4.

 

Pengaturan Standart text pada bootstrap 4

Bootstrap 4 memiliki beberapa standart style pada text ketika digunakan di halaman web, antara lain :

  • Default ukuran font yang digunakan adalah 16 pixel dan line-height 1.5
  • Default font-family yang digunakan adalah “Helvetica Neue”, Helvetica, Arial, sans-serif.
  • seluruh objek yang menggunakan tag <p> memiliki margin-top: 0 dan margin-bottom: 1rem (16 pixel secara default).

 

 

Ukuran <h1> – <h6>

Style heading 1 – heading 6 dalam bootstrap 4, silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama heading_boostrap.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut ini :

Keterangan :

  • Heading ditampilkan sesuai dengan ukuran yang telah ditetapkan pada bootstrap 4
  • h1 Bootstrap heading memiliki ukuran (2.5rem = 40px)
  • h2 Bootstrap heading memiliki ukuran (2rem = 32px)
  • h3 Bootstrap heading memiliki ukuran (1.75rem = 28px)
  • h4 Bootstrap heading memiliki ukuran (1.5rem = 24px)
  • h5 Bootstrap heading memiliki ukuran (1.25rem = 20px)
  • h6 Bootstrap heading memiliki ukuran (1rem = 16px)
  • anda juga akan menemukan hasil text yang ditampilkan lebih kecil ketika menggunakan tag bawaan html yaitu tag <small>

 

 

Display Headings Bootstrap 4

Display Headings adalah fitur bootstrap 4 yang digunakan untuk menampilkan heading, ukuran display heading ini berbeda dengan heading bawaan HTML <h1> – <h6>.

Display headings  memiliki ukuran font yang lebih besar, dan font yang yang lebih tipis, display headings bootstrap bisa digunakan dengan menggunakan class .display-1,.display-2,.display-3,.display-4

Class .display-1 adalah yang paling besar, dan .display-4 adalah yang paling kecil

Untuk contoh silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama display_heading.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

  • Terlihat perbedaan dimasing – masing class display-1 hingga display-4, font ditampilan dengan ukuran yang lebih besar dan lebih tipis

 

 

 

Beberapa style tag pada bootstrap 4

Setelah kita membahas beberapa tag yang mengatur bagian heading, berikutnya kita akan membahas beberapa tag yang ada hubungannya dengan text yang menggunakan bootstrap 4, silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama text_bootstrap.html, maka hasilnya adalah sebagai berikut :

Keterangan :

 

Baik sekian dulu teman – teman, beberapa tampilan text/typography dengan menggunakan bootstrap 4, jika ada yang ingin didiskusikan silahkan di kolom komentar, baik sekian dulu sampai jumpa di tutorial bootstrap 4 selanjutnya.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *