{"id":16256,"date":"2013-01-23T21:01:47","date_gmt":"2013-01-23T13:01:47","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16256"},"modified":"2025-04-04T01:27:35","modified_gmt":"2025-04-03T17:27:35","slug":"twitter-bootstrap","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/","title":{"rendered":"Getting Started with Twitter Bootstrap"},"content":{"rendered":"<p><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/building-great-website-with-less\/\" rel=\"noopener\">Building a website from the ground<\/a> up is very hard. Even some people who are able to code in web languages like <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css-javascript-fallback-methods\/\" rel=\"noopener\">JavaScript, HTML and CSS<\/a> would find difficulties in the process. Fortunately, a few Twitter developers and designers are aware of this situation and had launched a framework called <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/getbootstrap.com\/\">Bootstrap<\/a><\/strong> to make life easier for web designers and developers.<\/p>\n<p>And, in this post, we are going to look into Bootstrap and try out a few of the features provided, to see how this framework can speed up our web development process.<\/p>\n<h2>Utilizing Bootstrap<\/h2>\n<p>Bootstrap is a very powerful framework for front-end development, and is equipped with a bunch of features we need to develop a fully functional website faster and easier without having to build it from scratch. Some of the features included in Bootstrap are:<\/p>\n<ul>\n<li>CSS grid for creating <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/tag\/rwd\/\" rel=\"noopener\">responsive layout<\/a><\/li>\n<li>CSS base for <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/tag\/typography\/\" rel=\"noopener\">typography<\/a>, <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/design-winning-buy-button-tips\/\" rel=\"noopener\">buttons<\/a>, <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/login-registration-form\/\" rel=\"noopener\">forms<\/a>, <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/html-table-building-30-beautiful-examples-and-useful-javascripts\/\" rel=\"noopener\">tables<\/a> and images<\/li>\n<li>User interface components such as <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/tag\/interface-design\/\" rel=\"noopener\">navigation<\/a>, progress bars, alerts, pagination, <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/\" rel=\"noopener\">breadcrumbs<\/a>, etc. with consistent and modern styles<\/li>\n<li>jQuery plugins to build an interactive experience on the website<\/li>\n<\/ul>\n<p>Now, we assume that you have <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/getbootstrap.com\/docs\/5.0\/getting-started\/download\/\">downloaded Bootstrap<\/a><\/strong> and have all the assets on set including the JavaScript and the CSS as follows:<\/p>\n<pre>\r\n &lt;link rel=\"stylesheet\" href=\"css\/bootstrap.css\"&gt;\r\n &lt;script src=\"js\/bootstrap.min.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n <\/pre>\n<p>We can start trying out some of these features.<\/p>\n<h3>CSS Base: Button<\/h3>\n<p>Bootstrap has Base CSS that consists of styles for some fundamental HTML elements including the <code>&lt;button&gt;<\/code> element. Button is a common element found in a website and in Bootstrap the button style is applied with <code>btn<\/code> class;<\/p>\n<pre>\r\n &lt;button type=\"button\" class=\"btn\"&gt;Default Button&lt;\/button&gt;\r\n <\/pre>\n<p>This markup results in the following presentation which is the default style for a button;<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/twitter-bootstrap\/button-styles.jpg?newedit\" alt=\"button styles\" width=\"500\" height=\"280\"><\/figure>\n<p>We can also apply additional classes to define the button\u2019s role;<\/p>\n<pre>\r\n &lt;button type=\"button\" class=\"btn btn-success\"&gt;Button&lt;\/button&gt;\r\n &lt;button type=\"button\" class=\"btn btn-warning\"&gt;Button&lt;\/button&gt;\r\n &lt;button type=\"button\" class=\"btn btn-danger\"&gt;Button&lt;\/button&gt;\r\n <\/pre>\n<p>Depending on the role, each button will be given a different color:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/twitter-bootstrap\/button-colors.jpg?newedit\" alt=\"button colors\" width=\"500\" height=\"280\"><\/figure>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css-back-to-basics-terminology-explained\/\" class=\"ref-block__link\" title=\"Read More: CSS Terminologies Explained\" rel=\"bookmark\"><span class=\"screen-reader-text\">CSS Terminologies Explained<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-back-to-basics-terminology-explained.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-9063 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-back-to-basics-terminology-explained.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">CSS Terminologies Explained<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tCSS has become the most popular language for front-end design and has amazing abilities with the release of...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<p>The Bootstrap style is built with <strong>LESS<\/strong>. We have actually covered <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/tag\/less\/\" rel=\"noopener\">LESS<\/a> a couple of times before, and if you have familiar with this CSS preprocessor, we suggest you use it instead of using regular CSS; that way the styles will be much more configurable.<\/p>\n<p>For example, let\u2019s say the color of the \u201csuccess button\u201d above doesn\u2019t fit quite well with our design; we can simply change the variables provided in <code>variables.less<\/code> file, like so;<\/p>\n<pre>\r\n @btnSuccessBackground: #bce895; \/\/#62c462;\r\n @btnSuccessBackgroundHighlight: #a0cd78; \/\/#51a351;\r\n <\/pre>\n<p>Since the other arguments such as the shadows and gradients have been pre-configured, the styles will be automatically adjusted and will result in the following presentation;<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/twitter-bootstrap\/button-less.jpg?newedit\" alt=\"button less\" width=\"500\" height=\"280\"><\/figure>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-2\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/less-tips-tools\/\" class=\"ref-block__link\" title=\"Read More: Effective Tips and Tools for Working with LESS\" rel=\"bookmark\"><span class=\"screen-reader-text\">Effective Tips and Tools for Working with LESS<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/less-tips-tools.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-14547 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/less-tips-tools.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Effective Tips and Tools for Working with LESS<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tIn our previous tutorial on using LESS to design a navigation bar, we explored the practical use of...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h3>User Interface Components<\/h3>\n<p>Bootstrap also provides some reusable UI components for navigation, pagination, progress bars, buttons and many more. Adding these components are also as easy as styling the buttons in previous sections and, in this example, we will enhance those buttons and put them into a group of buttons, like so;<\/p>\n<pre>\r\n &lt;div class=\"btn-group\"&gt;\r\n &lt;button type=\"button\" class=\"btn btn-success\"&gt;Button&lt;\/button&gt;\r\n &lt;button type=\"button\" class=\"btn btn-warning\"&gt;Button&lt;\/button&gt;\r\n &lt;button type=\"button\" class=\"btn btn-danger\"&gt;Button&lt;\/button&gt;\r\n &lt;\/div&gt;\r\n <\/pre>\n<p>Notice our buttons are now wrapped inside a <code>&lt;div&gt;<\/code> with <code>btn-group<\/code> class, this will result in the following presentation;<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/twitter-bootstrap\/button-group.jpg?newedit\" alt=\"button group\" width=\"500\" height=\"280\"><\/figure>\n<p>We can also add this an extra class, <code>btn-group-vertical<\/code> to flow the button vertically;<\/p>\n<pre>\r\n &lt;div class=\"btn-group btn-group-vertical\"&gt;\r\n &lt;button type=\"button\" class=\"btn btn-success\"&gt;Button&lt;\/button&gt;\r\n &lt;button type=\"button\" class=\"btn btn-warning\"&gt;Button&lt;\/button&gt;\r\n &lt;button type=\"button\" class=\"btn btn-danger\"&gt;Button&lt;\/button&gt;\r\n &lt;\/div&gt;\r\n <\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/twitter-bootstrap\/button-group-vertical.jpg?newedit\" alt=\"button vertical group\" width=\"500\" height=\"280\"><\/figure>\n<h3>jQuery Plugins<\/h3>\n<p>I still remember when I first created a static website and have to jump around from one website to another to find a suitable plugin to apply an interactive feature on the website. You need not experience the same roundaround with Bootstrap as it comes with several jQuery plugins like Accordion, Modal, Tooltip, Popup, Tab and many more.<\/p>\n<p>In the following example, we are going to apply Tooltip Plugin from Bootstrap.<\/p>\n<pre>\r\n &lt;p id=\"container\"&gt;Jujubes icing oat cake \r\n &lt;a href=\"#\" rel=\"tooltip\" title=\"a Lolipop Tiramissu?\"&gt;lollipop tiramisu&lt;\/a&gt;. \r\n Tiramisu sesame snaps croissant chupa chups chupa chups chocolate cake candy sugar plum \r\n jelly beans. Lollipop pudding jelly sweet jujubes cookie pudding. Oat cake topping gummi \r\n bears oat cake. Muffin jelly-o cake sesame snaps ice cream cotton candy.&lt;\/p&gt; \r\n <\/pre>\n<p>Notice that we have added a link with <code>rel<\/code> and <code>title<\/code> attribute on it. This is the link that will show a tooltip when we hover over it. To activate the tooltip we can simply add the following script;<\/p>\n<pre>\r\n $('#container').tooltip({\r\n selector: \"a[rel=tooltip]\"\r\n });\r\n <\/pre>\n<p>This script will target every link under <code>#container<\/code> with <code>rel=tooltip<\/code>;<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/twitter-bootstrap\/bootstrap-tooltip.jpg?newedit\" alt=\"boostrap tooltip\" width=\"500\" height=\"280\"><\/figure>\n<p>As we can see, adding <strong>Tooltip<\/strong> with Bootstrap plugins are fairly straightforward and unlike the olden days (where sometimes we can run into conflict and errors when applying several different plugins), these plugins \u2013 Tooltip, Popup, Tabs, etc \u2013 can work flawlessly all together.<\/p>\n<h2>Customization<\/h2>\n<p>Bootstrap is a huge framework; in certain circumstances this could be just too much. For that reason, Bootstrap also provides a dedicated page for customization. There are a few things we can customize in this page starting from the color variables to the plugins that we need.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/twitter-bootstrap\/customize.jpg?newedit\" alt=\"customize bootstrap\" width=\"500\" height=\"280\"><\/figure>\n<h3>Now Read:\n  <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/twitter-tools\/\" onclick=\"_gaq.push(['_trackEvent', 'readmore', 'internal', 'general']);\" rel=\"noopener\">80 Twitter Tools for Almost Everything<\/a><\/h3>\n<figure><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/twitter-tools\/\" onclick=\"_gaq.push(['_trackEvent', 'readmore', 'internal', 'general']);\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/twitter-tools\/twitter-tools.jpg?newedit?newedit\" width=\"1000\" height=\"623\"><\/a><\/figure>","protected":false},"excerpt":{"rendered":"<p>Building a website from the ground up is very hard. Even some people who are able to code in web languages like JavaScript, HTML and CSS would find difficulties in the process. Fortunately, a few Twitter developers and designers are aware of this situation and had launched a framework called Bootstrap to make life easier&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2289,166],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Getting Started with Twitter Bootstrap - Hongkiat<\/title>\n<meta name=\"description\" content=\"Building a website from the ground up is very hard. Even some people who are able to code in web languages like JavaScript, HTML and CSS would find\" \/>\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.hongkiat.com\/blog\/twitter-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Started with Twitter Bootstrap\" \/>\n<meta property=\"og:description\" content=\"Building a website from the ground up is very hard. Even some people who are able to code in web languages like JavaScript, HTML and CSS would find\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-01-23T13:01:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:27:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/twitter-bootstrap\/button-styles.jpg?newedit\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/twitter-bootstrap\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/twitter-bootstrap\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Getting Started with Twitter Bootstrap\",\"datePublished\":\"2013-01-23T13:01:47+00:00\",\"dateModified\":\"2025-04-03T17:27:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/twitter-bootstrap\\\/\"},\"wordCount\":702,\"commentCount\":52,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/twitter-bootstrap\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/twitter-bootstrap\\\/button-styles.jpg?newedit\",\"keywords\":[\"Bootstrap\",\"Twitter\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/twitter-bootstrap\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/twitter-bootstrap\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/twitter-bootstrap\\\/\",\"name\":\"Getting Started with Twitter Bootstrap - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/twitter-bootstrap\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/twitter-bootstrap\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/twitter-bootstrap\\\/button-styles.jpg?newedit\",\"datePublished\":\"2013-01-23T13:01:47+00:00\",\"dateModified\":\"2025-04-03T17:27:35+00:00\",\"description\":\"Building a website from the ground up is very hard. Even some people who are able to code in web languages like JavaScript, HTML and CSS would find\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/twitter-bootstrap\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/twitter-bootstrap\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/twitter-bootstrap\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/twitter-bootstrap\\\/button-styles.jpg?newedit\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/twitter-bootstrap\\\/button-styles.jpg?newedit\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/twitter-bootstrap\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Started with Twitter Bootstrap\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Getting Started with Twitter Bootstrap - Hongkiat","description":"Building a website from the ground up is very hard. Even some people who are able to code in web languages like JavaScript, HTML and CSS would find","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.hongkiat.com\/blog\/twitter-bootstrap\/","og_locale":"en_US","og_type":"article","og_title":"Getting Started with Twitter Bootstrap","og_description":"Building a website from the ground up is very hard. Even some people who are able to code in web languages like JavaScript, HTML and CSS would find","og_url":"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-01-23T13:01:47+00:00","article_modified_time":"2025-04-03T17:27:35+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/twitter-bootstrap\/button-styles.jpg?newedit","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Getting Started with Twitter Bootstrap","datePublished":"2013-01-23T13:01:47+00:00","dateModified":"2025-04-03T17:27:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/"},"wordCount":702,"commentCount":52,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/twitter-bootstrap\/button-styles.jpg?newedit","keywords":["Bootstrap","Twitter"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/","url":"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/","name":"Getting Started with Twitter Bootstrap - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/twitter-bootstrap\/button-styles.jpg?newedit","datePublished":"2013-01-23T13:01:47+00:00","dateModified":"2025-04-03T17:27:35+00:00","description":"Building a website from the ground up is very hard. Even some people who are able to code in web languages like JavaScript, HTML and CSS would find","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/twitter-bootstrap\/button-styles.jpg?newedit","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/twitter-bootstrap\/button-styles.jpg?newedit"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Getting Started with Twitter Bootstrap"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4ec","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=16256"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16256\/revisions"}],"predecessor-version":[{"id":73566,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16256\/revisions\/73566"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=16256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=16256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=16256"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=16256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}