Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Bootstrap 3

Bootstrap 3 Typography - Tutorial Bootstrap Indonesia

Pada artikel ini, kita akan mempelajari tipografi yang ada pada Bootstrap 3. Tipografi memilih bagaimana banyak sekali element teks akan muncul di halaman web.
Bootstrap 3 Typography

# Bootstrap 3 Default

Bootstrap 3 mempunyai default setting yang ditrapkan pada element pada <body> sebagai berikut :
body {     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;     font-size: 14px;     line-height: 1.42857143;     color: #333;     background-color: #fff; }

# Bootstrap 3 Heading

Bootstrap 3 Typography pada bab Heading sanggup memakai secara pribadi pada element heading dari <h1> - <h6> atau dengan memakai nama class .h1, .h2, .h3, .h4, .h5 dan .h6
# Contoh memakai <h1> - <h6>
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Hasil
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body>  <div class="container">   <h1>Heading 1</h1>   <h2>Heading 2</h2>   <h3>Heading 3</h3>   <h4>Heading 4</h4>   <h5>Heading 5</h5>   <h6>Heading 6</h6> </div>  </body> </html>
# Contoh memakai nama class
<div class="h1">Heading 1</div> <div class="h2">Heading 2</div> <div class="h3">Heading 3</div> <div class="h4">Heading 4</div> <div class="h5">Heading 5</div> <div class="h6">Heading 6</div>
Hasil
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body>  <div class="container">   <div class="h1">Heading 1</div>   <div class="h2">Heading 2</div>   <div class="h3">Heading 3</div>   <div class="h4">Heading 4</div>   <div class="h5">Heading 5</div>   <div class="h6">Heading 6</div> </div>  </body> </html>
# Contoh memakai element <small>
Element <small> dalam Typography Heading dipakai untuk membuat teks yang lebih kecil dari ukuran teks disekitarnya, rujukan penerapannya sebagai berikut :
<h1>Heading 1 <small>(Teks Kedua)</small></h1> <h2>Heading 2 <small>(Teks Kedua)</small></h2> <h3>Heading 3 <small>(Teks Kedua)</small></h3> <h4>Heading 4 <small>(Teks Kedua)</small></h4> <h5>Heading 5 <small>(Teks Kedua)</small></h5> <h6>Heading 6 <small>(Teks Kedua)</small></h6>  <div class="h1">Heading 1 <small>(Teks Kedua)</small></div> <div class="h2">Heading 2 <small>(Teks Kedua)</small></div> <div class="h3">Heading 3 <small>(Teks Kedua)</small></div> <div class="h4">Heading 4 <small>(Teks Kedua)</small></div> <div class="h5">Heading 5 <small>(Teks Kedua)</small></div> <div class="h6">Heading 6 <small>(Teks Kedua)</small></div>
Hasil
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body>  <div class="container">    <h1>Heading 1 <small>(Teks Kedua)</small></h1>   <h2>Heading 2 <small>(Teks Kedua)</small></h2>   <h3>Heading 3 <small>(Teks Kedua)</small></h3>   <h4>Heading 4 <small>(Teks Kedua)</small></h4>   <h5>Heading 5 <small>(Teks Kedua)</small></h5>   <h6>Heading 6 <small>(Teks Kedua)</small></h6>    <div class="h1">Heading 1 <small>(Teks Kedua)</small></div>   <div class="h2">Heading 2 <small>(Teks Kedua)</small></div>   <div class="h3">Heading 3 <small>(Teks Kedua)</small></div>   <div class="h4">Heading 4 <small>(Teks Kedua)</small></div>   <div class="h5">Heading 5 <small>(Teks Kedua)</small></div>   <div class="h6">Heading 6 <small>(Teks Kedua)</small></div>    </div>  </body> </html>

# Bootstrap 3 paragraph

Ukuran aksara default global Bootstrap 3 yakni 14px, dengan garis-tinggi 1.4 yang diterapkan pada element <body> dan semua paragraf. Element <p> (paragraph) pada Bootstrap 3 mempunyai gaya margin/batas sebagai berikut.
  • margin-top (batas-atas) : 0px
  • margin-right (batas-kanan) : 0px
  • margin-bottom (batas-bawah) : 10px
  • margin-left (batas-kiri) : 0px
Untuk membuat paragraf lebih menonjol dari paragraf lainnya gunakan class .lead
Contoh Bootstrap paragraph
<p>Ini yakni normal paragraph</p> <p>Ini yakni normal paragraph</p>  <p class="lead">Ini yakni paragraph dengan class (.lead)</p>
Hasil
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container">  <p>Ini yakni normal paragraph</p> <p>Ini yakni normal paragraph</p>  <p class="lead">Ini yakni paragraph dengan class (.lead)</p> <div class="lead">Ini yakni DIV dengan class (.lead)</div>  <hr> Perbesar dan perkecil area Preview  untuk melihat fungsi dari class= lead  </div> </body> </html>

# Bootstrap 3 <abbr>

<p>   <abbr title="Anggaran Pendapatan dan Belanja Negara">APBN</abbr>    yakni rencana keuangan tahunan    pemerintahan negara Indonesia yang ...dst. </p>
Hasil
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Demo Triksonic</title> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container">  <p>   <abbr title="Bootstrap 3 Typography - Tutorial Bootstrap Indonesia">APBN</abbr>    yakni rencana keuangan tahunan    pemerintahan negara Indonesia yang ...dst. </p>  </div> </body> </html>
# .initialism {...}
Untuk menampilkan teks abbr yang sedikit lebih kecil gunakan class .initialism pada element HTML <abbr>
Contoh :
<p>   <abbr title="Anggaran Pendapatan dan Belanja Negara">APBN</abbr>    yakni rencana keuangan tahunan    pemerintahan negara Indonesia yang ...dst. </p>  <p>   <abbr title="Anggaran Pendapatan dan Belanja Negara" class="initialism">   apbn   </abbr>    yakni rencana keuangan tahunan    pemerintahan negara Indonesia yang ...dst. </p>
Hasil :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container">  <p>   <abbr title="Bootstrap 3 Typography - Tutorial Bootstrap Indonesia">APBN</abbr>    yakni rencana keuangan tahunan    pemerintahan negara Indonesia yang ...dst. </p>  <p>   <abbr title="Bootstrap 3 Typography - Tutorial Bootstrap Indonesia" class="initialism">   apbn   </abbr>    yakni rencana keuangan tahunan    pemerintahan negara Indonesia yang ...dst. </p>  </div> </body> </html>

# Bootstrap 3 <blockquote>

<blockquote>   <p>     <strong>HTML5</strong> merupakan salah satu karya    Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C)    untuk mendefinisikan sebuah bahasa markah tunggal    yang sanggup ditulis dengan cara HTML ataupun XHTML.   </p>   <footer>Sumber :https://id.wikipedia.org/wiki/HTML5</footer> </blockquote>
Hasil
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container">  <blockquote>   <p>     <strong>HTML5</strong> merupakan salah satu karya    Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C)    untuk mendefinisikan sebuah bahasa markah tunggal    yang sanggup ditulis dengan cara HTML ataupun XHTML.   </p>   <footer>Sumber :https://id.wikipedia.org/wiki/HTML5</footer> </blockquote>  </div> </body> </html>
# .blockquote-reverse {...}
Untuk menampilkan sebuah kutipan dengan posisi rapat kanan, sanggup memakai class .blockquote-reverse
Contoh
<blockquote class="blockquote-reverse">   <p>     <strong>HTML5</strong> merupakan salah satu karya    Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C)    untuk mendefinisikan sebuah bahasa markah tunggal    yang sanggup ditulis dengan cara HTML ataupun XHTML.   </p>   <footer>Sumber :https://id.wikipedia.org/wiki/HTML5</footer> </blockquote>
Hasil
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container">  <blockquote class="blockquote-reverse">   <p>     <strong>HTML5</strong> merupakan salah satu karya    Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C)    untuk mendefinisikan sebuah bahasa markah tunggal    yang sanggup ditulis dengan cara HTML ataupun XHTML.   </p>   <footer>Sumber :https://id.wikipedia.org/wiki/HTML5</footer> </blockquote>  </div> </body> </html>

