#5 - Membuat bootstrap typography

     Sebenarnya ada banyak cara untuk membuat typography, kalian bisa membaca dokumentasinya disini !!

    

• Judul heading pada bootstrap

          Judul / heading pada bootstrap dimulai dari tag <h1> hingga <h6>.

   

 Contoh penulisan kode programnya adalah sebagai berikut :

 download clone embed print report

1. <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
2. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
3. <div class="container">
4. <h1>h1 Bootstrap heading</h1>
5. <h2>h2 Bootstrap heading</h2>
6. <h3>h3 Bootstrap heading</h3>
7. <h4>h4 Bootstrap heading</h4>
8. <h5>h5 Bootstrap heading</h5>
9. <h6>h6 Bootstrap heading</h6>
10. </div>

   

atau kalian bisa menuliskan kode sintaknya menjadi seperti ini :

download clone embed print report

1. <p class="h1">h1. Bootstrap heading</p>
2. <p class="h2">h2. Bootstrap heading</p>
3. <p class="h3">h3. Bootstrap heading</p>
4. <p class="h4">h4. Bootstrap heading</p>
5. <p class="h5">h5. Bootstrap heading</p>
6. <p class="h6">h6. Bootstrap heading</p>

• Kostumisasi heading

Judul / heading pada bootstrap juga bisa di atur sesuai kebutuhan, contohnya adalah sebagai berikut :

 download clone embed print report

1. <h3>
2. Fancy display heading
3. <small class="text-muted">With faded secondary text</small>
4. </h3>

• Display

Jika kita memerlukan ukuran font yang lebih besar namun dengan ketebalan yang lebih ringan, kita bisa menggunakan class display heading  antara lain : .display-1, .display-2, .display-3, .display-4

    Contoh penulisan sintaknya adalah sebagai berikut :

 

download clone embed print report

1. <h1 class="display-1">Display 1</h1>
2. <h1 class="display-2">Display 2</h1>
3. <h1 class="display-3">Display 3</h1>
4. <h1 class="display-4">Display 4</h1>

aaa