{"id":17992,"date":"2017-08-07T11:00:00","date_gmt":"2017-08-07T08:00:00","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=17992"},"modified":"2018-01-08T13:05:47","modified_gmt":"2018-01-08T11:05:47","slug":"tutorial-learn-twitter-bootstrap-quickly","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/","title":{"rendered":"Tutorial: Learn Twitter Bootstrap Quickly"},"content":{"rendered":"

The aim of this tutorial is to get you up and running with Twitter Bootstrap framework quickly. Twitter Bootstrap has soared in popularity over the years and continues to be the go-to resource for front-end development. Let us explore the most common and frequently used components, features and css classes of this framework to get you up to speed.
\n 
\n 
\n 
\n 
\n[ulp id=’57DHuNTHJ2qczaGz’]
\n 
\nWe will also look at responsive web design and the fluid grid layout of Bootstrap.<\/p>\n

\n

Table of Content<\/h3>\n
\n
1. Introduction<\/a><\/dt>\n
\n
\n
1.1 Responsive Design<\/a><\/dt>\n
1.2 Grid Layout<\/a><\/dt>\n
1.3 Tools<\/a><\/dt>\n<\/dl>\n<\/dd>\n
2. Grid Layout System<\/a><\/dt>\n
3. CSS Classes<\/a><\/dt>\n
\n
\n
3.1 Typography & Code CSS Classes<\/a><\/dt>\n
3.2 Html Widgets<\/a><\/dt>\n
3.3 Helper & Utility Classes<\/a><\/dt>\n<\/dl>\n<\/dd>\n
4. Components<\/a><\/dt>\n
5. Download the Source Code<\/a><\/dt>\n<\/dl>\n<\/div>\n

<\/a>1. Introduction<\/h2>\n

Bootstrap is a popular framework for developing responsive, mobile first front ends for web applications and websites. It owes its popularity in part to the speed of development possible when using Bootstrap. But the critical aspects are responsiveness and mobile first approach. Let us discuss each of these two terms and what is implied by them.<\/p>\n

<\/a>1.1 Responsive Design<\/h3>\n

A responsive UI is, one that is, able to detect the user’s screen size & device orientation and adjust the layout of UI elements accordingly. To enable this, Bootstrap uses media queries. A media query is a CSS3 technique for applying a block of css rules if a condition is true.<\/p>\n

<\/a>1.2 Grid Layout<\/h3>\n

The grid system applied by Bootstrap divides the layout into a grid with 12 columns in each row. We place our content in the columns of each row. As the screen width decreases so does the width of each column, till user specified breakpoint is reached and then the content starts to stack.<\/p>\n

<\/a>1.3 Tools<\/h3>\n

The tools used while working on this demo application are the followings:
\n1. Bootstrap v3.3.7<\/a>
\n2. JQuery v1.12.4<\/a>
\n3. Node.js v6.3.0<\/a>
\n4. Express<\/a>
\n5. Visual Studio Code IDE<\/a><\/p>\n

<\/a>2. Grid Layout System<\/h2>\n

Let us see, through an example, how the fluid grid layout system of Bootstrap works. A clear understanding of the same will help us leverage it in any project.<\/p>\n

To create a grid layout we need to use the css classes .container, .row, .col-screen size<\/i>-number of columns<\/i><\/code> and place our contents in the cells. So our basic grid would look like the below snippet:<\/p>\n

<div class=\"container\">\r\n    <div class=\"row\">\r\n        <div class=\"col-md-3\"><\/div>\r\n...\r\n\r\n    <\/div>\r\n<\/div>\r\n<\/pre>\n
In the grid created above, our content shall rest in one of div<\/code> decorated with col-*-*<\/code> classes. Take a close look at the css class on the innermost div<\/code>, it has 3 components in its css class name. First implies that it is a column and the next md<\/code> implies the break point or in other words at any screen size below md<\/code> this column can be stacked. The third component “3” tells bootstrap that this column would span across 3 columns of the layout grid. One thing to note here, is that the sum of the number on all columns in a row must add up to 12, otherwise things can get awry leading to unexpected results. Lastly the below figure gives us an overview of the breakpoints used for the Fluid Grid Layout of Bootstrap.<\/p>\n
\"\"<\/a>
Screen Size — CSS Class<\/figcaption><\/figure>\n
<\/a>3. CSS Classes<\/h2>\n
The Bootstrap CSS library boasts of a large set of css classes to enable us to create impressive UIs really quickly. Let us take a look at some of the most used ones quickly. These classes can be classified into the following categories pointing to their purpose and intended use.<\/p>\n
<\/a>3.1 Typography & Code CSS Classes<\/h3>\n
By typography we mean the visual aspect or the display style of written words. These classes do not alter the content itself but provide assistance and options to manipulate their visual rendering. Classes for Html headers from h1...h6<\/code> are available which match text size yet the content itself appears inline. The font size is set to 14px<\/code> which is the default for the body. There are classes for showing text as deleted, strikethrough, inserted, underlined, capitalized, lowercase or uppercase, left-aligned, right-aligned, justified, without wrapping or marked style. A summary of these classes and their effects is displayed in the images below:<\/p>\n
\"\"<\/a>
Typography Demo<\/figcaption><\/figure>\n
Classes are available and allow us to display text as computer program snippets or keyboard shortcuts. A summary of such classes is provided in the screenshot below:<\/p>\n
\"\"<\/a>
Code CSS Classes<\/figcaption><\/figure>\n
The Html markup for the above looks like below:<\/p>\n
index.html<\/em><\/span><\/p>\n
...\r\n<div class=\"container\">\r\n    <div class=\"row\">\r\n        <div class=\"col-md-6\">\r\n            <div class=\"panel panel-info\">\r\n                <div class=\"panel-heading\">\r\n                    Heading Classes\r\n                <\/div>\r\n                <div class=\"panel-body\">\r\n                    <div class=\"h1\">h1 Heading<\/div>\r\n                    <div class=\"h2\">h2 Heading<\/div>\r\n                    <div class=\"h3\">h3 Heading<\/div>\r\n                    <div class=\"h4\">h4 Heading<\/div>\r\n                    <div class=\"h5\">h5 Heading<\/div>\r\n                    <div class=\"h6\">h6 Heading<\/div>\r\n                <\/div>\r\n            <\/div>\r\n    <\/div>\r\n    <div class=\"col-md-6\">\r\n        <div class=\"panel panel-info\">\r\n            <div class=\"panel-heading\">More Typography Classes<\/div>\r\n            <div class=\"panel-body\">\r\n                <div class=\"container\">\r\n                    <div class=\"row\">\r\n                        This is a <mark>marked<\/mark> text.\r\n                    <\/div>\r\n                    <div class=\"row\">\r\n                        This text appears <del>deleted<\/del>.\r\n                    <\/div>\r\n                    <div class=\"row\">\r\n                        This is a <sk>strikethrough<\/s> text.\r\n                    <\/div>\r\n                    <div class=\"row\">\r\n                        This is a <ins>inserted<\/ins> text.\r\n                    <\/div>\r\n                    <div class=\"row\">\r\n                        This is <u>underlined<\/u> text.\r\n                    <\/div>\r\n                    <div class=\"row\">\r\n                        This is a <small>small<\/small> text.\r\n                    <\/div>\r\n                    <div class=\"row\">\r\n                        This is <em>italic<\/em> text.\r\n                    <\/div>\r\n                    <div class=\"row\">\r\n                        This is <strong>bold<\/strong> text.\r\n                    <\/div>\r\n                    <div class=\"row\">\r\n                        <p class=\"text-uppercase\">This is effect of .text-upperclass class<\/p>\r\n                    <\/div>\r\n                    <div class=\"row\">\r\n                        <p class=\"text-lowercase\">This is effect of .text-lowercase class<\/p>\r\n                    <\/div>\r\n                    <div class=\"row\">\r\n                        <p class=\"text-capitalize\">This is how .text-capitalize works<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n<div class=\"row\">\r\n    <div class=\"col-md-6\">\r\n        <div class=\"panel panel-info\">\r\n            <div class=\"panel-heading\">More Typography Classes<\/div>\r\n                <div class=\"panel-body\">\r\n\r\n                    <p class=\"text-left\">This is the effect of .text-left class<\/p>\r\n\r\n                    <p class=\"text-right\"> This is the effect of .text-right class<\/p>\r\n\r\n                    <p class=\"text-center\">This is the effect of .text-center class<\/p>\r\n\r\n                    <p class=\"text-justify\">This is the effect of .text-justify class<\/p>\r\n\r\n                    <p class=\"text-nowrap\">This is the effect of .text-nowrap Class<\/p>\r\n\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"col-md-6\">\r\n            <div class=\"panel panel-info\">\r\n                <div class=\"panel-heading\">More Typography Classes<\/div>\r\n                    <div class=\"panel-body\">\r\n                        <abbr title=\"Ordered Lists\">Lists Ord.<\/abbr>\r\n                        <ul>\r\n                            <li>One<\/li>\r\n                            <li>Two<\/li>\r\n                            <li>Three<\/li>\r\n                        <\/ul>\r\n                        <abbr title=\"Unordered Lists\">Lists Un.<\/abbr>\r\n                        <ol>\r\n                            <li>One<\/li>\r\n                            <li>Two<\/li>\r\n                            <li>Three<\/li>\r\n                        <\/ol>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"row\">\r\n            <div class=\"col-md-6\">\r\n                <div class=\"panel panel-info\">\r\n                     <div class=\"panel-heading\">Code CSS Classes<\/div>\r\n                     <div class=\"panel-body\">\r\n<pre>\r\nThis is a demonstration of the code Classes\r\nusing which we can display code inline with the\r\ncode tags like so.<\/pre>\r\n<code>int i = 0;<\/code>\r\n<pre>\r\nAdditionally we can show keyboard shortcuts with the kbd tags\r\nas in\r\nUse <\/pre><kbd>Ctrl+c<\/kbd><pre> to copy\r\nTo show the use of variables we can write so<\/pre>\r\n<var>y<\/var> = <var>x<\/var> + 5\r\n<pre>Sample output can be shown using samp tags<\/pre>\r\n<samp>The square of 2 is 4<\/samp>\r\n<pre>This entire section has been wrapped in pre tag to\r\nindicate that it is pre formatted text.\r\n<\/pre>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n...\r\n<\/pre>\n
<\/a>3.2 Html widgets<\/h3>\n
Bootstrap provides a whole host of stylized versions of the simple Table, Form, Button, Image tags in Html.
\nThe below screenshot demonstrates these tags and the possibilities that Bootstrap can make happen with very little effort. The first couple of Screenshots demonstrate the different table styles including Simple, Striped, Bordered, Condensed using classes .table, .table.table-striped, .table.table-bordered, .table.table-condensed<\/code> respectively.<\/p>\n
\"\"<\/a>
Html Widgets — Table Demo 1<\/figcaption><\/figure>\n
\"\"<\/a>
Html Widgets — Table Demo 2<\/figcaption><\/figure>\n
We can leverage the Forms classes to layout forms and their controls in various fashion as per our need. Some examples of how the .form, .form-inline, .form-horizontal<\/code> CSS classes for forms and .form-group, .form-control<\/code> CSS classes for contained controls work is displayed in the screenshots below:<\/p>\n
\"\"<\/a>
Html Widgets — Form Controls 1<\/figcaption><\/figure>\n
\"\"<\/a>
Html Widgets – Form Controls 2<\/figcaption><\/figure>\n
The Html markup for the above looks as below:<\/p>\n
index.html<\/em><\/span><\/p>\n
...\r\n<div class=\"col-md-6\">\r\n    <div class=\"panel panel-info\">\r\n        <div class=\"panel-heading\">Html Widgets\r\n        <\/div>\r\n        <div class=\"panel-body\">\r\n\r\n            <table class=\"table\">\r\n                <caption>Example of a Basic Table decorated with .table class<\/caption>\r\n                <thead>\r\n                    <tr><th>Serial #<\/th>\r\n<th>Planet Name<\/th><th>Number of Moons<\/th><\/tr>\r\n                <\/thead>\r\n                <tbody>\r\n                    <tr><td>1<\/td><td>Mercury<\/td><td>0<\/td><\/tr>\r\n                    <tr><td>2<\/td><td>Venus<\/td><td>0<\/td><\/tr>\r\n                    <tr><td>3<\/td><td>Earth<\/td><td>1<\/td><\/tr>\r\n                    <tr><td>4<\/td><td>Mars<\/td><td>2<\/td><\/tr>\r\n                <\/tbody>\r\n            <\/table>\r\n            <table class=\"table table-striped\">\r\n                <caption>Example of a Basic Table decorated with .table.table-striped class<\/caption>\r\n                <thead>\r\n                    <tr><th>Serial #<\/th>\r\n<th>Planet Name<\/th><th>Number of Moons<\/th><\/tr>\r\n                <\/thead>\r\n                <tbody>\r\n                    <tr><td>1<\/td><td>Mercury<\/td><td>0<\/td><\/tr>\r\n                    <tr><td>2<\/td><td>Venus<\/td><td>0<\/td><\/tr>\r\n                    <tr><td>3<\/td><td>Earth<\/td><td>1<\/td><\/tr>\r\n\r\n                <\/tbody>\r\n            <\/table>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n<div class=\"row\">\r\n    <div class=\"col-md-6\">\r\n        <div class=\"panel panel-info\">\r\n            <div class=\"panel-heading\">Html Widgets\r\n        <\/div>\r\n        <div class=\"panel-body\">\r\n\r\n            <table class=\"table table-bordered\">\r\n                <caption>Example of a Table decorated with .table.table-bordered class<\/caption>\r\n                <thead>\r\n                    <tr><th>Serial #<\/th>\r\n<th>Planet Name<\/th><th>Number of Moons<\/th><\/tr>\r\n                <\/thead>\r\n                <tbody>\r\n                    <tr><td>1<\/td><td>Mercury<\/td><td>0<\/td><\/tr>\r\n                    <tr><td>2<\/td><td>Venus<\/td><td>0<\/td><\/tr>\r\n                    <tr><td>3<\/td><td>Earth<\/td><td>1<\/td><\/tr>\r\n                    <tr><td>4<\/td><td>Mars<\/td><td>2<\/td><\/tr>\r\n                <\/tbody>\r\n            <\/table>\r\n            <table class=\"table table-condensed\">\r\n                <caption>Example of a Basic Table decorated with .table.table-condensed class<\/caption>\r\n                <thead>\r\n                    <tr><th>Serial #<\/th>\r\n<th>Planet Name<\/th><th>Number of Moons<\/th><\/tr>\r\n                <\/thead>\r\n                <tbody>\r\n                    <tr><td>1<\/td><td>Mercury<\/td><td>0<\/td><\/tr>\r\n                    <tr><td>2<\/td><td>Venus<\/td><td>0<\/td><\/tr>\r\n                    <tr><td>3<\/td><td>Earth<\/td><td>1<\/td><\/tr>\r\n\r\n                <\/tbody>\r\n            <\/table>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n<div class=\"col-md-6\">\r\n    <div class=\"panel panel-info\">\r\n        <div class=\"panel-heading\">Form Controls -- Simple Form\r\n    <\/div>\r\n    <div class=\"panel-body\">\r\n        <form class=\"form\">\r\n            <div class=\"form-group\">\r\n                <label for=\"username\">Email\/Mobile No.<\/label>\r\n                <input type=\"text\" class=\"form-control\" id=\"username\" placeholder=\"Enter Username\" \/>\r\n            <\/div>\r\n            <div class=\"form-group\">\r\n                <label for=\"password\">Password<\/label>\r\n                <input type=\"password\" class=\"form-control\" id=\"password\" placeholder=\"Enter Password\" \/>\r\n            <\/div>\r\n            <button class=\"btn btn-danger\">Cancel<\/button>\r\n            <input class=\"btn btn-success\" type=\"submit\" value=\"Submit\" \/>\r\n\r\n\r\n        <\/form>\r\n    <\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\">\r\n    <div class=\"col-md-12\">\r\n        <div class=\"panel panel-info\">\r\n            <div class=\"panel-heading\">Inline Form for screen size till 768px<\/div>\r\n            <div class=\"panel-body\">\r\n                <form class=\"form-inline\">\r\n                    <div class=\"form-group\">\r\n                        <label for=\"username\">Email\/Mobile No.<\/label>\r\n                        <input type=\"text\" class=\"form-control\" id=\"username\" placeholder=\"Enter Username\" \/>\r\n                        <label for=\"password\">Password<\/label>\r\n                        <input type=\"password\" class=\"form-control\" id=\"password\" placeholder=\"Enter Password\" \/>\r\n                    <\/div>\r\n                    <button class=\"btn btn-danger\">Cancel<\/button>\r\n                    <input class=\"btn btn-success\" type=\"submit\" value=\"Submit\" \/>\r\n\r\n\r\n                 <\/form>\r\n             <\/div>\r\n         <\/div>\r\n<\/div>\r\n<div class=\"row\">\r\n    <div class=\"col-md-12\">\r\n        <div class=\"panel panel-info\">\r\n            <div class=\"panel-heading\">Horizontal form decorated with .form-horizontal class\r\n        <\/div>\r\n        <div class=\"panel-body\">\r\n            <form class=\"form-horizontal\">\r\n                <div class=\"form-group\">\r\n                    <label for=\"username\" class=\"control-label col-sm-2\">Email\/Mobile No.<\/label>\r\n                    <div class=\"col-sm-10\">\r\n                        <input type=\"text\" class=\"form-control\" id=\"username\" placeholder=\"Enter Username\" \/>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label for=\"password\" class=\"control-label col-sm-2\">Password<\/label>\r\n                        <div class=\"col-sm-10\">\r\n                            <input type=\"password\" class=\"form-control\" id=\"password\" placeholder=\"Enter Password\" \/>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <button class=\"btn btn-danger\">Cancel<\/button>\r\n                    <input class=\"btn btn-success\" type=\"submit\" value=\"Submit\" \/>\r\n\r\n\r\n                <\/form>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n...\r\n<\/pre>\n
<\/a>3.3 Helper & Utility Classes<\/h3>\n
Bootstrap provides quite a few CSS classes that help with displaying text in different colors to indicate the context of the text like if it is a warning message or just information that needs attention etc. Not only this, there are classes to color the entire background with contextual colors, as they are called. Then there are classes to fix issues with the grid layout system or to customize it further, like classes to pull or push columns by a few places. These classes are demonstrated in the screenshots below.<\/p>\n
\"\"<\/a>
Contextual Colors<\/figcaption><\/figure>\n
The Html markup for the above is a follows:<\/p>\n
index.html<\/em><\/span><\/p>\n
...\r\n<div class=\"col-md-6\">\r\n    <div class=\"panel panel-info\">\r\n        <div class=\"panel-heading\">\r\n            Helper Classes & Utilities\r\n        <\/div>\r\n        <div class=\"panel-body\">\r\n            <p>This is a demo of the many contextual colors\r\n            provided by Bootstrap to communicate additional\r\n            context using colors as well.\r\n            <\/p>\r\n            <p class=\"text-muted\">This is muted text.<\/p>\r\n            <p class=\"text-success\">While this one indicates success<\/p>\r\n            <p class=\"text-info\">This is what simple informational message looks like.<\/p>\r\n            <p class=\"text-danger\">Danger!<\/p>\r\n            <p class=\"text-primary\">This is primary colored text.<\/p>\r\n            <p class=\"text-warning\">Warning!<\/p>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n<div class=\"col-md-6\">\r\n    <div class=\"panel panel-info\">\r\n        <div class=\"panel-heading\">\r\n            Helper Classes & Utilities\r\n        <\/div>\r\n        <div class=\"panel-body\">\r\n            <p>This is a demo of the many contextual colors\r\n            provided by Bootstrap to communicate additional\r\n            context using colors as well. Here they are applied as\r\n            Background color instead of text color.\r\n            <\/p>\r\n            <p class=\"bg-muted\">This is muted text.<\/p>\r\n            <p class=\"bg-success\">While this one indicates success<\/p>\r\n            <p class=\"bg-info\">This is what simple informational message looks like.<\/p>\r\n            <p class=\"bg-danger\">Danger!<\/p>\r\n            <p class=\"bg-primary\">This is primary colored text.<\/p>\r\n            <p class=\"bg-warning\">Warning!<\/p>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n...\r\n<\/pre>\n
Apart from Helper classes there are certain Utility classes that help with turn visibility on or off for content at specific screen sizes. This is the reason they are referred to as Responsive Utilities since they have to do with the screen or viewport size. For example, to ensure an element is only visible on Tablets we can use the following CSS Class.<\/p>\n
visible-sm-*\r\n<\/pre>\n
Similarly, we can ensure an element is always hidden on Mobile device by decorating with the following CSS Class.<\/p>\n
hidden-xs\r\n<\/pre>\n
<\/a>4. Components<\/h2>\n
Bootstrap provides quite a few components for immediate use. Let us see these components, namely Glyphicons, Dropdowns, Nav, Breadcrumbs, Pagination, Jumbotrons and others in action.<\/p>\n
There are a couple of hundred or more glyphs available for free usage with Bootstrap. We need to decorate a span tag with the appropriate CSS Class to use them. For example to use the cloud glyph we need to use the following markup:<\/p>\n
...\r\n<span class=\"glyphicon glyphicon-cloud\" aria-hidden=\"true\"><\/span>\r\n...\r\n<\/pre>\n
Moving on to the next component, namely Dropdowns, we can build one using a div<\/code> decorated with dropdown<\/code> class. This div contains the list of options enclosed in an unordered list. The final markup ought to look like:<\/p>\n
Component.html<\/em><\/span><\/p>\n
...\r\n<div class=\"dropdown\">\r\n    <button class=\"btn btn-default dropdown-toggle\" type=\"button\" id=\"ddMenu\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"true\">\r\n        Dropdown\r\n        <span class=\"caret\"><\/span>\r\n    <\/button>\r\n    <ul class=\"dropdown-menu\" aria-labelledby=\"ddMenu\">\r\n        <li><a href=\"#\">First Action<\/a><\/li>\r\n        <li><a href=\"#\">Second Action<\/a><\/li>\r\n        <li role=\"separator\" class=\"divider\"><\/li>\r\n        <li><a href=\"#\">Separator above this one<\/a><\/li>\r\n    <\/ul>\r\n<\/div>\r\n...\r\n<\/pre>\n
Navigation bars are an absolute must on every sites with multiple pages or even SPAs. Bootstrap has a CSS class nav<\/code> that provide us a really flexible navigation bar option. The image below shows a tabbed nav in action.<\/p>\n
\"\"<\/a>
Nav Tabs Demo<\/figcaption><\/figure>\n
The Html markup to create the above is as simple as below:
\nComponent.html<\/em><\/span><\/p>\n
...\r\n\r\n    <ul class=\"nav nav-tabs\">\r\n        <li role=\"presentation\" class=\"active\"><a href=\"#\">Home<\/a><\/li>\r\n        <li role=\"presentation\"><a href=\"#\">Nav-pills<\/a><\/li>\r\n        <li role=\"presentation\"><a href=\"#\">Navbar<\/a><\/li>\r\n    <\/ul>\r\n\r\n...\r\n<\/pre>\n
Another option with navs is the nav-pills which looks as below:<\/p>\n
\"\"<\/a>
Nav Pills Demo<\/figcaption><\/figure>\n
The Html markup for the same is provided below:
\nComponent.html<\/em><\/span><\/p>\n
...\r\n<ul class=\"nav nav-pills\">\r\n    <li role=\"presentation\" class=\"active\"><a href=\"#\">Home<\/a><\/li>\r\n    <li role=\"presentation\"><a href=\"#\">Nav Pills<\/a><\/li>\r\n    <li role=\"presentation\"><a href=\"#\">Navbar<\/a><\/li>\r\n<\/ul>\r\n...\r\n<\/pre>\n
There are many options and possibilities with nav class. Now let us take a look at the Breadcrumbs component which is basically a compass for the user as they navigate around a site to know exactly where they are within the site and the path taken to reach where they are and allow them to navigate back if they so choose.
\nThe Screenshot below shows a demo of the Breadcrumbs component from Bootstrap:<\/p>\n
\"\"<\/a>
Breadcrumbs Demo<\/figcaption><\/figure>\n
Html markup for the above is as below:<\/p>\n
Component.html<\/em><\/span><\/p>\n
<ol class=\"breadcrumb\">\r\n    <li><a href=\"#\">Home<\/a><\/li>\r\n    <li><a href=\"#\">Library<\/a><\/li>\r\n    <li class=\"active\">Data<\/li>\r\n<\/ol>\r\n<\/pre>\n
The Pagination component comes in handy when we need to split up the information to show across multiple pages, for example in case of search results. The screenshot below shows the pagination component in action.<\/p>\n
\"\"<\/a>
Pagination Demo<\/figcaption><\/figure>\n
Html markup for above is simple and looks like below:<\/p>\n
Component.html<\/em><\/span><\/p>\n
...\r\n<ul class=\"pagination\">\r\n    <li>\r\n        <a href=\"#\" aria-label=\"Previous\">\r\n            <span aria-hidden=\"true\">&laquo;<\/span>\r\n        <\/a>\r\n    <\/li>\r\n    <li><a href=\"#\">1<\/a><\/li>\r\n    <li><a href=\"#\">2<\/a><\/li>\r\n    <li><a href=\"#\">3<\/a><\/li>\r\n    <li><a href=\"#\">4<\/a><\/li>\r\n    <li><a href=\"#\">5<\/a><\/li>\r\n    <li>\r\n        <a href=\"#\" aria-label=\"Next\">\r\n            <span aria-hidden=\"true\">&raquo;<\/span>\r\n        <\/a>\r\n    <\/li>\r\n<\/ul>\r\n<\/pre>\n
Jumbotron Component as the name suggests is used to highlight key information about the web page across the top of the page. It looks as follows:<\/p>\n
\"\"<\/a>
Jumbotron Demo<\/figcaption><\/figure>\n
The Html markup for a Jumbotron is as follows:<\/p>\n
Component.html<\/em><\/span><\/p>\n
<div class=\"jumbotron\">\r\n    <h1>Jumbotron Demo!<\/h1>\r\n    <p>...<\/p>\r\n<\/div>\r\n<\/pre>\n
Run the project using following command at the root of the project:<\/p>\n
npm install\r\nnode index.js\r\n<\/pre>\n
<\/a>5. Download the source code<\/h2>\n
This was a tutorial on how to learn Twitter Bootstrap Quickly.<\/p>\n
Download<\/strong>
\nYou can download the full source code of this example here: WCG — Tutorial Learn Bootstrap Quickly<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
The aim of this tutorial is to get you up and running with Twitter Bootstrap framework quickly. Twitter Bootstrap has soared in popularity over the years and continues to be the go-to resource for front-end development. Let us explore the most common and frequently used components, features and css classes of this framework to get …<\/p>\n","protected":false},"author":213,"featured_media":8515,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[284],"tags":[],"class_list":["post-17992","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap"],"yoast_head":"\nTutorial: Learn Twitter Bootstrap Quickly - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this tutorial is to get you up and running with Twitter Bootstrap framework quickly. Twitter Bootstrap has soared in popularity over the years\" \/>\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.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial: Learn Twitter Bootstrap Quickly - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this tutorial is to get you up and running with Twitter Bootstrap framework quickly. Twitter Bootstrap has soared in popularity over the years\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-07T08:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T11:05:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Siddharth Seth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Siddharth Seth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/\"},\"author\":{\"name\":\"Siddharth Seth\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\"},\"headline\":\"Tutorial: Learn Twitter Bootstrap Quickly\",\"datePublished\":\"2017-08-07T08:00:00+00:00\",\"dateModified\":\"2018-01-08T11:05:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/\"},\"wordCount\":1515,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/\",\"name\":\"Tutorial: Learn Twitter Bootstrap Quickly - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"datePublished\":\"2017-08-07T08:00:00+00:00\",\"dateModified\":\"2018-01-08T11:05:47+00:00\",\"description\":\"The aim of this tutorial is to get you up and running with Twitter Bootstrap framework quickly. Twitter Bootstrap has soared in popularity over the years\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bootstrap\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/bootstrap\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Tutorial: Learn Twitter Bootstrap Quickly\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\",\"name\":\"Siddharth Seth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"caption\":\"Siddharth Seth\"},\"description\":\"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.\",\"sameAs\":[\"https:\/\/www.webcodegeeks.com\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial: Learn Twitter Bootstrap Quickly - Web Code Geeks - 2026","description":"The aim of this tutorial is to get you up and running with Twitter Bootstrap framework quickly. Twitter Bootstrap has soared in popularity over the years","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.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/","og_locale":"en_US","og_type":"article","og_title":"Tutorial: Learn Twitter Bootstrap Quickly - Web Code Geeks - 2026","og_description":"The aim of this tutorial is to get you up and running with Twitter Bootstrap framework quickly. Twitter Bootstrap has soared in popularity over the years","og_url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-08-07T08:00:00+00:00","article_modified_time":"2018-01-08T11:05:47+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","type":"image\/jpeg"}],"author":"Siddharth Seth","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Siddharth Seth","Est. reading time":"21 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/"},"author":{"name":"Siddharth Seth","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592"},"headline":"Tutorial: Learn Twitter Bootstrap Quickly","datePublished":"2017-08-07T08:00:00+00:00","dateModified":"2018-01-08T11:05:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/"},"wordCount":1515,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","articleSection":["Bootstrap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/","url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/","name":"Tutorial: Learn Twitter Bootstrap Quickly - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","datePublished":"2017-08-07T08:00:00+00:00","dateModified":"2018-01-08T11:05:47+00:00","description":"The aim of this tutorial is to get you up and running with Twitter Bootstrap framework quickly. Twitter Bootstrap has soared in popularity over the years","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/tutorial-learn-twitter-bootstrap-quickly\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"Bootstrap","item":"https:\/\/www.webcodegeeks.com\/category\/css\/bootstrap\/"},{"@type":"ListItem","position":4,"name":"Tutorial: Learn Twitter Bootstrap Quickly"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592","name":"Siddharth Seth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","caption":"Siddharth Seth"},"description":"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.","sameAs":["https:\/\/www.webcodegeeks.com"],"url":"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/17992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=17992"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/17992\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/8515"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=17992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=17992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=17992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}