# Bootstrap 3 <dl>

Untuk membuat daftar definisi dari sebuah istilah atau keterangan sanggup memakai element <dl>, class yang sanggup diterapkan pada element ini yakni .dl-horizontal
Contoh :
<dl>   <dt>Hiperbola</dt>   <dd>Gaya bahasa yang menyatakan sesuatu secara berlebihan</dd>   <dt>Symphony</dt>   <dd>Karya musik panjang untuk orkestra, khususnya dalam bentuk sonata</dd> </dl>  <dl class="dl-horizontal">   <dt>Hiperbola</dt>   <dd>Gaya bahasa yang menyatakan sesuatu secara berlebihan</dd>   <dt>Symphony</dt>   <dd>Karya musik panjang untuk orkestra, khususnya dalam bentuk sonata</dd> </dl>
Hasil :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>dl</code></h2>  <dl>   <dt>Hiperbola</dt>   <dd>Gaya bahasa yang menyatakan sesuatu secara berlebihan</dd>   <dt>Symphony</dt>   <dd>Karya musik panjang untuk orkestra, khususnya dalam bentuk sonata</dd> </dl>  <dl class="dl-horizontal">   <dt>Hiperbola</dt>   <dd>Gaya bahasa yang menyatakan sesuatu secara berlebihan</dd>   <dt>Symphony</dt>   <dd>Karya musik panjang untuk orkestra, khususnya dalam bentuk sonata</dd> </dl>  <p class="alert alert-info"> <strong>Catatan :</strong><br/> <code>.dl-horizontal</code> hanya berlaku untuk area 768px keatas, dibawah 768 akan tampil secara normal, silahkan coba berbesar dan perkecil area preview untuk melihat perbedaannya. </p>  </div> </body> </html>

