<!DOCTYPE html>
<html lang="en"><!-- InstanceBegin template="/Templates/basic.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
	<!-- InstanceBeginEditable name="doctitle" -->
    <title>Bootstrap 5 Examples - Tutorial Republic</title>
    <!-- InstanceEndEditable -->
    	<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="fb:admins" content="100001054961582" />
<meta property="fb:app_id" content="1404574483159557" />
<meta property="og:image" content="/lib/images/signature.png" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
<style>
html,body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,img{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
html,body{min-height:100%}
p{margin:0 0 12px}
ol,ul{margin:0 0 12px}
a,a:active,a:visited{outline:none;color:#1db79f;text-decoration:none}
a img{border:none;outline:none}
p code,table td:last-child code,.content ul li code,code.mark{padding:2px 4px;color:#333;background-color:#f1f1f1;border-radius:4px}
a code{color:inherit;background:none;padding:0}
table{border-collapse:collapse;border-spacing:0}
table td{vertical-align:top}
body{min-width:1300px;color:#414141;background:#fafafa;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",sans-serif;font-size:17px;line-height:1.7}
input,select,textarea,button,div,span,a{box-sizing:border-box}
h1,h2,h3,h4{color:#262626;margin:20px 0 10px;line-height:1.5;font-weight:600}
h1{font-size:34px;margin-top:17px}
h2{font-size:28px}
h3{font-size:22px}
.space{margin-bottom:25px!important}
.break{margin-bottom:15px!important}
.text-center{text-align:center!important}
.scroll{height:195px;overflow-y:scroll}
.scroll.large{height:245px}
.scroll.xlarge{height:290px}
.scroll.xxlarge{height:340px}
sup{font-size:13px}
h1 sup{background:#ec0000;border-radius:3px;padding:5px 10px;font-size:15px;color:#fff;position:relative;top:5px}
.leaderboard{padding-top:14px;position:relative;height:105px;overflow:hidden}
.intro-image img{display:block;padding:10px 0 25px;max-width:100%}
.clearfix::after{content:".";display:block;height:0;clear:both;visibility:hidden}
code,.code,.syntax,.green-box,.sky-box,.gray-box,.pink-box,.red-box,.at-rule,.codebox pre,.console-output,.command{font-size:16px;font-family:Consolas,Monaco,Courier,monospace}
.console-output{margin:15px 0}
.command{background:#f2f2f2;padding:16px 18px;margin:15px 0 25px;border-radius:3px}
hr{border:none;border-bottom:1px solid #e7e9ed;height:1px;margin:30px 0}
.summary,.topic{border:1px solid #eaeaea;border-width:1px 0;margin:20px 0;padding:10px 0;color:#8e9aa6;line-height:1.5}
h2.section-title span{display:inline-block;border-bottom:4px solid #c9d7e0;padding:0 50px 12px 0}
.wrapper{width:1300px;padding:0 15px;margin:0 auto}
.header{background:#23384e;padding:16px 0}
input.search{background:#fff;border:0 none;color:#807E7E;float:left;height:38px;line-height:26px;font-size:14px;margin:0 0 0 12px;outline:medium none;padding:6px 14px;width:500px;border-radius:2px;box-shadow:0 0 1px rgba(0,0,0,0.6);font-family:inherit}
.search-btn{color:rgba(0,0,0,.6);background:#ebebeb;border:none;outline:none;cursor:pointer;float:left;height:38px;line-height:46px;width:44px;display:block;margin-left:-2px;border-radius:0 2px 2px 0;box-shadow:0 0 1px rgba(0,0,0,0.7)}
.logo{width:304px}
.logo img{height:44px;margin:-3px 0;display:block}
.site-search{float:left;margin-left:100px}
.menu{background-color:#f5f5f5;box-shadow:0 1px 1px rgba(0,0,0,.15);position:relative;z-index:9}
.menu a{color:#666;display:inline-block;padding:0 10px;text-decoration:none;font-size:14px;font-weight:600;height:48px;line-height:48px}
.menu a:first-child{margin-left:-10px}
.menu a.tool-link{float:right;display:block;border-radius:30px;line-height:28px;position:relative;height:auto;top:9px;padding:0 12px;color:#1ebba3;border:1px double #1ebba3}
.fl,.logo{float:left}
.leftcolumn{width:240px;float:left;font-size:16px;color:#4f4f4f}
.centercolumn{width:850px;float:left}
.rightcolumn{width:180px;float:left}
.content{background:#fff;padding:15px 40px 20px;border:1px solid #dedede;border-top:none;border-radius:1px}
.sidebar{width:160px;float:left;padding-top:28px;margin-left:20px;position:relative}
.leftcolumn .segment{margin:16px 0 12px;position:relative;font-size:18px;font-weight:600;line-height:normal}
.leftcolumn a{color:#4f4f4f;font-size:16px;line-height:26px;display:block;border-bottom:1px solid transparent}
.leftcolumn ul{list-style:none;padding:0;margin:0}
.segment,.chapters,.chapters a{float:left;clear:both}
h1 code,h2 code,h3 code{font:inherit}
.color-box{margin:15px 0;padding-left:20px}
.note-box,.warning-box,.tip-box{padding:8px 8px 3px 26px}
.info-tab{float:left;margin-left:-23px}
.content ul li{margin-top:7px}
.extra{padding-top:5px}
.green-box,.sky-box,.gray-box,.red-box,.pink-box{color:#000;margin-top:15px;padding:10px;background-color:#f6f8fa;border:1px solid #d7e2ec}
.example{background:#f4f5f6;padding:3px;margin:15px 0}
.codebox{background:#fff;border:1px solid #ddd}
.codebox-title{height:41px;padding-left:12px;border-bottom:1px solid #ddd;background:#f5f5f5}
.codebox-title h4{margin:0;font-size:18px;line-height:40px;float:left;font-weight:600}
a.try-btn,a.download-btn{width:140px;height:40px;color:#333;font-size:15px;line-height:41px;font-weight:600;text-align:center;text-decoration:none;float:right;display:block;border-left:1px solid #ddd;background:rgba(27,31,35,0.08);box-sizing:border-box;font-family:Arial,sans-serif}
a.try-btn span{font-size:18px;line-height:normal}
.hide,.code-style,.box-size,.bottom-link,.footer,.code-style,.snippets,.report-error,.badge,.social,.ad-label,.mobile-only,ul.tree-menu li ul{display:none}
.skyscraper{width:160px;height:600px;overflow:hidden;margin-bottom:20px;background:#ebecf0}
.bottom-ad{margin-top:46px;padding:24px;position:relative;background:url(lib/images/smooth-line.png) no-repeat center #f9f9f9}
.rectangle-left,.rectangle-right{min-width:336px;min-height:280px;overflow:hidden}
.fr,a.previous-page,a.next-page,.rectangle-right,.topic-nav{float:right}
a.previous-page,a.next-page{width:32px;height:32px;line-height:30px}
.shadow{background:#F7F8F9;padding:3px;margin:10px 0}
.syntax{color:#2f4959;padding:13px 18px;background:#F9F9FA;border:1px solid #ddd;font-size:15px}
code[class*="language-"],pre[class*="language-"]{color:#000;background:none;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-break:normal;word-wrap:normal;line-height:1.5;tab-size:4;hyphens:none}
pre[class*="language-"]{position:relative;margin:.5em 0;overflow:visible;padding:0}
pre[class*="language-"]>code{position:relative;border-left:10px solid #358ccb;box-shadow:-1px 0 0 0 #358ccb,0 0 0 1px #dfdfdf;background-color:#fdfdfd;background-image:linear-gradient(transparent 50%,rgba(69,142,209,0.04) 50%);background-size:3em 3em;background-origin:content-box;background-attachment:local}
code[class*="language"]{max-height:inherit;height:inherit;padding:0 1em;display:block;overflow:auto}
:not(pre) > code[class*="language-"]{position:relative;padding:.2em;border-radius:.3em;color:#c92c2c;border:1px solid rgba(0,0,0,0.1);display:inline;white-space:normal}
pre[class*="language-"].line-numbers{padding-left:0}
pre[class*="language-"].line-numbers code{padding-left:3.8em}
pre[class*="language-"].line-numbers .line-numbers-rows{left:0}
pre[class*="language-"][data-line]{padding-top:0;padding-bottom:0;padding-left:0}
pre[data-line] code{position:relative;padding-left:4em}
pre .line-highlight{margin-top:0}
pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber;white-space:pre-wrap!important}
pre.line-numbers > code{position:relative;white-space:inherit}
.line-numbers-rows,.codebox pre.inactive{display:none}
.codebox pre.syntax-highlighter{margin:0;padding:0;overflow:auto}
pre.line-numbers .line-numbers-rows{border-right:3px solid #6CE26C}
.codebox pre.syntax-highlighter > code{box-shadow:none!important;padding-left:3.8em;background-image:linear-gradient(transparent 50%,#F8F8F8 50%);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace!important;font-size:16px;line-height:1.5;overflow-wrap:break-word}
.codebox pre.syntax-highlighter,.codebox pre.syntax-highlighter code{border:none;width:100%;box-sizing:border-box}
pre.line-numbers code,pre.line-numbers .line-numbers-rows{padding-top:2px;padding-bottom:2px}
.preview-box{padding:15px;text-align:center;cursor:pointer;overflow:hidden;background:#FFF;border:1px solid #e6e6e6}
.preview-box a,.preview-box img{display:block;margin:0 auto}
.download-box{text-align:center;padding:20px 0;margin:20px 0 10px}
.output-box{border-color:#d4d4d4;border-style:solid;border-width:1px 0;padding:5px 15px;overflow:hidden;background:#fff;margin:10px 0}
.demo-box{margin-top:15px}
.subhead{border-bottom:3px solid #DCE3EB;margin-bottom:15px;padding-bottom:10px}
table.data,table.description{width:100%;font-size:92%}
table.data th{color:#000;padding:8px 7px;text-align:left;font-size:15px;background:#F8F8F8}
table.data td{color:#484848;padding:5px 7px;background:#fff}
table.data th,table.data td{vertical-align:top;border:1px solid #DCE3EB}
table.data tr.section th,table.data td.section{font-size:15px;background:#f0f4f7}
table.description th{width:150px}
table.no-wrap tr td:first-child{white-space:nowrap}
.topic-nav{padding-right:5px;color:#d0d0d0}
.topic-nav a{padding:0 15px;margin:0 0 0 5px;position:relative;display:inline-block}
.topic-nav a::after{font-size:24px;position:absolute;line-height:22px}
.topic-nav a:first-child{margin:0 5px 0 0}
.topic-nav a:first-child::after{content:'\00AB';left:-5px}
.topic-nav a:last-child::after{content:'\00BB';right:-5px}
@media screen and (max-width: 1280px) {
body{min-width:1260px}
.wrapper{width:1260px}
.leftcolumn{width:230px}
.centercolumn{width:820px}
.preview-box img{max-width:100%;height:auto}
}
@media screen and (max-width: 800px) {
body{min-width:100%;max-width:100%;padding-top:46px}
.wrapper{width:100%;padding:0}
.header{height:46px;padding:5px 0;position:fixed;top:0;left:0;right:0;width:100%;z-index:99}
.logo{width:auto;display:block;padding:6px 0 0 60px;position:absolute;left:0;z-index:100}
.logo img{height:30px}
.menu{width:100%;padding-left:12px;padding-right:12px;overflow-x:auto;white-space:nowrap}
.centercolumn{width:100%;float:none}
.content{padding:10px;border-width:0 0 1px 0}
.content img{max-width:100%;height:auto}
.skyscraper{display:inline-block}
.shadow,.example,.console-output,.content pre{max-width:100%;overflow-x:auto}
.codebox-title{position:relative}
.codebox.multi-style-mode pre{padding-top:7px;margin-top:36px;border-top:1px solid #ddd}
.bottom-ad{height:auto;background:none;padding:30px 0 0;margin:40px 0 0;text-align:center;position:relative}
.rectangle-left,.rectangle-right{float:none;display:inline-block;margin:10px auto;background:#EDEEF2}
.leftcolumn,.footer,.social,.site-search,.code-style,.menu a.tool-link,.backdrop{display:none}
.summary,.topic{padding:5px 0;margin:10px 0}
.leftcolumn,.centercolumn,.rightcolumn,.sidebar{float:none}
.header,.menu,.centercolumn,.footer,.appeal-text{width:100%}
a.try-btn,a.download-btn{width:130px}
.native-unit{margin-bottom:30px}
.rightcolumn,.sidebar{margin: 25px auto 0}
.overview{padding-right:0}
.scroll-pane{overflow-x:auto}
table.data{min-width:480px}
table.data pre{display:inline;white-space:normal}
table tr th,table tr td{width:auto!important}
.preview-box{padding:6px}
.leaderboard{margin:20px 0}
h1{font-size:30px}
h2{font-size:24px}
h3{font-size:20px}
.codebox pre.syntax-highlighter{overflow-x:auto}
.codebox pre.syntax-highlighter > code{min-width:614px;height:auto;overflow-x:hidden}
}
@media screen and (min-width: 801px) {
.site-search,.leftcolumn,.social{display:block!important}
.backdrop{display:none!important}
.hide-scroll{overflow-x:hidden!important}
}
.menu a.old-version{height:21px;font-size:13px;line-height:17px;border:1px double;border-radius:40px;margin-right:10px}</style>
<script>
    (function(){
        var bsa_optimize=document.createElement('script');
        bsa_optimize.type='text/javascript';
        bsa_optimize.async=true;
        bsa_optimize.src='https://cdn4.buysellads.net/pub/tutorialrepublic.js';
        (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa_optimize);
    })();
</script>
    
    <!-- InstanceBeginEditable name="head" -->
	<style>
	.example-list a{color:#4f4f4f}
	.example-list a:hover{color:#222;text-decoration:underline}
	</style>
    <!-- InstanceEndEditable -->
    
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-40117907-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-40117907-1');
</script></head>
<body><div onClick="this.style.display='none';"><div style="display:block; clear:both; height:1.5em; padding:0.5em;">&nbsp;</div><div style="position:absolute; top:0px; left:0px; display:block; position:fixed; width:100%; padding:0.5em; line-height:1.5em; background-color:#BE0000; color:#FFF; font-family:Consolas, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace; font-size:13px; z-index:2147483640; cursor:pointer; " title="click to hide message">Please note, this is a STATIC archive of website www.tutorialrepublic.com from 10 Sep 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.</div></div>
    <!--Header-->
    
<div class="header">
    <div class="wrapper clearfix">
        <button type="button" class="open-menu mobile-only"><i class="icon-menu"></i></button>
        <div class="logo">
            <a href="index.html"><img src="lib/images/logo.svg" alt="TutorialRepublic" /></a>
        </div>
        <div class="site-search">
            <form inert action="https://www.google.com/search" method="get" target="_blank" class="clearfix">
                <input type="hidden" value="www.tutorialrepublic.com" name="sitesearch"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />
                <input type="text" name="q" placeholder="disabled" id="searchInput" class="search"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />
                <button type="submit" class="search-btn"><span class="icon-search"></span></button>
            </form>
        </div>
        <div class="social">                
            <a href="https://www.facebook.com/tutorialrepublic" target="_blank" title="Join us on Facebook"><i class="icon-facebook"></i></a>
            <a href="https://twitter.com/tutrepublic" target="_blank" title="Follow us on Twitter"><i class="icon-twitter"></i></a>
            <a href="contact-us.php.html" target="_blank" title="Send us an Email"><i class="icon-mail"></i></a>
        </div>
        <button type="button" class="open-search mobile-only">
            <i class="icon-search"></i>
        </button>
    </div>    
</div>
<div class="menu">
    <div class="wrapper">
        <a href="index.html" title="Home Page">HOME</a>
        <a href="html-tutorial/html-introduction.php.html" title="HTML Tutorial">HTML5</a>            
        <a href="css-tutorial/index.html" title="CSS Tutorial">CSS3</a>
        <a href="javascript-tutorial/index.html" title="JavaScript Tutorial">JAVASCRIPT</a>
        <a href="jquery-tutorial/index.html" title="jQuery Tutorial">JQUERY</a>
        <a href="twitter-bootstrap-tutorial/index.html" title="Bootstrap 5 Tutorial">BOOTSTRAP5</a>
		<a href="https://www.tutorialrepublic.com/twitter-bootstrap-4-tutorial/" class="old-version" title="Bootstrap 4.6 Tutorial">v4.6</a>
        <a href="php-tutorial/index.html" title="PHP Tutorial">PHP7</a> 
        <a href="sql-tutorial/index.html" title="SQL Tutorial">SQL</a>
        <a href="references.php.html" title="Web References">REFERENCES</a>
        <a href="practice-examples.php.html" title="Practice Examples and Demos">EXAMPLES</a>
        <a href="faq.php.html" title="Frequently Asked Questions and Answers">FAQ</a>
        <a href="snippets/gallery.php.html" title="Bootstrap Code Snippets" target="_blank">SNIPPETS</a>
        <a href="codelab.php.html" class="tool-link" target="_blank">Online HTML Editor</a>
    </div>        
</div>    <!--End:Header-->
    <div class="wrapper clearfix">
        <div class="leftcolumn" id="myNav">
		
        <div class="segment"><span>WEB</span> TUTORIALS</div>
<div class="chapters">
    <a href="html-tutorial/html-introduction.php.html">HTML Tutorial</a>    
    <a href="css-tutorial/index.html">CSS Tutorial</a>
	<a href="javascript-tutorial/index.html">JavaScript Tutorial</a>
	<a href="jquery-tutorial/index.html">jQuery Tutorial</a>
    <a href="twitter-bootstrap-tutorial/index.html">Bootstrap Tutorial</a>
	<a href="php-tutorial/index.html">PHP Tutorial</a>
	<a href="sql-tutorial/index.html">SQL Tutorial</a>
</div>
<div class="segment"><span>PRACTICE</span>&thinsp;EXAMPLES</div>
<div class="chapters">
    <a href="html-examples.php.html">HTML Examples</a>
    <a href="css-examples.php.html">CSS Examples</a>
	<a href="javascript-examples.php.html">JavaScript Examples</a>
	<a href="jquery-examples.php.html">jQuery Examples</a>
    <a href="twitter-bootstrap-examples.php.html">Bootstrap Examples</a>
	<a href="php-examples.php.html">PHP Examples</a>
</div>
<div class="segment"><span>HTML</span> REFERENCES</div>
<div class="chapters">
    <a href="html-reference/html-tag-list.php.html">HTML Tags/Elements</a>
	<a href="html-reference/html-common-attributes.php.html">HTML Global Attributes</a>
    <a href="html-reference/html5-event-attributes.php.html">HTML Event Attributes</a>             
    <a href="html-reference/html-color-picker.php.html">HTML Color Picker</a>
    <a href="html-reference/html-language-codes.php.html">HTML Language Codes</a>
    <a href="html-reference/html-character-entities.php.html">HTML Character Entities</a>
    <a href="html-reference/http-status-codes.php.html">HTTP Status Codes</a>
</div>
<div class="segment"><span>CSS</span> REFERENCES</div>
<div class="chapters">
    <a href="css-reference/css-at-rules.php.html">CSS At-rules</a>
    <a href="css-reference/css3-properties.php.html">CSS Properties</a>
	<a href="css-reference/css-animatable-properties.php.html">CSS Animatable Properties</a>
    <a href="css-reference/css-color-values.php.html">CSS Color Values</a>
    <a href="css-reference/css-color-names.php.html">CSS Color Names</a>
    <a href="css-reference/css-web-safe-fonts.php.html">CSS Web Safe Fonts</a>
    <a href="css-reference/css-aural-properties.php.html">CSS Aural Properties</a>
</div>
<div class="segment"><span>PHP</span> REFERENCES</div>
<div class="chapters">
	<a href="php-reference/php-array-functions.php.html">PHP Array Functions</a>
	<a href="php-reference/php-string-functions.php.html">PHP String Functions</a>
    <a href="php-reference/php-file-system-functions.php.html">PHP File System Functions</a>
    <a href="php-reference/php-date-and-time-functions.php.html">PHP Date/Time Functions</a>
    <a href="php-reference/php-calendar-functions.php.html">PHP Calendar Functions</a>
    <a href="php-reference/php-mysqli-functions.php.html">PHP MySQLi Functions</a>
    <a href="php-reference/php-filters.php.html">PHP Filters</a>
    <a href="php-reference/php-error-levels.php.html">PHP Error Levels</a>
</div>        
                </div>
        <div class="centercolumn">
            <!--Text Content-->
            <div class="content">
                <div class="leaderboard">

    <div class="ad-label">Advertisements</div>

    <div class="ad-container">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- Responsive Leaderboard -->
        <ins class="adsbygoogle"
                style="display:block;max-width:728px;width:100%;height:90px"
                data-ad-client="ca-pub-9107540490929984"
                data-ad-slot="4302666817"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>

    <!-- ABR Leaderboard -->
    <div id="bsa-zone_1579648332258-0_123456"></div>

</div>                <!-- InstanceBeginEditable name="main_content" -->
                <a href="jquery-examples.php.html" class="previous-page" title="Go to Previous Page"></a>
                <a href="php-examples.php.html" class="next-page" title="Go to Next Page"></a>
                <h1>Bootstrap 5 <span>Examples</span></h1>
                <p class="summary">This section contains a whole bunch of examples demonstrating the various Bootstrap components and its features in real action.</p>
                <div class="example-list">
                    <h2>Bootstrap Grid System</h2>
                    <ul>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=two-column-grid-layouts-for-tablets-and-desktops.html" target="_blank">Bootstrap two column grid layouts for tablets and desktops</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=three-column-grid-layouts-for-tablets-in-landscape-mode-and-desktops.html" target="_blank">Bootstrap three column grid layouts for tablets in landscape mode and desktops</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=auto-layout-columns.html" target="_blank">Bootstrap auto layout columns for all devices</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=size-columns-based-on-the-width-of-their-content.html" target="_blank">Bootstrap columns sizing based on the width of their content</a></li>                        
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=grid-layout-for-all-devices.html" target="_blank">Bootstrap multi column grid layout for all devices</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=nested-columns.html" target="_blank">Bootstrap nested grid columns layout</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=vertical-alignment-of-columns.html" target="_blank">Bootstrap vertical alignment of columns within a row</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=vertical-alignment-of-individual-columns.html" target="_blank">Bootstrap vertical alignment of individual columns within a row</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=reordering-columns.html" target="_blank">Bootstrap reordering of grid columns within a row</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=column-offset.html" target="_blank">Bootstrap offsetting grid columns</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=compact-columns.html" target="_blank">Bootstrap compact grid columns</a></li>                        
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=fixed-layout.html" target="_blank">Bootstrap fixed layout</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=fluid-layout.html" target="_blank">Bootstrap fluid layout</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=responsive-layout.html" target="_blank">Bootstrap responsive layout</a></li>
                    </ul>
                    <h2>Bootstrap Typography</h2>
                    <ul>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=headings.html" target="_blank">Bootstrap headings</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=headings-with-secondary-text.html" target="_blank">Bootstrap headings with secondary text</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=display-headings.html" target="_blank">Bootstrap display headings</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=paragraphs.html" target="_blank">Bootstrap normal and lead paragraphs</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=text-alignment.html" target="_blank">Bootstrap text alignment</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=text-formatting.html" target="_blank">Bootstrap text formatting</a></li>                        
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=text-transformation.html" target="_blank">Bootstrap text transformation</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=text-emphasis-classes.html" target="_blank">Bootstrap text emphasis classes</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=blockquote-with-attribution.html" target="_blank">Bootstrap blockquotes formatting</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=text-truncation.html" target="_blank">Bootstrap truncating long text</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=text-wrapping-and-overflow.html" target="_blank">Bootstrap handling text overflow</a></li>	
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=text-break.html" target="_blank">Bootstrap breaking long words</a></li>					  
                    </ul>
                    <h2>Bootstrap Tables</h2>
                    <ul>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=simple-table.html" target="_blank">Creating simple tables with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=dark-table.html" target="_blank">Creating dark tables with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=accented-table.html" target="_blank">Creating accented tables with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=table-with-accented-rows.html" target="_blank">Bootstrap table with accented rows</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=table-striped.html" target="_blank">Bootstrap table with striped rows</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=table-bordered.html" target="_blank">Bootstrap table with borders</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=borderless-table.html" target="_blank">Creating borderless table with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=table-with-hover-states.html" target="_blank">Enable hover state on table rows</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=condensed-table.html" target="_blank">Bootstrap small or compact table</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=table-head-light.html" target="_blank">Setting light background for table head with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=table-head-dark.html" target="_blank">Setting dark background for table head with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=responsive-table.html" target="_blank">Bootstrap responsive tables</a></li>				  
                    </ul>
                    <h2>Bootstrap Lists</h2>
                    <ul>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=lists.html" target="_blank">Creating lists with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=unstyled-list.html" target="_blank">Bootstrap unstyled ordered and unordered list</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=inline-list.html" target="_blank">Placing ordered and unordered list items inline</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=horizontal-definitoin-list.html" target="_blank">Creating horizontal definition lists with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=list-group.html" target="_blank">Bootstrap list groups</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=disabled-and-active-items-within-list-group.html" target="_blank">Bootstrap list group with disabled and active items</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=edge-to-edge-list-group.html" target="_blank">Bootstrap edge-to-edge list groups</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=numbered-list-group.html" target="_blank">Bootstrap numbered list groups</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=list-group-with-checkboxes.html" target="_blank">Bootstrap list group with checkboxes</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=list-group-with-radios.html" target="_blank">Bootstrap list group with radio buttons</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=list-group-with-linked-items.html" target="_blank">Bootstrap list group with linked items</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=linked-list-group-with-custom-content.html" target="_blank">Bootstrap linked list group with custom content</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=list-group-with-contextual-states.html" target="_blank">Bootstrap list groups with emphasis classes</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=linked-list-group-with-contextual-states.html" target="_blank">Bootstrap linked list groups with emphasis classes</a></li>
                    </ul>
                    <h2>Bootstrap Forms</h2>
                    <ul>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=vertical-form-layout.html" target="_blank">Creating vertical form layouts with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=horizontal-form-layout.html" target="_blank">Creating horizontal form layouts with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=inline-form-layout.html" target="_blank">Creating inline form layouts with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=responsive-form-layout.html" target="_blank">Creating responsive form layouts with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=static-form-control.html" target="_blank">Bootstrap static form controls</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=placing-checkboxes-inline.html" target="_blank">Placing checkboxes inline with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=placing-radio-buttons-inline.html" target="_blank">Placing radio buttons inline with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=height-sizing-of-form-controls.html" target="_blank">Height sizing of Inputs and select boxes with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=grid-sizing-of-form-controls.html" target="_blank">Grid sizing of form controls with Bootstrap</a></li>                        
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=disabled-form-controls.html" target="_blank">Disabling form controls with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=disabled-forms.html" target="_blank">Disabling all form controls at once with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=readonly-inputs.html" target="_blank">Creating readonly inputs with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=block-help-text.html" target="_blank">Placing block help text around form controls</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=inline-help-text.html" target="_blank">Placing inline help text around form controls</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=form-validation.html" target="_blank">Bootstrap form validation</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=display-validation-feedback-in-tooltip-style.html" target="_blank">Displaying Bootstrap validation feedback in tooltip style</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=supported-from-controls.html" target="_blank">Supported form controls in Bootstrap</a></li>
                    </ul>
					<h2>Bootstrap Custom Forms</h2>    
					<ul>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=custom-checkboxes.html" target="_blank">Creating custom checkboxes with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=custom-radio-buttons.html" target="_blank">Creating custom radio buttons with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=disabled-custom-checkboxes-and-radio-buttons.html" target="_blank">Disabling custom checkboxes and radio buttons in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=toggle-switch.html" target="_blank">Creating toggle switch with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=custom-select-dropdown.html" target="_blank">Creating custom select menu with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=custom-select-sizing.html" target="_blank">Height sizing of Bootstrap custom select menu</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=custom-range.html" target="_blank">Creating custom range input with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=custom-range-with-min-max-and-step.html" target="_blank">Specifying min, max and step attributes for Bootstrap custom range</a></li>
                    </ul>                
                    <h2>Bootstrap Input Groups</h2>
                    <ul>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=prepend-and-append-inputs.html" target="_blank">Prepend and append inputs with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=prepend-and-append-select-box-and-textarea.html" target="_blank">Prepend and append select box and textarea with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=input-groups-with-checkbox-and-radio-buttons.html" target="_blank">Creating input groups with checkbox and radio buttons in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=placing-multiple-inputs-within-an-input-group.html" target="_blank">Placing multiple inputs within an input group in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=placing-multiple-addons-within-an-input-group.html" target="_blank">Placing multiple addons within an input group in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=input-groups-with-buttons.html" target="_blank">Placing buttons within an input group in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=input-groups-with-button-dropdowns.html" target="_blank">Placing button dropdowns within an input group in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=input-groups-with-split-dropdown-button-groups.html" target="_blank">Placing segmented dropdown button groups within an input group in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=input-group-height-sizing.html" target="_blank">Height sizing of Bootstrap input groups</a></li>                        
                    </ul>
					<h2>Bootstrap Buttons</h2>
                    <ul>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=buttons.html" target="_blank">Creating buttons with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=outline-buttons.html" target="_blank">Creating outline buttons styles in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=large-buttons.html" target="_blank">Creating large buttons with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=small-buttons.html" target="_blank">Creating small buttons with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=block-buttons.html" target="_blank">Creating block buttons with Bootstrap</a></li>                        
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=disabled-buttons.html" target="_blank">Creating disabled Bootstrap buttons using the input and button element</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=disabled-anchor-buttons.html" target="_blank">Creating disabled Bootstrap buttons using the anchor element</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=active-buttons.html" target="_blank">Enable active state on buttons in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=spinner-buttons.html" target="_blank">Creating spinner buttons in Bootstrap</a></li>
                    </ul>
					<h2>Bootstrap Button Groups</h2>
					<ul>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=button-groups.html" target="_blank">Creating button groups with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=outline-button-groups.html" target="_blank">Creating outline button groups with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=button-groups-mixed-styles.html" target="_blank">Creating mixed styles button groups with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=button-toolbar.html" target="_blank">Creating button toolbar with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=button-groups-height-sizing.html" target="_blank">Height sizing of Bootstrap button groups</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=nested-button-groups.html" target="_blank">Creating nested button groups in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=vertical-button-groups.html" target="_blank">Creating vertically stacked button groups in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=justified-button-groups.html" target="_blank">Creating justified button groups with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=single-toggle-button.html" target="_blank">Creating toggle button in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=checkbox-button-groups.html" target="_blank">Creating checkbox button groups with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=radio-button-groups.html" target="_blank">Creating radio button groups with Bootstrap</a></li>
                    </ul>
					<h2>Bootstrap Images</h2>
                    <ul>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=image-styling.html" target="_blank">Making thumbnails, rounded corner and circular images with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=responsive-images.html" target="_blank">Making responsive images with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=responsive-videos.html" target="_blank">Making responsive videos with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=image-alignment.html" target="_blank">Horizontal alignment of images with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=media-objects.html" target="_blank">Creating media objects with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=rounded-media-objects.html" target="_blank">Creating rounded media objects with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=nested-media-objects.html" target="_blank">Creating nested media objects with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=horizontal-alignment-of-media-objects.html" target="_blank">Horizontal alignment of media objects in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=vertical-alignment-of-media-objects.html" target="_blank">Vertical alignment of media objects in Bootstrap</a></li>
                    </ul>
                    <h2>Bootstrap Cards</h2>
                    <ul>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=card.html" target="_blank">Creating cards with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=basic-card.html" target="_blank">Creating body only cards with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=card-with-titles-text-and-links.html" target="_blank">Creating Bootstrap cards with titles text and links</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=card-with-header-and-footer.html" target="_blank">Adding header and footer to a card in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=card-with-list-group.html" target="_blank">Placing list group inside Bootstrap card</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=card-with-multiple-content-types.html" target="_blank">Creating a card with multiple content types in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=card-styles.html" target="_blank">Customizing the card background in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=card-styles-outline.html" target="_blank">Customizing the card border and text in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=cards-group.html" target="_blank">Creating cards group with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=cards-grid.html" target="_blank">Creating cards grid with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=horizontal-card.html" target="_blank">Creating horizontal cards with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=card-image-overlays.html" target="_blank">Creating cards having image in the background in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=card-text-alignment.html" target="_blank">Aligning text inside the card in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=card-sizing.html" target="_blank">Setting the size for cards in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=card-with-stretched-link.html" target="_blank">Making the whole card clickable in Bootstrap</a></li>
                    </ul>
                    <h2>Bootstrap Icons</h2>
                    <ul>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=include-icons.html" target="_blank">Including Bootstrap icons in a web page</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=include-font-awesome-icons.html" target="_blank">Including font-awesome icons in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=buttons-with-icons.html" target="_blank">Placing icons inside buttons in Bootstrap</a></li>                        
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=tabs-with-icons.html" target="_blank">Using icons inside tabs in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=pills-with-icons.html" target="_blank">Using icons inside pills nav in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=list-group-with-linked-items.html" target="_blank">Using icons inside list groups in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=prepend-and-append-inputs.html" target="_blank">Using icons inside input groups in Bootstrap</a></li>
                    </ul>
                    <h2>Bootstrap Navs</h2>
                    <ul>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=nav.html" target="_blank">Creating basic nav with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=nav-center-alignment.html" target="_blank">Center alignment of Bootstrap nav</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=nav-right-alignment.html" target="_blank">Right alignment of Bootstrap nav</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=vertically-stacked-nav.html" target="_blank">Creating vertically stacked Bootstrap nav</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=nav-tabs.html" target="_blank">Creating basic tabs with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=tabs-with-icons.html" target="_blank">Adding icons to tabs in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=pills-nav.html" target="_blank">Creating basic pills nav with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=pills-with-icons.html" target="_blank">Adding icons to pills nav in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=vertically-stacked-pills-nav.html" target="_blank">Creating vertically stacked pills nav with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=tabs-with-dropdown-menus.html" target="_blank">Adding dropdown menus to tabs in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=pills-with-dropdown-menus.html" target="_blank">Adding dropdown menus to pills nav in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=nav-fill.html" target="_blank">Creating fill nav with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=nav-justified.html" target="_blank">Creating justified nav with Bootstrap</a></li>
                    </ul>
                    <h2>Bootstrap Navbar</h2>
                    <ul>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=static-navbar.html" target="_blank">Creating navbar with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=navbar-with-logo.html" target="_blank">Adding logo image to navbar in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=navbar-with-dropdown.html" target="_blank">Adding dropdown menus to navbar in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=navbar-with-search-form.html" target="_blank">Placing search form inside navbar in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=navbar-color-schemes.html" target="_blank">Changing the color scheme of Bootstrap navbar</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=navbar-fixed-to-top.html" target="_blank">Creating Bootstrap navbar fixed to top</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=navbar-fixed-to-bottom.html" target="_blank">Creating Bootstrap navbar fixed to bottom</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=navbar-sticky-top.html" target="_blank">Creating sticky top navbar with Bootstrap</a></li>					  
                    </ul>
                    <h2>Bootstrap Accordion</h2>
                    <ul>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=accordion.html" target="_blank">Creating accordion with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=accordion-with-plus-minus-icon.html" target="_blank">Creating accordion with plus minus icons in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=edge-to-edge-accordion.html" target="_blank">Creating edge-to-edge accordion with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=accordion-with-independent-collapsible-panels.html" target="_blank">Creating accordion with independent collapsible panels in Bootstrap</a></li>
                    </ul>
                    <h2>Bootstrap Breadcrumbs and Pagination</h2>
                    <ul>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=breadcrumb.html" target="_blank">Creating breadcrumbs with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=changing-breadcrumb-separator.html" target="_blank">Changing breadcrumbs separator in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=pagination.html" target="_blank">Creating pagination with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=pagination-with-disabled-and-active-state.html" target="_blank">Bootstrap pagination with disabled and active states</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=using-span-element-for-disabled-link-in-pagination.html" target="_blank">Using span element for disabled link in Bootstrap pagination</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=pagination-sizes.html" target="_blank">Changing the sizes of Bootstrap pagination</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=pagination-center-alignment.html" target="_blank">Center alignment of Bootstrap pagination</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=pagination-right-alignment.html" target="_blank">Right alignment of Bootstrap pagination</a></li>
                    </ul>
                    <h2>Bootstrap Badges</h2>
                    <ul>
                    	<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=badges.html" target="_blank">Creating badges with Bootstrap</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=colored-badges.html" target="_blank">Creating colored badges with Bootstrap</a></li>
                    	<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=pill-badges.html" target="_blank">Creating pill badges with Bootstrap</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=badges-inside-nav.html" target="_blank">Showing counter with Bootstrap badges</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=positioned-badge.html" target="_blank">Positioning of Bootstrap badges</a></li>
                    </ul>
                    <h2>Bootstrap Progress Bars</h2>
                    <ul>
                    	<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=progress-bar.html" target="_blank">Creating progress bars with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=progress-bar-with-label.html" target="_blank">Adding label to a progress bar in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=progress-bar-height-sizing.html" target="_blank">Changing the height of a progress bar in Bootstrap</a></li>
                    	<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=stripped-progress-bar.html" target="_blank">Creating stripped progress bars with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=animated-progress-bar.html" target="_blank">Creating animated progress bars with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=dynamically-change-progress-bar-value-using-javascript.html" target="_blank">Changing the value of a Bootstrap progress bar dynamically</a></li>
                    	<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=stacked-progress-bar.html" target="_blank">Creating stacked progress bars with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=progress-bar-with-emphasis.html" target="_blank">Creating multi-color progress bars in Bootstrap</a></li>
                    	<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=striped-progress-bar-with-emphasis.html" target="_blank">Creating multi-color striped progress bars in Bootstrap</a></li>
                    </ul>
					<h2>Bootstrap Spinners</h2>
                    <ul>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=border-spinner.html" target="_blank">Creating border spinners with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=colored-spinners.html" target="_blank">Creating colored spinners with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=grow-spinner.html" target="_blank">Creating growing spinners with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=colored-grow-spinner.html" target="_blank">Creating colored growing spinners with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=small-spinners.html" target="_blank">Creating small size spinners with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=spinner-sizing.html" target="_blank">Customizing the size of Bootstrap spinners with CSS</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=spinners-inside-buttons.html" target="_blank">Placing spinners inside buttons in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=spinner-alignment.html" target="_blank">Changing the alignment of spinners in Bootstrap</a></li>
                    </ul>
                    <h2>Bootstrap Jumbotron</h2>
                    <ul>
                    	<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=jumbotron.html" target="_blank">Creating jumbotron to showcase content in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=jumbotron-full-width.html" target="_blank">Creating full width jumbotron in Bootstrap</a></li>
                    </ul>
                    <h2>Bootstrap Modals</h2>
                    <ul>
                    	<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=show-modal-on-page-load-using-javascript.html" target="_blank">Creating modals with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=activate-modals-via-data-attribute.html" target="_blank">Launching Bootstrap modal box via data attributes</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=activate-modals-via-javascript.html" target="_blank">Launching Bootstrap modal box via JavaScript</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=large-and-small-modal-sizes.html" target="_blank">Changing the size of modals in Bootstrap</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=change-modal-content-based-on-trigger-button-using-javascript.html" target="_blank">Changing the Bootstrap modal content based on the trigger button via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=vertically-centering-the-modal.html" target="_blank">Vertically centering the Bootstrap modal</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=creating-row-columns-inside-modal.html" target="_blank">Creating row and columns inside Bootstrap modal</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=loading-content-in-modal-body-via-ajax-using-javascript.html" target="_blank">Loading content in Bootstrap modal via Ajax using JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=modal-with-static-backdrop.html" target="_blank">Prevent Bootstrap modal from disappearing on click outside via data attributes</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=stop-hiding-modal-on-backdrop-click-using-javascript.html" target="_blank">Prevent Bootstrap modal from hiding on click of the dark area via JavaScript</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=prevent-hiding-modal-on-escape-key-press-using-javascript.html" target="_blank">Prevent Bootstrap modal from hiding on press of the escape key via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=toggle-modal-using-javascript.html" target="_blank">Bootstrap <code>toggle()</code> modal method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=show-modal-using-javascript.html" target="_blank">Bootstrap <code>show()</code> modal method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=hide-modal-using-javascript.html" target="_blank">Bootstrap <code>hide()</code> modal method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=handle-modal-update-using-javascript.html" target="_blank">Bootstrap <code>handleUpdate()</code> modal method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=dispose-modal-using-javascript.html" target="_blank">Bootstrap <code>dispose()</code> modal method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=get-modal-instance-using-javascript.html" target="_blank">Bootstrap <code>getInstance()</code> modal method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=get-or-create-modal-instance-using-javascript.html" target="_blank">Bootstrap <code>getOrCreateInstance()</code> modal method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=listen-to-hidden-bs-modal-event-using-jquery.html" target="_blank">Display a message when Bootstrap modal window has been completely closed</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=listen-to-hideprevented-bs-modal-event-using-javascript.html" target="_blank">Display a message on click outside the Bootstrap modal window</a></li>
                    </ul>                   
                    <h2>Bootstrap Dropdowns</h2>
                    <ul>
                    <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=adding-dropdowns-via-data-attributes.html" target="_blank">Creating dropdown menu in Bootstrap</a></li>
                    	<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=dropdowns-within-navbar.html" target="_blank">Adding dropdowns to Bootstrap navbar</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=dropdowns-within-nav.html" target="_blank">Adding dropdowns to Bootstrap navs</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=dropdowns-within-buttons.html" target="_blank">Adding dropdowns to Bootstrap buttons</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=split-button-dropdowns.html" target="_blank">Adding dropdowns to Bootstrap split buttons</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=dropdowns-within-button-groups.html" target="_blank">Adding dropdowns to Bootstrap button groups</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=dropdowns-within-vertically-stacked-button-groups.html" target="_blank">Adding dropdowns within Bootstrap vertically stacked button groups</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=dropup-dropleft-and-dropright-menus.html" target="_blank">Creating dropup, dropleft and dropright menus in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=right-aligned-dropdown-menus.html" target="_blank">Creating right aligned dropdown menus in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=dropdown-header.html" target="_blank">Adding headers to dropdown items in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=disabling-dropdown-items.html" target="_blank">Disabling items inside a dropdown menu in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=enable-dropdowns-via-javascript.html" target="_blank">Adding dropdown to an element via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-dropdown-methods-via-javascript.html" target="_blank">Bootstrap <code>toggle()</code> dropdown method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-dropdown-methods-via-javascript.html" target="_blank">Bootstrap <code>show()</code> dropdown method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-dropdown-methods-via-javascript.html" target="_blank">Bootstrap <code>hide()</code> dropdown method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-dropdown-methods-via-javascript.html" target="_blank">Bootstrap <code>update()</code> dropdown method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-dropdown-methods-via-javascript.html" target="_blank">Bootstrap <code>dispose()</code> dropdown method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=get-dropdown-instance-using-javascript.html" target="_blank">Bootstrap <code>getInstance()</code> dropdown method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=get-or-create-dropdown-instance-using-javascript.html" target="_blank">Bootstrap <code>getOrCreateInstance()</code> dropdown method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=listening-to-dropdown-events-using-javascript.html" target="_blank">Get the text content of dropdown link on click in Bootstrap</a></li>
                    </ul>
                    <h2>Bootstrap Tabs</h2>
                    <ul>
                    	<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=basic-tabs.html" target="_blank">Creating a basic tabs with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=create-dynamic-tabs-via-data-attribute.html" target="_blank">Creating dynamic tabs in Bootstrap via data attributes</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=create-dynamic-tabs-via-javascript.html" target="_blank">Creating dynamic tabs in Bootstrap via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=activate-individual-tabs-via-javascript.html" target="_blank">Activate individual Bootstrap tabs via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=show-tab-using-jquery.html" target="_blank">Bootstrap <code>show()</code> tab method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=dispose-tab-using-javascript.html" target="_blank">Bootstrap <code>dispose()</code> tab method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=get-tab-instance-using-javascript.html" target="_blank">Bootstrap <code>getInstance()</code> tab method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=get-or-create-tab-instance-using-javascript.html" target="_blank">Bootstrap <code>getOrCreateInstance()</code> tab method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=listening-to-tab-events-using-javascript.html" target="_blank">Get the names of active tab and previous tab in Bootstrap via JavaScript</a></li>                        
                    </ul>
                    <h2>Bootstrap Tooltips</h2>
                    <ul>
                    	<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=enable-tooltips-via-javascript.html" target="_blank">Creating tooltips with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=tooltips-placement-via-data-attributes.html" target="_blank">Setting the position of Bootstrap tooltips via data attributes</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=tooltips-placement-via-javascript.html" target="_blank">Setting the position of Bootstrap tooltips via JavaScript</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=set-title-text-for-tooltips-using-javascript.html" target="_blank">Setting the title text for Bootstrap tooltips via JavaScript</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=place-html-inside-a-tooltip-using-javascript.html" target="_blank">Inserting HTML content inside the Bootstrap tooltips via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=set-tooltips-show-hide-time-delay-using-javascript.html" target="_blank">Setting the show hide timing of Bootstrap tooltips via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=create-custom-template-for-tooltips-using-javascript.html" target="_blank">Creating the custom template for Bootstrap tooltips via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=set-tooltips-container-using-javascript.html" target="_blank">Setting the container element for Bootstrap tooltips via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-tooltip-methods-using-jquery.html" target="_blank">Bootstrap <code>show()</code> tooltip method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-tooltip-methods-using-jquery.html" target="_blank">Bootstrap <code>hide()</code> tooltip method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-tooltip-methods-using-jquery.html" target="_blank">Bootstrap <code>toggle()</code> tooltip method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-tooltip-methods-using-jquery.html" target="_blank">Bootstrap <code>dispose()</code> tooltip method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-tooltip-methods-using-jquery.html" target="_blank">Bootstrap <code>enable()</code> tooltip method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-tooltip-methods-using-jquery.html" target="_blank">Bootstrap <code>disable()</code> tooltip method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-tooltip-methods-using-jquery.html" target="_blank">Bootstrap <code>toggleEnabled()</code> tooltip method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-tooltip-methods-using-jquery.html" target="_blank">Bootstrap <code>update()</code> tooltip method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=get-tooltip-instance-using-javascript.html" target="_blank">Bootstrap <code>getInstance()</code> tooltip method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=get-or-create-tooltip-instance-using-javascript.html" target="_blank">Bootstrap <code>getOrCreateInstance()</code> tooltip method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=listening-to-collapse-events-using-javascript.html" target="_blank">Display a message when Bootstrap tooltip fade out transition has been completed</a></li>
                    </ul>
                    <h2>Bootstrap Popovers</h2>
                    <ul>
                    	<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=enable-popovers-via-javascript.html" target="_blank">Creating popovers with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=popovers-placement-via-data-attributes.html" target="_blank">Setting the position of Bootstrap popovers via data attributes</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=popovers-placement-via-javascript.html" target="_blank">Setting the position of Bootstrap popovers via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=dismiss-popovers-on-next-click.html" target="_blank">Dismiss Bootstrap popovers on next click</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=set-title-text-for-popovers-using-javascript.html" target="_blank">Setting the title text for Bootstrap popovers via JavaScript</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=place-html-inside-a-popover-using-javascript.html" target="_blank">Inserting HTML content inside the Bootstrap popovers via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=set-popovers-show-hide-time-delay-using-javascript.html" target="_blank">Setting the show hide timing of Bootstrap popovers via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=create-custom-template-for-popovers-using-javascript.html" target="_blank">Creating the custom template for Bootstrap popovers via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=set-popovers-container-using-javascript.html" target="_blank">Setting the container element for Bootstrap popovers via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-popover-methods-using-javascript.html" target="_blank">Bootstrap <code>show()</code> popover method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-popover-methods-using-javascript.html" target="_blank">Bootstrap <code>hide()</code> popover method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-popover-methods-using-javascript.html" target="_blank">Bootstrap <code>toggle()</code> popover method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-popover-methods-using-javascript.html" target="_blank">Bootstrap <code>dispose()</code> popover method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-popover-methods-using-javascript.html" target="_blank">Bootstrap <code>enable()</code> popover method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-popover-methods-using-javascript.html" target="_blank">Bootstrap <code>disable()</code> popover method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-popover-methods-using-javascript.html" target="_blank">Bootstrap <code>toggleEnabled()</code> popover method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-popover-methods-using-javascript.html" target="_blank">Bootstrap <code>update()</code> popover method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=get-popover-instance-using-javascript.html" target="_blank">Bootstrap <code>getInstance()</code> popover method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=get-or-create-popover-instance-using-javascript.html" target="_blank">Bootstrap <code>getOrCreateInstance()</code> popover method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=listening-to-collapse-events-using-javascript.html" target="_blank">Display a message when Bootstrap popover fade out transition has been completed</a></li>
                    </ul>
                    <h2>Bootstrap Alerts Messages</h2>
                    <ul>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=common-alert-messages.html" target="_blank">Creating success, error, warning and info alert messages with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=new-alert-boxes.html" target="_blank">Creating primary, secondary, dark, and light alert messages with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=alert-with-icons.html" target="_blank">Adding icons to Bootstrap alerts</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=alert-with-additional-content.html" target="_blank">Placing additional content inside Bootstrap alerts</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=alert-links.html" target="_blank">Matching links color inside Bootstrap alerts</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=dismissal-of-alerts-via-data-attributes.html" target="_blank">Dismissal of Bootstrap alerts via data attributes</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=dismissal-of-alerts-via-javascript.html" target="_blank">Dismissal of Bootstrap alerts via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=close-alerts-using-javascript.html" target="_blank">Bootstrap <code>close()</code> alert method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=dispose-alerts-using-javascript.html" target="_blank">Bootstrap <code>dispose()</code> alert method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=get-alert-instance-using-javascript.html" target="_blank">Bootstrap <code>getInstance()</code> alert method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=get-or-create-alert-instance-using-javascript.html" target="_blank">Bootstrap <code>getOrCreateInstance()</code> alert method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=listening-to-collapse-events-using-javascript.html" target="_blank">Display a message when Bootstrap alert has been completely closed</a></li>
                    </ul>                              
                    <h2>Bootstrap Collapse</h2>
                    <ul>                        
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=creating-collapsible-element-via-data-attributes.html" target="_blank">Expanding and collapsing elements via data attributes</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=creating-collapsible-element-via-javascript.html" target="_blank">Expanding and collapsing elements via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=collapse-methods.html" target="_blank">Bootstrap <code>.collapse(options)</code> method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=collapse-methods.html" target="_blank">Bootstrap <code>.collapse('toggle')</code> method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=collapse-methods.html" target="_blank">Bootstrap <code>.collapse('show')</code> method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=collapse-methods.html" target="_blank">Bootstrap <code>.collapse('hide')</code> method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=collapse-events.html" target="_blank">Display a message when collapsible element has been completely closed</a></li>
                    </ul>
                    <h2>Bootstrap Carousel</h2>
                    <ul>
                    	<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=carousel.html" target="_blank">Creating carousels with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=carousel-with-captions.html" target="_blank">Adding captions to Bootstrap carousel items</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=carousel-dark.html" target="_blank">Creating dark variant of Bootstrap carousel</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=activate-carousel-via-data-attributes.html" target="_blank">Activate Bootstrap carousels via data attributes</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=activate-carousel-via-javascript.html" target="_blank">Activate Bootstrap carousels via JavaScript</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=disable-carousel-autoplay-via-javascript.html" target="_blank">Removing auto-sliding from Bootstrap carousel via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-carousel-methods-using-javascript.html" target="_blank">Bootstrap <code>cycle()</code> carousel method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-carousel-methods-using-javascript.html" target="_blank">Bootstrap <code>pause()</code> carousel method</a></li>                        
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-carousel-methods-using-javascript.html" target="_blank">Bootstrap <code>prev()</code> carousel method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-carousel-methods-using-javascript.html" target="_blank">Bootstrap <code>next()</code> carousel method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-carousel-methods-using-javascript.html" target="_blank">Bootstrap <code>nextWhenVisible()</code> carousel method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-carousel-methods-using-javascript.html" target="_blank">Bootstrap <code>to()</code> carousel method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=dispose-carousel-using-javascript.html" target="_blank">Bootstrap <code>dispose()</code> carousel method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=get-carousel-instance-using-javascript.html" target="_blank">Bootstrap <code>getInstance()</code> carousel method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=get-or-create-carousel-instance-using-javascript.html" target="_blank">Bootstrap <code>getOrCreateInstance()</code> carousel method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=listening-to-carousel-events-using-javascript.html" target="_blank">Display a message when sliding of a Bootstrap carousel item has been completed</a></li>
                    </ul>
                    <h2>Bootstrap Typeahead</h2>
                    <ul>
                    	<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=typeahead-with-local-dataset.html" target="_blank">Creating Twitter typeahead with local dataset</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=typeahead-with-external-dataset.html" target="_blank">Creating Twitter typeahead with external dataset</a></li>
                    </ul>
                    <h2>Bootstrap ScrollSpy</h2>
                    <ul>
                    	<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=scrollspy.html" target="_blank">Creating scrollspy with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=adding-scrollspy-via-data-attributes.html" target="_blank">Adding scrollspy to Bootstrap navbar via data attributes</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=adding-scrollspy-via-javascript.html" target="_blank">Adding scrollspy to Bootstrap navbar via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=adding-scrollspy-offset-via-javascript.html" target="_blank">Adding offset to Bootstrap scrollspy via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=refresh-scrollspy-using-javascript.html" target="_blank">Bootstrap <code>refresh()</code> scrollspy method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=dispose-scrollspy-using-javascript.html" target="_blank">Bootstrap <code>dispose()</code> scrollspy method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=get-scrollspy-instance-using-javascript.html" target="_blank">Bootstrap <code>getInstance()</code> scrollspy method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=get-or-create-scrollspy-instance-using-javascript.html" target="_blank">Bootstrap <code>getOrCreateInstance()</code> scrollspy method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=scrollspy-activate-event.html" target="_blank">Display the name of menu items when it is highlighted by the scrollspy</a></li>
						<li><a href="codelab.php%3Ftopic=bootstrap&amp;file=listening-to-scrollspy-event-using-javascript.html" target="_blank">Get the nav item currently highlighted by Bootstrap scrollspy via JavaScript</a></li>
                    </ul>
					<h2>Bootstrap Toasts</h2>
                    <ul>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=toast.html" target="_blank">Creating toasts with Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=vertically-stacked-toasts.html" target="_blank">Stacking toasts vertically in Bootstrap</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=toasts-placement.html" target="_blank">Placing Bootstrap toasts on screen with CSS</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=stop-hiding-toast-automatically-via-data-attributes.html" target="_blank">Stop hiding Bootstrap toasts automatically via data attributes</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=disable-toast-autohide-via-javascript.html" target="_blank">Disable Bootstrap toasts autohide via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=increase-toast-autohide-time-via-javascript.html" target="_blank">Increasing Bootstrap toasts autohide time via JavaScript</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-toast-methods-using-javascript.html" target="_blank">Bootstrap <code>show()</code> toast method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-toast-methods-using-javascript.html" target="_blank">Bootstrap <code>hide()</code> toast method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=calling-toast-methods-using-javascript.html" target="_blank">Bootstrap <code>dispose()</code> toast method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=get-toast-instance-using-javascript.html" target="_blank">Bootstrap <code>getInstance()</code> toast method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=get-or-create-toast-instance-using-javascript.html" target="_blank">Bootstrap <code>getOrCreateInstance()</code> toast method</a></li>
                        <li><a href="codelab.php%3Ftopic=bootstrap&amp;file=listening-to-toast-events-using-javascript.html" target="_blank">Display a message when Bootstrap toast has been completely closed</a></li>
                    </ul>
                </div>
                <p>Please check out the <a href="twitter-bootstrap-tutorial/index.html">Bootstrap tutorial</a> section step-by-step for a better understanding of these examples. You'll also find all plugin examples in both jQuery and JavaScript format.</p>
                <!--Bottom Navigation-->
                <div class="bottom-link clearfix">
                    <a href="jquery-examples.php.html" class="previous-page-bottom">Previous Page</a>
                    <a href="php-examples.php.html" class="next-page-bottom">Next Page</a>
                </div>
                <!--End:Bottom Navigation-->
                <!-- InstanceEndEditable -->
                <div class="bottom-ad clearfix">

     <div class="ad-label">Advertisements</div>

     <!--Rectangle Left-->
     <div class="rectangle-left fl">
          <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
          <!-- Large Rectangle Left -->
          <ins class="adsbygoogle"
               style="display:inline-block;width:336px;height:280px"
               data-ad-client="ca-pub-9107540490929984"
               data-ad-slot="8162953958"></ins>
          <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
          </script>
     </div>
     <!--End:Rectangle Left-->

     <!--Rectangle Right-->
     <div class="rectangle-right fr">
          <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
          <!-- Large Rectangle Right -->
          <ins class="adsbygoogle"
               style="display:inline-block;width:336px;height:280px"
               data-ad-client="ca-pub-9107540490929984"
               data-ad-slot="3324015654"></ins>
          <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
          </script>
     </div>
     <!--End:Rectangle Right-->

</div>

            </div>
            <!--End:Text Content-->
            <!--Feedback Form-->
			<div class="snippets">
	<a href="snippets/gallery.php.html" target="_blank"><img src="lib/images/bootstrap-code-snippets.png" alt="Bootstrap UI Design Templates" /></a>
</div>            <!--End:Feedback Form-->
        </div>        
        <div class="rightcolumn">
            <div class="sidebar">
    
    <div class="ad-label">Advertisements</div>

    <div class="skyscraper primary">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- Premium Skyscraper -->
        <ins class="adsbygoogle"
            style="display:inline-block;width:160px;height:600px"
            data-ad-client="ca-pub-9107540490929984"
            data-ad-slot="4376141825"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>

    
</div>        </div>
    </div>
    <!--Footer-->
	<!--Footer-->
<div class="footer">
    <div class="appeal">
        <div class="wrapper">
            <p>Is this website helpful to you? Please give us a
            <a href="like.php.html" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=250,width=600,top=150, left='+((screen.width/2)-300));return false;">like</a>,
            or share your <a href="contact-us.php.html" target="_blank">feedback</a><em> to help us improve</em>.
            Connect with us on <a href="https://www.facebook.com/tutorialrepublic" target="_blank">Facebook</a> and <a href="https://twitter.com/tutrepublic" target="_blank">Twitter</a> for the latest updates.</p>               
        </div>
    </div>
    <div class="footer-inner">
        <div class="wrapper clearfix">                
            <div class="link-box">
                <h4>About Us</h4>
                <div class="clearfix">
                    <a href="about-us.php.html">Our Story</a>                    
                    <a href="terms-of-use.php.html">Terms of Use</a>
                    <a href="privacy-policy.php.html">Privacy Policy</a>                    
                </div>
            </div>
            <div class="link-box">
                <h4>Contact</h4>
                <div class="clearfix">
                    <a href="contact-us.php.html">Contact Us</a>                    
                    <a href="contact-us.php.html" target="_blank">Report Error</a>
                    <a href="advertise-with-us.php.html">Advertise</a>                    
                </div>
            </div>
            <div class="tool-box">
                <h4>Interactive Tools</h4>
                <div class="tools-list clearfix" id="tools">
                    <a href="font-awesome-icons-classes.php.html" target="_blank">Font Awesome Icon Search Utility</a>
                    <a href="html-formatter.php.html" target="_blank">HTML Formatter</a>
                    <a href="faq/what-is-the-maximum-length-of-title-and-meta-description-tag.php.html">Title &amp; Meta Length Calculator</a>
                    <a href="html-reference/html-color-picker.php.html">HTML Color Picker</a>
                    <a href="twitter-bootstrap-button-generator.php.html" target="_blank">Bootstrap Button Generator</a>
                    <a href="codelab.php%3Ftopic=sql&amp;file=select-all.html" target="_blank">SQL Playground</a>
                    <a href="bootstrap-icons-classes.php.html" target="_blank">Bootstrap Icon Finder</a>
                    <a href="codelab.php%3Ftopic=html&amp;file=hello-world.html" target="_blank">HTML Editor</a>
                </div>
            </div>
            <div class="footer-logo">
                <p><img src="lib/images/logo.svg" alt="TutorialRepublic" /><p>
					<div>
						<a href="https://www.buymeacoffee.com/tutrepublic" class="bmc-btn" rel="nofollow" target="_blank">
    						<img src="lib/images/bmc-btn.png" alt="BMC" />
						</a>
					</div>
            </div>
        </div>
    </div>           
        <div class="bottom-strip">
        <div class="wrapper">
            <div class="notice">Copyright &copy; 2022 Tutorial Republic. All Rights Reserved.</div>
            <div class="social-media">
                <em>Share This:</em>
                <a href="https://facebook.com/sharer.php?u=https://www.tutorialrepublic.com%2Ftwitter-bootstrap-examples.php" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600,top=150, left='+((screen.width/2)-300));return false;" title="Facebook"><i class="icon-facebook"></i></a>
                <a href="twitter-bootstrap-examples.php.html#" id="tweet-btn" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600,top=150, left='+((screen.width/2)-300));return false;" title="Twitter"><i class="icon-twitter"></i></a>
                <a href="twitter-bootstrap-examples.php.html#" id="email-btn" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600,top=150, left='+((screen.width/2)-300));return false;" rel="noreferrer" title="Gmail"><i class="icon-mail"></i></a>
            </div>
        </div>            
    </div>
    <script>
        var title = document.title.replace('- Tutorial Republic', '');
        document.getElementById('tweet-btn').href = 'https://twitter.com/share?text=' + title + '- &url=https://www.tutorialrepublic.com%2Ftwitter-bootstrap-examples.php';
        document.getElementById('email-btn').href = 'https://mail.google.com/mail/?view=cm&fs=1&su=' + title + '&body=https://www.tutorialrepublic.com%2Ftwitter-bootstrap-examples.php';
    </script>
</div>
<!--End:Footer-->
    
<div class="backdrop mobile-only"></div>

<!-- TutorialRepublic base script -->
<script>
// Adding CSS files
[	
	'/lib/styles/legacy/extended-1.1.css',
	'/lib/icomoon/style.css'
].forEach(function(href) {
	var link = document.createElement('link');
	link.rel = 'stylesheet';
	link.href = href;
	(document.getElementsByTagName('head')[0]).appendChild(link);
});

// Adding JS files
[
	'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',
	'/lib/js/prism.js',
	'/lib/js/default-1.3.js'
].forEach(function(src) {
	var script = document.createElement('script');
	script.async = false; // important
	script.src = src;
	(document.getElementsByTagName('body')[0]).appendChild(script);
});
</script>


    <!--End:Footer-->
</body>
<!-- InstanceEnd --></html>