{"id":1276,"date":"2018-10-29T04:21:28","date_gmt":"2018-10-29T04:21:28","guid":{"rendered":"https:\/\/www.hostnic.id\/blog\/?p=1276"},"modified":"2018-10-29T04:39:08","modified_gmt":"2018-10-29T04:39:08","slug":"text-typography-bootstrap","status":"publish","type":"post","link":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/","title":{"rendered":"Text\/Typography Bootstrap"},"content":{"rendered":"<div id=\"main\" class=\"w3-col l10 m12\">\n<div class=\"w3-clear nextprev\"><\/div>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_75 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Daftar Isi<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69f280d207ad7\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f280d207ad7\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#Bootstrap_Default_Settings\" >Bootstrap Default Settings<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#Bootstrap_vs_Browser_Defaults\" >Bootstrap vs. Browser Defaults<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#%E2%80%93\" >&lt;h1&gt; &#8211; &lt;h6&gt;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#Contoh\" >Contoh<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#h1_Bootstrap_heading_36px\" >h1 Bootstrap heading (36px)<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#h2_Bootstrap_heading_30px\" >h2 Bootstrap heading (30px)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#h3_Bootstrap_heading_24px\" >h3 Bootstrap heading (24px)<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#h4_Bootstrap_heading_18px\" >h4 Bootstrap heading (18px)<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#h5_Bootstrap_heading_14px\" >h5 Bootstrap heading (14px)<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#h6_Bootstrap_heading_12px\" >h6 Bootstrap heading (12px)<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#i\" >&lt;small&gt;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#Contoh-2\" >Contoh<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#h1_heading_secondary_text\" >h1 heading secondary text<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#h2_heading_secondary_text\" >h2 heading secondary text<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#h3_heading_secondary_text\" >h3 heading secondary text<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#h4_heading_secondary_text\" >h4 heading secondary text<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#h5_heading_secondary_text\" >h5 heading secondary text<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#h6_heading_secondary_text\" >h6 heading secondary text<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#i-2\" >&lt;mark&gt;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#Contoh-3\" >Contoh<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#i-3\" >&lt;abbr&gt;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#Contoh-4\" >Contoh<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#i-4\" >&lt;blockquote&gt;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#Contoh-5\" >Contoh<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#Contoh-6\" >Contoh<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#i-5\" >&lt;dl&gt;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#Contoh-7\" >Contoh<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#i-6\" >&lt;code&gt;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#Contoh-8\" >Contoh<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#i-7\" >&lt;kbd&gt;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#Contoh-9\" >Contoh<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#i-8\" >&lt;pre&gt;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#Contoh-10\" >Contoh<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#Merubah_Warna_Teks_dan_Latar_Belakang\" >Merubah Warna Teks dan Latar Belakang<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-35\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#Contoh-11\" >Contoh<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-36\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#Contoh-12\" >Contoh<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-37\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#Typography_Class_Lainnya\" >Typography Class Lainnya<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Bootstrap_Default_Settings\"><\/span>Bootstrap Default Settings<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bootstrap global ukuran huruf nya 14px, dengan tinggi line\u00a01.428. Yang di terapkan ke\u00a0<code class=\"w3-codespan\">&lt;body&gt;<\/code> element dan semua paragrap (<code class=\"w3-codespan\">&lt;p&gt;<\/code>).<\/p>\n<p>Tambahan, semua\u00a0<code class=\"w3-codespan\">&lt;p&gt;<\/code> elemen memiliki margin bawah yang sama dengan setengah tinggi garis yang dihitung\u00a0(10px by default).<\/p>\n<hr \/>\n<h2><span class=\"ez-toc-section\" id=\"Bootstrap_vs_Browser_Defaults\"><\/span>Bootstrap vs. Browser Defaults<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Dalam artikel ini, kita akan melihat beberapa elemen HTML yang akan diberi gaya\u00a0sedikit berbeda dengan Bootstrap dari pada default browser.<\/p>\n<hr \/>\n<h2><span class=\"ez-toc-section\" id=\"%E2%80%93\"><\/span>&lt;h1&gt; &#8211; &lt;h6&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Secara default, Bootstrap akan merubah HTML heading (<code class=\"w3-codespan\">&lt;h1&gt;<\/code>\u00a0ke<code class=\"w3-codespan\">\u00a0&lt;h6&gt;<\/code>) dengan cara berikut:<\/p>\n<div class=\"w3-example\">\n<h3><span class=\"ez-toc-section\" id=\"Contoh\"><\/span>Contoh<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w3-code notranslate\">\n<h1><span class=\"ez-toc-section\" id=\"h1_Bootstrap_heading_36px\"><\/span>h1 Bootstrap heading (36px)<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<h2><span class=\"ez-toc-section\" id=\"h2_Bootstrap_heading_30px\"><\/span>h2 Bootstrap heading (30px)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"h3_Bootstrap_heading_24px\"><\/span>h3 Bootstrap heading (24px)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4><span class=\"ez-toc-section\" id=\"h4_Bootstrap_heading_18px\"><\/span>h4 Bootstrap heading (18px)<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h5><span class=\"ez-toc-section\" id=\"h5_Bootstrap_heading_14px\"><\/span>h5 Bootstrap heading (14px)<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<h6><span class=\"ez-toc-section\" id=\"h6_Bootstrap_heading_12px\"><\/span>h6 Bootstrap heading (12px)<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<\/div>\n<\/div>\n<hr \/>\n<h2><span class=\"ez-toc-section\" id=\"i\"><\/span>&lt;small&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In Bootstrap the HTML <code class=\"w3-codespan\">&lt;small&gt;<\/code> element is used to create a lighter, secondary text in any heading:<\/p>\n<div class=\"w3-example\">\n<h3><span class=\"ez-toc-section\" id=\"Contoh-2\"><\/span>Contoh<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w3-code notranslate\">\n<h1><span class=\"ez-toc-section\" id=\"h1_heading_secondary_text\"><\/span>h1 heading <small>secondary text<\/small><span class=\"ez-toc-section-end\"><\/span><\/h1>\n<h2><span class=\"ez-toc-section\" id=\"h2_heading_secondary_text\"><\/span>h2 heading <small>secondary text<\/small><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"h3_heading_secondary_text\"><\/span>h3 heading <small>secondary text<\/small><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4><span class=\"ez-toc-section\" id=\"h4_heading_secondary_text\"><\/span>h4 heading <small>secondary text<\/small><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h5><span class=\"ez-toc-section\" id=\"h5_heading_secondary_text\"><\/span>h5 heading <small>secondary text<\/small><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<h6><span class=\"ez-toc-section\" id=\"h6_heading_secondary_text\"><\/span>h6 heading <small>secondary text<\/small><span class=\"ez-toc-section-end\"><\/span><\/h6>\n<\/div>\n<\/div>\n<hr \/>\n<h2><span class=\"ez-toc-section\" id=\"i-2\"><\/span>&lt;mark&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bootstrap will style the HTML <code class=\"w3-codespan\">&lt;mark&gt;<\/code> element in the following way:<\/p>\n<div class=\"w3-example\">\n<h3><span class=\"ez-toc-section\" id=\"Contoh-3\"><\/span>Contoh<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w3-code notranslate\">\n<p>Use the mark element to <mark style=\"background-color: #fcf8e3; padding: .2em;\">highlight<\/mark> text.<\/p>\n<\/div>\n<\/div>\n<hr \/>\n<h2><span class=\"ez-toc-section\" id=\"i-3\"><\/span>&lt;abbr&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bootstrap will style the HTML <code class=\"w3-codespan\">&lt;abbr&gt;<\/code> element in the following way:<\/p>\n<div class=\"w3-example\">\n<h3><span class=\"ez-toc-section\" id=\"Contoh-4\"><\/span>Contoh<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w3-code notranslate\">\n<p>The <abbr title=\"World Health Organization\">WHO<\/abbr> was founded in 1948.<\/p>\n<\/div>\n<\/div>\n<hr \/>\n<h2><span class=\"ez-toc-section\" id=\"i-4\"><\/span>&lt;blockquote&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bootstrap will style the HTML <code class=\"w3-codespan\">&lt;blockquote&gt;<\/code> element in the following way:<\/p>\n<div class=\"w3-example\">\n<h3><span class=\"ez-toc-section\" id=\"Contoh-5\"><\/span>Contoh<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w3-code notranslate\">\n<blockquote><p>For 50 years, WWF has been protecting the future of nature. The world&#8217;s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.<\/p>\n<footer>From WWF&#8217;s website<\/footer>\n<\/blockquote>\n<\/div>\n<\/div>\n<p>To show the quote on the right, use the <code class=\"w3-codespan\">.blockquote-reverse<\/code> class:<\/p>\n<div class=\"w3-example\">\n<h3><span class=\"ez-toc-section\" id=\"Contoh-6\"><\/span>Contoh<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w3-code notranslate\">\n<blockquote class=\"blockquote-reverse\"><p>For 50 years, WWF has been protecting the future of nature. The world&#8217;s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.<\/p>\n<footer>From WWF&#8217;s website<\/footer>\n<\/blockquote>\n<\/div>\n<\/div>\n<hr \/>\n<h2><span class=\"ez-toc-section\" id=\"i-5\"><\/span>&lt;dl&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bootstrap will style the HTML <code class=\"w3-codespan\">&lt;dl&gt;<\/code> element in the following way:<\/p>\n<div class=\"w3-example\">\n<h3><span class=\"ez-toc-section\" id=\"Contoh-7\"><\/span>Contoh<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w3-code notranslate\">\n<dl>\n<dt>Coffee<\/dt>\n<dd>&#8211; black hot drink<\/dd>\n<dt>Milk<\/dt>\n<dd>&#8211; white cold drink<\/dd>\n<\/dl>\n<\/div>\n<\/div>\n<hr \/>\n<h2><span class=\"ez-toc-section\" id=\"i-6\"><\/span>&lt;code&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bootstrap will style the HTML <code class=\"w3-codespan\">&lt;code&gt;<\/code> element in the following way:<\/p>\n<div class=\"w3-example\">\n<h3><span class=\"ez-toc-section\" id=\"Contoh-8\"><\/span>Contoh<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w3-code notranslate\">\n<p>The following HTML elements: <code class=\"w3-codespan\">span<\/code>, <code class=\"w3-codespan\">section<\/code>, and <code class=\"w3-codespan\">div<\/code> defines a section in a document.<\/p>\n<\/div>\n<\/div>\n<hr \/>\n<h2><span class=\"ez-toc-section\" id=\"i-7\"><\/span>&lt;kbd&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bootstrap will style the HTML <code class=\"w3-codespan\">&lt;kbd&gt;<\/code> element in the following way:<\/p>\n<div class=\"w3-example\">\n<h3><span class=\"ez-toc-section\" id=\"Contoh-9\"><\/span>Contoh<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w3-code notranslate\">\n<p>Use <kbd>ctrl + p<\/kbd> to open the Print dialog box.<\/p>\n<\/div>\n<\/div>\n<hr \/>\n<h2><span class=\"ez-toc-section\" id=\"i-8\"><\/span>&lt;pre&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bootstrap will style the HTML <code class=\"w3-codespan\">&lt;pre&gt;<\/code> element in the following way:<\/p>\n<div class=\"w3-example\">\n<h3><span class=\"ez-toc-section\" id=\"Contoh-10\"><\/span>Contoh<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w3-code notranslate\">\n<pre class=\"\">Text in a pre element\r\nis displayed in a fixed-width\r\nfont, and it preserves\r\nboth      spaces and\r\nline breaks.<\/pre>\n<\/div>\n<\/div>\n<hr \/>\n<h2><span class=\"ez-toc-section\" id=\"Merubah_Warna_Teks_dan_Latar_Belakang\"><\/span>Merubah Warna Teks dan Latar Belakang<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bootstrap also has some contextual classes that can be used to provide &#8220;meaning through colors&#8221;.<\/p>\n<p>classes untuk warna pada text:<code class=\"w3-codespan\">.text-muted<\/code>,<code class=\"w3-codespan\">.text-primary<\/code>, <code class=\"w3-codespan\">.text-success<\/code>, <code class=\"w3-codespan\">.text-info<\/code>,<code class=\"w3-codespan\">.text-warning<\/code>, dan\u00a0<code class=\"w3-codespan\">.text-danger<\/code>:<\/p>\n<div class=\"w3-example\">\n<h3><span class=\"ez-toc-section\" id=\"Contoh-11\"><\/span>Contoh<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w3-code notranslate\">\n<p class=\"text-muted\">This text is muted.<\/p>\n<p class=\"text-primary\">This text is important.<\/p>\n<p class=\"text-success\">This text indicates success.<\/p>\n<p class=\"text-info\">This text represents some information.<\/p>\n<p class=\"text-warning\">This text represents a warning.<\/p>\n<p class=\"text-danger\">This text represents danger.<\/p>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<p>class untuk warna latar belakang:<code class=\"w3-codespan\">.bg-primary<\/code>, <code class=\"w3-codespan\">.bg-success<\/code>, <code class=\"w3-codespan\">.bg-info<\/code>, <code class=\"w3-codespan\">.bg-warning<\/code>, dan <code class=\"w3-codespan\">.bg-danger<\/code>:<\/p>\n<div class=\"w3-example\">\n<h3><span class=\"ez-toc-section\" id=\"Contoh-12\"><\/span>Contoh<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"w3-code notranslate\">\n<p class=\"bg-primary\">This text is important.<\/p>\n<p class=\"bg-success\">This text indicates success.<\/p>\n<p class=\"bg-info\">This text represents some information.<\/p>\n<p class=\"bg-warning\">This text represents a warning.<\/p>\n<p class=\"bg-danger\">This text represents danger.<\/p>\n<\/div>\n<\/div>\n<hr \/>\n<h2><span class=\"ez-toc-section\" id=\"Typography_Class_Lainnya\"><\/span>Typography Class Lainnya<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Class\u00a0Bootstrap di bawah ini dapat ditambahkan ke elemen HTML style lebih lanjut:<\/p>\n<table class=\"w3-table-all notranslate\">\n<tbody>\n<tr>\n<th style=\"width: 25%;\">Class<\/th>\n<th style=\"width: 63%;\">Description<\/th>\n<\/tr>\n<tr>\n<td><code class=\"w3-codespan\">.lead<\/code><\/td>\n<td>Membuat sebuah paragraf menonjol<\/td>\n<\/tr>\n<tr>\n<td><code class=\"w3-codespan\">.small<\/code><\/td>\n<td>Membuat huruf kecil (85% dari ukuran asli)<\/td>\n<\/tr>\n<tr>\n<td><code class=\"w3-codespan\">.text-left<\/code><\/td>\n<td>Menunjukkan teks rata kiri<\/td>\n<\/tr>\n<tr>\n<td><code class=\"w3-codespan\">.text-center<\/code><\/td>\n<td>Menunjukkan teks rata tengah<\/td>\n<\/tr>\n<tr>\n<td><code class=\"w3-codespan\">.text-right<\/code><\/td>\n<td>Menunjukkan teks rata kanan<\/td>\n<\/tr>\n<tr>\n<td><code class=\"w3-codespan\">.text-justify<\/code><\/td>\n<td>Menunjukkan teks rata kiri kanan<\/td>\n<\/tr>\n<tr>\n<td><code class=\"w3-codespan\">.text-nowrap<\/code><\/td>\n<td>Menunjukkan tidak ada teks pembungkus<\/td>\n<\/tr>\n<tr>\n<td><code class=\"w3-codespan\">.text-lowercase<\/code><\/td>\n<td>Membuat huruf kecil<\/td>\n<\/tr>\n<tr>\n<td><code class=\"w3-codespan\">.text-uppercase<\/code><\/td>\n<td>Membuat huruf besar<\/td>\n<\/tr>\n<tr>\n<td><code class=\"w3-codespan\">.text-capitalize<\/code><\/td>\n<td>Membuat huruf besar di depan kata<\/td>\n<\/tr>\n<tr>\n<td><code class=\"w3-codespan\">.initialism<\/code><\/td>\n<td>Menampilkan teks di dalam sebuah\u00a0<code class=\"w3-codespan\">&lt;abbr&gt;<\/code> elemen dalam ukuran font yang sedikit lebih kecil<\/td>\n<\/tr>\n<tr>\n<td><code class=\"w3-codespan\">.list-unstyled<\/code><\/td>\n<td>Menghapus gaya daftar default dan margin kiri pada item daftar (berfungsi baik pada &lt;ul&gt; dan &lt;ol&gt;). Kelas ini hanya berlaku untuk item daftar anak-anak<\/td>\n<\/tr>\n<tr>\n<td><code class=\"w3-codespan\">.list-inline<\/code><\/td>\n<td>Tempat semua item daftar pada satu baris<\/td>\n<\/tr>\n<tr>\n<td><code class=\"w3-codespan\">.dl-horizontal<\/code><\/td>\n<td>Mendaftar persyaratan (&lt;dt&gt;) dan deskripsi (&lt;dd&gt;) di<br \/>\n&lt;dl&gt; elemen berdampingan. Mulai seperti default &lt;dl&gt;, tetapi ketika jendela browser mengembang, ia akan berbaris berdampingan<\/td>\n<\/tr>\n<tr>\n<td><code class=\"w3-codespan\">.pre-scrollable<\/code><\/td>\n<td>Membuat elemen\u00a0<code class=\"w3-codespan\">&lt;pre&gt;<\/code>\u00a0scrollable<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap Default Settings Bootstrap global ukuran huruf nya 14px, dengan tinggi line\u00a01.428. Yang di terapkan ke\u00a0&lt;body&gt; element dan semua paragrap (&lt;p&gt;). Tambahan, semua\u00a0&lt;p&gt; elemen memiliki margin bawah yang sama dengan setengah tinggi garis yang dihitung\u00a0(10px by default). Bootstrap vs. Browser Defaults Dalam artikel ini, kita akan melihat beberapa elemen HTML yang akan diberi gaya\u00a0sedikit berbeda [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1273,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[247],"tags":[],"class_list":["post-1276","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-v3"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Text\/Typography Bootstrap - Hostnic.id<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Text\/Typography Bootstrap - Hostnic.id\" \/>\n<meta property=\"og:description\" content=\"Bootstrap Default Settings Bootstrap global ukuran huruf nya 14px, dengan tinggi line\u00a01.428. Yang di terapkan ke\u00a0&lt;body&gt; element dan semua paragrap (&lt;p&gt;). Tambahan, semua\u00a0&lt;p&gt; elemen memiliki margin bawah yang sama dengan setengah tinggi garis yang dihitung\u00a0(10px by default). Bootstrap vs. Browser Defaults Dalam artikel ini, kita akan melihat beberapa elemen HTML yang akan diberi gaya\u00a0sedikit berbeda [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"Hostnic.id\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-29T04:21:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-10-29T04:39:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ari Sigit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ari Sigit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/text-typography-bootstrap\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/text-typography-bootstrap\\\/\"},\"author\":{\"name\":\"Ari Sigit\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/a782d1235d484e7630007157996e5a49\"},\"headline\":\"Text\\\/Typography Bootstrap\",\"datePublished\":\"2018-10-29T04:21:28+00:00\",\"dateModified\":\"2018-10-29T04:39:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/text-typography-bootstrap\\\/\"},\"wordCount\":606,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/text-typography-bootstrap\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/bootstrap.png?fit=1200%2C630&ssl=1\",\"articleSection\":[\"v3\"],\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/text-typography-bootstrap\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/text-typography-bootstrap\\\/\",\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/text-typography-bootstrap\\\/\",\"name\":\"Text\\\/Typography Bootstrap - Hostnic.id\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/text-typography-bootstrap\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/text-typography-bootstrap\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/bootstrap.png?fit=1200%2C630&ssl=1\",\"datePublished\":\"2018-10-29T04:21:28+00:00\",\"dateModified\":\"2018-10-29T04:39:08+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/a782d1235d484e7630007157996e5a49\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/text-typography-bootstrap\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/text-typography-bootstrap\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/text-typography-bootstrap\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/bootstrap.png?fit=1200%2C630&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/bootstrap.png?fit=1200%2C630&ssl=1\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/bootstrap\\\/v3\\\/text-typography-bootstrap\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Text\\\/Typography Bootstrap\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/\",\"name\":\"hostnic.id\",\"description\":\"Info, Tips dan Tutorial Seputar Layanan Hostnic\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/a782d1235d484e7630007157996e5a49\",\"name\":\"Ari Sigit\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/140001cab6874fc4d4cecb4b3519ceca05b4fa2543ed46c5dae3704831ed3a2d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/140001cab6874fc4d4cecb4b3519ceca05b4fa2543ed46c5dae3704831ed3a2d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/140001cab6874fc4d4cecb4b3519ceca05b4fa2543ed46c5dae3704831ed3a2d?s=96&d=mm&r=g\",\"caption\":\"Ari Sigit\"},\"description\":\"Application Developer &amp; Support Specialist\",\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Text\/Typography Bootstrap - Hostnic.id","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/","og_locale":"id_ID","og_type":"article","og_title":"Text\/Typography Bootstrap - Hostnic.id","og_description":"Bootstrap Default Settings Bootstrap global ukuran huruf nya 14px, dengan tinggi line\u00a01.428. Yang di terapkan ke\u00a0&lt;body&gt; element dan semua paragrap (&lt;p&gt;). Tambahan, semua\u00a0&lt;p&gt; elemen memiliki margin bawah yang sama dengan setengah tinggi garis yang dihitung\u00a0(10px by default). Bootstrap vs. Browser Defaults Dalam artikel ini, kita akan melihat beberapa elemen HTML yang akan diberi gaya\u00a0sedikit berbeda [&hellip;]","og_url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/","og_site_name":"Hostnic.id","article_published_time":"2018-10-29T04:21:28+00:00","article_modified_time":"2018-10-29T04:39:08+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap.png","type":"image\/png"}],"author":"Ari Sigit","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":"Ari Sigit","Estimasi waktu membaca":"3 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#article","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/"},"author":{"name":"Ari Sigit","@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/a782d1235d484e7630007157996e5a49"},"headline":"Text\/Typography Bootstrap","datePublished":"2018-10-29T04:21:28+00:00","dateModified":"2018-10-29T04:39:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/"},"wordCount":606,"commentCount":0,"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap.png?fit=1200%2C630&ssl=1","articleSection":["v3"],"inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/","url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/","name":"Text\/Typography Bootstrap - Hostnic.id","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap.png?fit=1200%2C630&ssl=1","datePublished":"2018-10-29T04:21:28+00:00","dateModified":"2018-10-29T04:39:08+00:00","author":{"@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/a782d1235d484e7630007157996e5a49"},"breadcrumb":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#primaryimage","url":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap.png?fit=1200%2C630&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap.png?fit=1200%2C630&ssl=1","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/text-typography-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hostnic.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Text\/Typography Bootstrap"}]},{"@type":"WebSite","@id":"https:\/\/www.hostnic.id\/blog\/#website","url":"https:\/\/www.hostnic.id\/blog\/","name":"hostnic.id","description":"Info, Tips dan Tutorial Seputar Layanan Hostnic","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hostnic.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Person","@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/a782d1235d484e7630007157996e5a49","name":"Ari Sigit","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/secure.gravatar.com\/avatar\/140001cab6874fc4d4cecb4b3519ceca05b4fa2543ed46c5dae3704831ed3a2d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/140001cab6874fc4d4cecb4b3519ceca05b4fa2543ed46c5dae3704831ed3a2d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/140001cab6874fc4d4cecb4b3519ceca05b4fa2543ed46c5dae3704831ed3a2d?s=96&d=mm&r=g","caption":"Ari Sigit"},"description":"Application Developer &amp; Support Specialist","url":"https:\/\/www.hostnic.id\/blog\/author\/admin\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap.png?fit=1200%2C630&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8D2mv-kA","jetpack-related-posts":[{"id":1163,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/v3\/apa-itu-bootstrap\/","url_meta":{"origin":1276,"position":0},"title":"Apa itu Bootstrap?","author":"Ari Sigit","date":"2018-10-24","format":false,"excerpt":"Bootstrap adalah front-end framework gratis untuk kecepatan dan memudahkan merancang web Bootstrap berbasis HTML dan CSS untuk typography, forms, button, table, navigation, modal, image carousels dan banyak lagi,\u00a0 tentu juga JavaScript Bootstrap juga memiliki kemampuan mempermudah membuat design responsive Apa itu Desain Web Responsif? Desain web responsif adalah membuat situs\u2026","rel":"","context":"dalam &quot;v3&quot;","block_context":{"text":"v3","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/v3\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2018\/10\/bootstrap-example-fluid.png?fit=1200%2C900&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":7123,"url":"https:\/\/www.hostnic.id\/blog\/teknologi\/framework-front-end-bootstrap-membangun-antarmuka-yang-menarik\/","url_meta":{"origin":1276,"position":1},"title":"Framework Front-End Bootstrap: Membangun Antarmuka yang Menarik","author":"Monic","date":"2023-09-12","format":false,"excerpt":"Hostnic.id -\u00a0Halo pembaca yang budiman! Bagaimana kabar kalian? Semoga kalian semua dalam keadaan baik-baik saja. Kali ini, kita akan membahas tentang Framework Front-End Bootstrap: Membangun Antarmuka yang Menarik. Bootstrap merupakan salah satu framework yang populer di dunia pengembangan website. Dengan Bootstrap, kita dapat dengan mudah membuat antarmuka yang menarik dan\u2026","rel":"","context":"dalam &quot;Teknologi&quot;","block_context":{"text":"Teknologi","link":"https:\/\/www.hostnic.id\/blog\/.\/teknologi\/"},"img":{"alt_text":"Framework Front-End Bootstrap: Membangun Antarmuka yang Menarik","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/B.png?fit=1190%2C619&ssl=1%3Fv%3D1694532838&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/B.png?fit=1190%2C619&ssl=1%3Fv%3D1694532838&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/B.png?fit=1190%2C619&ssl=1%3Fv%3D1694532838&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/B.png?fit=1190%2C619&ssl=1%3Fv%3D1694532838&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/B.png?fit=1190%2C619&ssl=1%3Fv%3D1694532838&resize=1050%2C600 3x"},"classes":[]},{"id":4745,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/kelebihan-dan-kekurangan-bootstrap\/","url_meta":{"origin":1276,"position":2},"title":"Kelebihan dan Kekurangan Bootstrap","author":"Monic","date":"2021-04-07","format":false,"excerpt":"Pada artikel sebelumnya, kita sudah Mengenal Apa Itu Bootstrap Serta Keunggulannya. Dimana pengertian bootstrap adalah framework CSS yang dibuat khusus untuk mempermudah dan mempercepat dalam pengembangan front end sebuah website. Banyak alasan mengapa bootstrap menjadi salah satu framework yang cukup populer dan paling banyak digunakan oleh para developer.\u00a0 Berikut adalah\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"kelebihan dan kekurangan bootstrap","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/04\/bootstrap.jpg?fit=813%2C629&ssl=1%3Fv%3D1617766983&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/04\/bootstrap.jpg?fit=813%2C629&ssl=1%3Fv%3D1617766983&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/04\/bootstrap.jpg?fit=813%2C629&ssl=1%3Fv%3D1617766983&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/04\/bootstrap.jpg?fit=813%2C629&ssl=1%3Fv%3D1617766983&resize=700%2C400 2x"},"classes":[]},{"id":9295,"url":"https:\/\/www.hostnic.id\/blog\/teknologi\/template-website-sekolah-bootstrap-gratis-pendidikan-tanpa-batas\/","url_meta":{"origin":1276,"position":3},"title":"Template Website Sekolah Bootstrap Gratis: Pendidikan Tanpa Batas!","author":"Monic","date":"2024-03-09","format":false,"excerpt":"Hostnic\u00a0\u2013\u00a0Halo, pembaca yang terhormat! Bagaimana kabar kalian? Apakah semuanya baik-baik saja? Kami harap semuanya berjalan dengan lancar dalam kehidupan kalian. Pada kesempatan kali ini, kami ingin membahas tentang Template Website Sekolah Bootstrap Gratis. Dalam era digital yang semakin maju ini, penting bagi sekolah-sekolah untuk memiliki website yang menarik dan fungsional.\u2026","rel":"","context":"dalam &quot;Teknologi&quot;","block_context":{"text":"Teknologi","link":"https:\/\/www.hostnic.id\/blog\/.\/teknologi\/"},"img":{"alt_text":"Template Website Sekolah Bootstrap Gratis: Pendidikan Tanpa Batas!","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/Screenshot_3-1.jpg?fit=1200%2C646&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/Screenshot_3-1.jpg?fit=1200%2C646&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/Screenshot_3-1.jpg?fit=1200%2C646&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/Screenshot_3-1.jpg?fit=1200%2C646&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/03\/Screenshot_3-1.jpg?fit=1200%2C646&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":4738,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/mengenal-apa-itu-bootstrap-serta-keunggulannya\/","url_meta":{"origin":1276,"position":4},"title":"Mengenal Apa Itu Bootstrap Serta Keunggulannya","author":"Monic","date":"2021-04-06","format":false,"excerpt":"Pada artikel sebelumnya kita sudah membahas tentang Rekomendasi CSS Framework Terbaik dimana salah satu rekomendasinya adalah Bootstrap. Pengertian Framework sendiri adalah sebuah software yang bertujuan untuk memudahkan para developer atau programer dalam tahap membuat sebuah aplikasi atau website.\u00a0 Lantas, Apa Itu Bootstrap? Bagi sebagian depelover atau programming pasti sudah tidak\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"Apa Itu Bootstrap","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/04\/1953377.jpg?fit=1200%2C1200&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/04\/1953377.jpg?fit=1200%2C1200&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/04\/1953377.jpg?fit=1200%2C1200&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/04\/1953377.jpg?fit=1200%2C1200&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/04\/1953377.jpg?fit=1200%2C1200&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3926,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap-admin-dashboard-template\/","url_meta":{"origin":1276,"position":5},"title":"Bootstrap Admin Dashboard Template","author":"Nanda Anubis","date":"2020-09-02","format":false,"excerpt":"Hadirnya admin dashboard template saat ini membuat pengembangan web dan aplikasi menjadi lebih mudah. Dengan kumpulan template admin Bootstrap, Anda dapat menemukan toolkit user interface (UI) yang sesuai dengan proyek.\u00a0Bootstrap adalah kerangka kerja CSS paling populer yang menyediakan struktur dasar untuk web designer dan web developer. Template admin dashboard milik\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/09\/four-bootstrap-4-projects-400x277-1.jpg?fit=400%2C277&ssl=1%3Fv%3D1599064894&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/1276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/comments?post=1276"}],"version-history":[{"count":8,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/1276\/revisions"}],"predecessor-version":[{"id":1284,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/1276\/revisions\/1284"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media\/1273"}],"wp:attachment":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media?parent=1276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/categories?post=1276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/tags?post=1276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}