# Bootstrap 3 <code>

Untuk membuat/menuliskan bahasa kegiatan komputer secara inline gunakan element HTML <code>
Contoh :
<p>   Beberapa rujukan element html yakni :    <code>span</code>, <code>div</code>, <code>main</code> </p>
Hasil
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>code</code></h2>  <p>   Beberapa rujukan element html yakni :    <code>span</code>, <code>div</code>, <code>main</code> </p>  </div> </body> </html>

# Bootstrap 3 <kbd>

Untuk membuat/menuliskan sebuah tombol pada keyboard gunakan element HTML <kbd>
Contoh :
<p>  <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd>. </p>  <p>  <kbd>Ctrl + P</kbd>. </p>  <p>  <kbd>Ctrl + Shift</kbd> + <kbd>F3</kbd> </p>
Hasil
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>kbd</code></h2>  <p>  <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd>. </p>  <p>  <kbd>Ctrl + P</kbd>. </p>  <p>  <kbd>Ctrl + Shift</kbd> + <kbd>F3</kbd> </p>  </div> </body> </html>

# Bootstrap 3 <mark>

Untuk membuat/menuliskan sebuah sebuah teks yang tersorot sanggup memakai element HTML <mark>
Contoh :
<p>   Gunakan element mark untuk <mark>menyorot</mark> sebuah teks. </p>
Hasil :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>mark</code></h2>  <p>   Gunakan element mark untuk <mark>menyorot</mark> sebuah teks. </p>  </div> </body> </html>
# .mark {...}
Selain memakai element HTML <mark>, untuk menyorot sebuah teks sanggup juga dilakukan dengan memakai attribute class .mark pada element HTML menyerupai span, p, div dan element lainnya
Contoh :
<p>   Gunakan class .mark untuk <span class="mark">menyorot</span>    sebuah teks. </p>  <p class="mark">   Gunakan class .mark untuk menyorot sebuah teks. </p>
Hasil :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>.mark</code></h2>  <p>   Gunakan class <code>.mark</code> untuk <span class="mark">menyorot</span>    sebuah teks. </p>  <p class="mark">   Gunakan class <code>.mark</code> untuk menyorot sebuah teks. </p>  </div> </body> </html>

# Bootstrap 3 <pre>

Digunakan untuk membuat teks yang terformat.
Contoh :
<pre> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;/&gt; &lt;title&gt;Triksonic&lt;/title&gt; &lt;/head&gt; &lt;body&gt;   &lt;/body&gt; &lt;/html&gt; </pre>
Hasil
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>pre</code></h2>  <pre> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;/&gt; &lt;title&gt;Triksonic&lt;/title&gt; &lt;/head&gt; &lt;body&gt;   &lt;/body&gt; &lt;/html&gt; </pre>  </div> </body> </html>
# .pre-scrollable {...}
Untuk membatasi tinggi atau jikalau tidak ingin element <pre> tidak terlalu panjang tingginya sanggup memakai class .pre-scrollable pada HTML <pre>. Class .pre-scrollable mempunyai batas tinggi 340px dan scrolling pada axis-y mempunyai nilai : scroll.
Contoh :
<pre class="pre-scrollable"> [INTRO]   G  Am  Bm  Am  C  D  [Verse 1]       D     G   Bm  Am Bengawan Solo        D    G  Am  Bm Riwayatmu sekarang      E   Am    D  Sedari dulu jadi     A D7     G  Am  Bm Perhatian insani  [Verse 2]        D   G   Bm  Am Musim kemarau          D  G  Am  Bm Tak s'brapa airmu       E     Am  D Di isu terkini hujan air         A D7    G  C  G Meluap hingga jauh  ...dan seterusnya ini hanya untuk demo </pre>
Hasil :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>.pre-scrollable</code></h2>  <pre class="pre-scrollable"> [INTRO]   G  Am  Bm  Am  C  D  [Verse 1]       D     G   Bm  Am Bengawan Solo        D    G  Am  Bm Riwayatmu sekarang      E   Am    D  Sedari dulu jadi     A D7     G  Am  Bm Perhatian insani  [Verse 2]        D   G   Bm  Am Musim kemarau          D  G  Am  Bm Tak s'brapa airmu       E     Am  D Di isu terkini hujan air         A D7    G  C  G Meluap hingga jauh  ...dan seterusnya ini hanya untuk demo </pre>  </div> </body> </html>

# Bootstrap 3 <q>

Digunakan untuk menuliskan sebuah kutipan pendek
Contoh :
<p>  <strong>Apa arti Tema</strong> - <q>Tema merupakan suatu gagasan pokok atau ilham  pikiran ihwal suatu hal,salah satunya dalam membuat suatu tulisan</q>.  Di setiap goresan pena pastilah mempunyai sebuah tema, alasannya dalam sebuah penulisan   dianjurkan harus memikirkan tema apa yang akan dibuat. </p>
Hasil :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>q</code></h2>  <p>  <strong>Apa arti Tema</strong> -   <q>Tema merupakan suatu gagasan pokok atau ilham  pikiran ihwal suatu hal,salah satunya dalam membuat suatu goresan pena  </q>. Di setiap goresan pena pastilah mempunyai sebuah tema,   alasannya dalam sebuah penulisan   dianjurkan harus memikirkan tema apa yang akan dibuat. </p>  </div> </body> </html>

# Bootstrap 3 <samp>

Digunakan untuk menuliskan output/hasil sample dari bahasa kegiatan komputer melalui sebuah teks.
Contoh :
<pre> &lt;div&gt;   &lt;b:attr cond=&#039;data:view.isSearch&#039; name=&#039;id&#039; value=&#039;searchPage&#039;/&gt; &lt;/div&gt; </pre>  <p>  maka akan menghasilkan :   <samp>&lt;div id=&quot;searchPage&quot;&gt;...&lt;/div&gt;</samp> </p>
Hasil :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>samp</code></h2>  <pre> &lt;div&gt;   &lt;b:attr cond=&#039;data:view.isSearch&#039; name=&#039;id&#039; value=&#039;searchPage&#039;/&gt; &lt;/div&gt; </pre>  <p>  maka akan menghasilkan :   <samp>&lt;div id=&quot;searchPage&quot;&gt;...&lt;/div&gt;</samp> </p>  </div> </body> </html>

# Bootstrap 3 <small>

Digunakan untuk teks yang lebih kecil dari teks yang ada disekitarnya.
Contoh :
<h1>   Tutorial Blog <small>Belajar dasar HTML</small> </h1>  <p>   Reperensi mencar ilmu <small>HTML</small> </p>
Hasil :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <h1>Bootstrap 3 <code>small</code></h1> <hr>  <h2>   Tutorial Blog <small>Belajar dasar HTML</small> </h2>  <p>   Reperensi mencar ilmu <small>HTML</small> </p>  </div> </body> </html>

Bootstrap 3 <var>

Digunakan untuk menuliskan teks yang bernilai sebuah variable.
Contoh :
<p>   3<var>x</var> + 5 = 7 </p>  <p>   2 - 3<var>y</var> = 6 </p>  <p>   <var>z</var> + 3 = 4<var>z</var> </p>
Hasil
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>var</code></h2>  <p>   3<var>x</var> + 5 = 7 </p>  <p>   2 - 3<var>y</var> = 6 </p>  <p>   <var>z</var> + 3 = 4<var>z</var> </p>  </div> </body> </html>

# Bootstrap 3 warna teks dan Background

Bootstrap 3 memakai nama class khusus dalam hal pewarnaan teks dan backround, antara lain :
# Warna Teks(Text Color)
Untuk pewarnaan sebuah teks sanggup memakai nama class pada HTML element yaitu : .text-muted, .text-primary, .text-success, .text-info, .text-warning, and .text-danger
Contoh :
<h2 class="text-muted">h2.text-muted</h2> <h2 class="text-primary">h2.text-primary</h2> <h2 class="text-success">h2.text-success</h2> <h2 class="text-info">h2.text-info</h2> <h2 class="text-warning">h2.text-warning</h2> <h2 class="text-danger">h2.text-danger</h2>  <hr>  <p class="text-muted">p.text-muted</p> <p class="text-primary">p.text-primary</p> <p class="text-success">p.text-success</p> <p class="text-info">p.text-info</p> <p class="text-warning">p.text-warning</p> <p class="text-danger">p.text-danger</p>  <h2>   <span class="text-muted">Nama</span>   <span class="text-primary">Blog</span>   <span class="text-success">ini</span>   <span class="text-warning">adalah</span>    <span class="text-danger">TrikSonic</span> </h2>
Hasil :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <h1>Bootstrap 3 <code>Text Color</code></h1> <hr>  <h2 class="text-muted">h2.text-muted</h2> <h2 class="text-primary">h2.text-primary</h2> <h2 class="text-success">h2.text-success</h2> <h2 class="text-info">h2.text-info</h2> <h2 class="text-warning">h2.text-warning</h2> <h2 class="text-danger">h2.text-danger</h2>  <hr>  <p class="text-muted">p.text-muted</p> <p class="text-primary">p.text-primary</p> <p class="text-success">p.text-success</p> <p class="text-info">p.text-info</p> <p class="text-warning">p.text-warning</p> <p class="text-danger">p.text-danger</p>  <h2>   <span class="text-muted">Nama</span>   <span class="text-primary">Blog</span>   <span class="text-success">ini</span>   <span class="text-warning">adalah</span>    <span class="text-danger">TrikSonic</span> </h2>  </div> </body> </html>
# Warna Latar Belakang (Background Color)
Untuk pewarnaan sebuah background/later belakang sanggup memakai nama class pada element HTML dengan nama class yaitu : .bg-primary, .bg-success, .bg-info, .bg-warning, dan .bg-danger
Contoh :
<h2 class="bg-primary">h2.bg-primary</h2> <h2 class="bg-success">h2.bg-success</h2> <h2 class="bg-info">h2.bg-info</h2> <h2 class="bg-warning">h2.bg-warning</h2> <h2 class="bg-danger">h2.bg-danger</h2>  <hr>  <p class="bg-primary">p.bg-primary</p> <p class="bg-success">p.bg-success</p> <p class="bg-info">p.bg-info</p> <p class="bg-warning">p.bg-warning</p> <p class="bg-danger">p.bg-danger</p>  <h2>   <span class="bg-primary">Nama Blog</span>   <span class="bg-success">ini</span>   <span class="bg-warning">adalah</span>    <span class="bg-danger">TrikSonic</span> </h2>
Hasil :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <h1>Bootstrap 3 <code>Background Color</code></h1> <hr>  <h2 class="bg-primary">h2.bg-primary</h2> <h2 class="bg-success">h2.bg-success</h2> <h2 class="bg-info">h2.bg-info</h2> <h2 class="bg-warning">h2.bg-warning</h2> <h2 class="bg-danger">h2.bg-danger</h2>  <hr>  <p class="bg-primary">p.bg-primary</p> <p class="bg-success">p.bg-success</p> <p class="bg-info">p.bg-info</p> <p class="bg-warning">p.bg-warning</p> <p class="bg-danger">p.bg-danger</p>  <hr>  <h2>   <span class="bg-primary">Nama Blog</span>   <span class="bg-success">ini</span>   <span class="bg-warning">adalah</span>    <span class="bg-danger">TrikSonic</span> </h2>  </div> </body> </html>

# Bootstrap 3 Align (keselarasan)

Untuk memilih keselarasan posisi sanggup memakai nama class pada element HTML, antara lain sebagai berikut :
  1. .text-left : Rata kiri
  2. .text-center : Rata tengah
  3. .text-right : Rata kanan
  4. .text-justify : Rata kanan dan Rata kiri
Contoh :
<p class="text-left">   <b>Rata kiri</b> - Lorem ipsum dolor sit amet, an meliore feugait    delicata sed. Ius in inani aliquam. Repudiandae reprehendunt    no eam, veniam animal principes in ius. Ei vim animal tacimates,   pro ne alia quaeque, mei ea choro signiferumque. </p>  <p class="text-center">   <b>Rata tengah</b> - Lorem ipsum dolor sit amet, an meliore feugait    delicata sed. Ius in inani aliquam. Repudiandae reprehendunt    no eam, veniam animal principes in ius. Ei vim animal tacimates,   pro ne alia quaeque, mei ea choro signiferumque. </p>  <p class="text-right">   <b>Rata kanan</b> - Lorem ipsum dolor sit amet, an meliore feugait    delicata sed. Ius in inani aliquam. Repudiandae reprehendunt    no eam, veniam animal principes in ius. Ei vim animal tacimates,   pro ne alia quaeque, mei ea choro signiferumque. </p>  <p class="text-justify">   <b>Rata kanan dan kiri</b> - Lorem ipsum dolor sit amet, an meliore feugait    delicata sed. Ius in inani aliquam. Repudiandae reprehendunt    no eam, veniam animal principes in ius. Ei vim animal tacimates,   pro ne alia quaeque, mei ea choro signiferumque. </p>
Hasil :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> <style> /*hanya untuk demo*/ p {   padding: 10px;   border: 1px solid silver;   border-radius: 5px; } </style> </head> <body> <div class="container"> <h2>Bootstrap 3 Align</h2>  <p class="text-left">   <b>Rata kiri</b> - Lorem ipsum dolor sit amet, an meliore feugait    delicata sed. Ius in inani aliquam. Repudiandae reprehendunt    no eam, veniam animal principes in ius. Ei vim animal tacimates,   pro ne alia quaeque, mei ea choro signiferumque. </p>  <p class="text-center">   <b>Rata tengah</b> - Lorem ipsum dolor sit amet, an meliore feugait    delicata sed. Ius in inani aliquam. Repudiandae reprehendunt    no eam, veniam animal principes in ius. Ei vim animal tacimates,   pro ne alia quaeque, mei ea choro signiferumque. </p>  <p class="text-right">   <b>Rata kanan</b> - Lorem ipsum dolor sit amet, an meliore feugait    delicata sed. Ius in inani aliquam. Repudiandae reprehendunt    no eam, veniam animal principes in ius. Ei vim animal tacimates,   pro ne alia quaeque, mei ea choro signiferumque. </p>  <p class="text-justify">   <b>Rata kanan dan kiri</b> - Lorem ipsum dolor sit amet, an meliore feugait    delicata sed. Ius in inani aliquam. Repudiandae reprehendunt    no eam, veniam animal principes in ius. Ei vim animal tacimates,   pro ne alia quaeque, mei ea choro signiferumque. </p>  </div> </body> </html>

# Bootstrap 3 Text Transform (Transformasi teks)

Untuk melaksanakan transformasi teks (perubahan teks bentuk) memakai bootstrap sanggup memakai nama class pada element HTML, antara lain sebagai berikut :
  1. .text-lowercase : dipakai untuk membuat seluruh teks menjadi aksara kecil, walaupun penulisan aslinya terdapat aksara besar (bukan size huruf)
  2. .text-uppercase : dipakai untuk membuat seluruh teks menjadi aksara besar, walaupun penulisan aslinya terdapat aksara kecil (bukan size huruf)
  3. .text-capitalize : dipakai untuk membuat aksara besar pada tiap kata, tetapi hanya pada bab aksara pertamanya saja (bukan size huruf)
Contoh :
<p class="text-lowercase">   <b>text-lowercase</b> - LOREM IPSUm doLoR sit amet, an MELIORE feugait    delicata sed. Ius in inani aliquam. Repudiandae reprehendunt    no eam, veniam animal principes in ius. Ei vim animal tacimates,   pro ne alia quaeque, mei ea choro signiferumque. </p>  <p class="text-uppercase">   <b>text-uppercase</b> - Lorem ipsum dolor sit amet, an meliore feugait    delicata sed. Ius in inani aliquam. Repudiandae reprehendunt    no eam, veniam animal principes in ius. Ei vim animal tacimates,   pro ne alia quaeque, mei ea choro signiferumque. </p>  <p class="text-capitalize">   <b>text-capitalize</b> - lorem ipsum dolor sit amet, an meliore feugait    delicata sed. Ius in inani aliquam. repudiandae reprehendunt    no eam, veniam animal principes in ius. ei vim animal tacimates,   pro ne alia quaeque, mei ea choro signiferumque. </p>
Hasil :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> <style> /*hanya untuk demo*/ p {   padding: 10px;   border: 1px solid silver;   border-radius: 5px; } </style> </head> <body> <div class="container">  <h2>Bootstrap 3 Text Transform</h2>  <p class="text-lowercase">   <b>text-lowercase</b> - LOREM IPSUm doLoR sit amet, an MELIORE feugait    delicata sed. Ius in inani aliquam. Repudiandae reprehendunt    no eam, veniam animal principes in ius. Ei vim animal tacimates,   pro ne alia quaeque, mei ea choro signiferumque. </p>  <p class="text-uppercase">   <b>text-uppercase</b> - Lorem ipsum dolor sit amet, an meliore feugait    delicata sed. Ius in inani aliquam. Repudiandae reprehendunt    no eam, veniam animal principes in ius. Ei vim animal tacimates,   pro ne alia quaeque, mei ea choro signiferumque. </p>  <p class="text-capitalize">   <b>text-capitalize</b> - lorem ipsum dolor sit amet, an meliore feugait    delicata sed. Ius in inani aliquam. repudiandae reprehendunt    no eam, veniam animal principes in ius. ei vim animal tacimates,   pro ne alia quaeque, mei ea choro signiferumque. </p>   </div> </body> </html>

# Bootstrap 3 Unordered lists dan Ordered lists

# Unordered lists
Digunakan untuk membuat daftar berupa bullet list.
Contoh :
<ul>   <li>Ketua</li>   <li>Wakil     <ul>       <li>Wakil ketua 1</li>       <li>Wakil ketua 2</li>       <li>Wakil ketua 3</li>     </ul>   </li>   <li>Sekretaris</li>   <li>Anggota     <ul>       <li>Anggota 1</li>       <li>Anggota 2</li>       <li>Anggota 3</li>     </ul>   </li> </ul>
Hasil :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container">  <h2>Bootstrap 3 Unordered lists</h2>  <ul>   <li>Ketua</li>   <li>Wakil     <ul>       <li>Wakil ketua 1</li>       <li>Wakil ketua 2</li>       <li>Wakil ketua 3</li>     </ul>   </li>   <li>Sekretaris</li>   <li>Anggota     <ul>       <li>Anggota 1</li>       <li>Anggota 2</li>       <li>Anggota 3</li>     </ul>   </li> </ul>   </div> </body> </html>
# Ordered lists
Digunakan untuk membuat daftar berupa angka atau nomor.
Contoh :
<ol>   <li>Ketua</li>   <li>Wakil     <ol>       <li>Wakil ketua 1</li>       <li>Wakil ketua 2</li>       <li>Wakil ketua 3</li>     </ol>   </li>   <li>Sekretaris</li>   <li>Anggota     <ol>       <li>Anggota 1</li>       <li>Anggota 2</li>       <li>Anggota 3</li>     </ol>   </li> </ol>
Hasil :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container">  <h2>Bootstrap 3 Ordered lists</h2>  <ol>   <li>Ketua</li>   <li>Wakil     <ol>       <li>Wakil ketua 1</li>       <li>Wakil ketua 2</li>       <li>Wakil ketua 3</li>     </ol>   </li>   <li>Sekretaris</li>   <li>Anggota     <ol>       <li>Anggota 1</li>       <li>Anggota 2</li>       <li>Anggota 3</li>     </ol>   </li> </ol>   </div> </body> </html>
# .list-unstyled {...}
Untuk menghapus bentuk styling default dari daftar item, gunakan class .list-unstyled yang diterapkan untuk element <ul> atau <ol>.
Contoh :
<ul class="list-unstyled">   <li>Ketua</li>   <li>Wakil</li>   <li>Sekretaris</li>   <li>Anggota</li> </ul>  <hr>  <ol class="list-unstyled">   <li>Merah</li>   <li>Kuning</li>   <li>Hijau</li>   <li>Jingga</li> </ol>  <hr>  <ul class="list-unstyled">   <li>Ketua</li>   <li>Wakil     <ul>       <li>Wakil ketua 1</li>       <li>Wakil ketua 2</li>     </ul>   </li>   <li>Sekretaris</li>   <li>Anggota</li> </ul>
Hasil :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container">  <h2>Bootstrap 3 <code>list-unstyled</code></h2>  <ul class="list-unstyled">   <li>Ketua</li>   <li>Wakil</li>   <li>Sekretaris</li>   <li>Anggota</li> </ul>  <hr>  <ol class="list-unstyled">   <li>Merah</li>   <li>Kuning</li>   <li>Hijau</li>   <li>Jingga</li> </ol>  <hr>  <ul class="list-unstyled">   <li>Ketua</li>   <li>Wakil     <ul>       <li>Wakil ketua 1</li>       <li>Wakil ketua 2</li>     </ul>   </li>   <li>Sekretaris</li>   <li>Anggota</li> </ul>  </div> </body> </html>
# .list-inline {...}
Untuk membuat daftar secara horizontal dalam satu baris, berdampingan, gunakan class .list-inline yang diterapkan untuk element <ul> atau <ol>
Contoh :
<ul class="list-inline">   <li><strong>Share To</strong></li>   <li><a href="#">G-Plus</a></li>   <li><a href="#">Facebook</a></li>   <li><a href="#">Twitter</a></li> </ul>
Hasil :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo Triksonic</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container">  <h2>Bootstrap 3 <code>list-inline</code></h2>  <ul class="list-inline">   <li><strong>Share To</strong></li>   <li><a href="#">G-Plus</a></li>   <li><a href="#">Facebook</a></li>   <li><a href="#">Twitter</a></li> </ul>  </div> </body> </html>