<!DOCTYPE html>
<html lang="en"><!-- InstanceBegin template="/Templates/bootstrap.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
	<!-- InstanceBeginEditable name="doctitle" -->
    <title>How to Create Dropdown Menu with Bootstrap 5 - Tutorial Republic</title>
    <meta name="description" content="Learn how to add dropdown menu to links, buttons, navs and navbar etc. quickly and easily with the Bootstrap dropdown plugin without writing any JavaScript code." />
    <!-- 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" -->
    <!-- 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="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>BOOTSTRAP</span> BASIC</div>
<div class="chapters">
    <a href="index.html">Bootstrap Introduction</a>
    <a href="bootstrap-get-started.php.html">Bootstrap Getting Started</a>
	<a href="bootstrap-containers.php.html">Bootstrap Containers</a>
    <a href="bootstrap-grid-system.php.html">Bootstrap Grid System</a>
    <a href="bootstrap-fixed-layout.php.html">Bootstrap Fixed Layout</a>
    <a href="bootstrap-fluid-layout.php.html">Bootstrap Fluid Layout</a>
    <a href="bootstrap-responsive-layout.php.html">Bootstrap Responsive Layout</a>
    <a href="bootstrap-typography.php.html">Bootstrap Typography</a>
    <a href="bootstrap-tables.php.html">Bootstrap Tables</a>
    <a href="bootstrap-lists.php.html">Bootstrap Lists</a>
	<a href="bootstrap-list-groups.php.html">Bootstrap List Groups</a>
    <a href="bootstrap-forms.php.html">Bootstrap Forms</a>
	<a href="bootstrap-custom-forms.php.html">Bootstrap Custom Forms</a>
	<a href="bootstrap-input-groups.php.html">Bootstrap Input Groups</a>
	<a href="bootstrap-buttons.php.html">Bootstrap Buttons</a>
	<a href="bootstrap-button-groups.php.html">Bootstrap Button Groups</a>
    <a href="bootstrap-images.php.html">Bootstrap Images</a>
	<a href="bootstrap-cards.php.html">Bootstrap Cards</a>
	<a href="bootstrap-media-objects.php.html">Bootstrap Media Objects</a>
    <a href="bootstrap-icons.php.html">Bootstrap Icons</a>
    <a href="bootstrap-navs.php.html">Bootstrap Navs</a>
    <a href="bootstrap-navbar.php.html">Bootstrap Navbar</a>
    <a href="bootstrap-accordion.php.html">Bootstrap Accordion</a>
    <a href="bootstrap-breadcrumbs.php.html">Bootstrap Breadcrumbs</a>
    <a href="bootstrap-pagination.php.html">Bootstrap Pagination</a>
    <a href="bootstrap-labels-and-badges.php.html">Bootstrap Badges</a>
    <a href="bootstrap-progress-bars.php.html">Bootstrap Progress Bars</a>
	<a href="bootstrap-spinners.php.html">Bootstrap Spinners</a>
	<a href="bootstrap-jumbotron.php.html">Bootstrap Jumbotron</a>
	<a href="bootstrap-helper-classes.php.html">Bootstrap Helper Classes</a>
</div>
<div class="segment"><span>BOOTSTRAP</span> ADVANCED</div>
<div class="chapters">
	<a href="bootstrap-modals.php.html">Bootstrap Modals</a>
    <a href="bootstrap-dropdowns.php.html">Bootstrap Dropdowns</a>
	<a href="bootstrap-tabs.php.html">Bootstrap Tabs</a>
    <a href="bootstrap-collapse.php.html">Bootstrap Collapse</a>
    <a href="bootstrap-tooltips.php.html">Bootstrap Tooltips</a>
    <a href="bootstrap-popovers.php.html">Bootstrap Popovers</a>
    <a href="bootstrap-alerts.php.html">Bootstrap Alerts</a>
	<a href="bootstrap-stateful-buttons.php.html">Bootstrap Stateful Buttons</a>    
    <a href="bootstrap-carousel.php.html">Bootstrap Carousel</a>
    <a href="bootstrap-typeahead.php.html">Bootstrap Typeahead</a>
    <a href="bootstrap-scrollspy.php.html">Bootstrap ScrollSpy</a>
	<a href="bootstrap-toasts.php.html">Bootstrap Toasts</a>
</div>
<div class="segment"><span>BOOTSTRAP</span> EXAMPLES</div>
<div class="chapters">
    <a href="../twitter-bootstrap-examples.php.html">Bootstrap Practice Examples</a>
	<a href="../faq.php.html#bootstrap-sass">Bootstrap FAQ's Answers</a>
</div>
<div class="segment"><span>BOOTSTRAP</span> ARCHIVE</div>
<div class="chapters">
    <a href="https://www.tutorialrepublic.com/twitter-bootstrap-4-tutorial/">Bootstrap 4 Tutorial</a>
	<a href="../twitter-bootstrap-4-examples.php.html">Bootstrap 4 Practice Examples</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="bootstrap-modals.php.html" class="previous-page" title="Go to Previous Page"></a>
            	<a href="bootstrap-tabs.php.html" class="next-page" title="Go to Next Page"></a>
                <h1>Bootstrap <span>Dropdowns</span></h1>
                <p class="summary">In this tutorial you will learn how to add dropdown menus to various Bootstrap components.</p>
                <h2>Creating Dropdown Menus with Bootstrap</h2>
				<p>The dropdown menu is typically used inside the navigation header to display a list of related links when a user mouse hover or click on the trigger element.</p>
                <p class="space">You can use the Bootstrap dropdown plugin to add toggleable dropdown menus (i.e. open and close on click) to almost anything such as links, buttons or button groups, navbar, tabs and pills nav etc. without even writing a single line of JavaScript code.</p>
                <h2>Adding Dropdowns via Data Attributes</h2>
                <p>Bootstrap provides an easy and elegant mechanism for adding the dropdown menu to an element via data attributes. The following example will show you the minimum markup required for adding a dropdown menu to the hyperlink via data attributes.</p>
				<!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=adding-dropdowns-via-data-attributes.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;div class="dropdown"&gt;
    &lt;a href="#" class="dropdown-toggle" data-bs-toggle="dropdown"&gt;Dropdown&lt;/a&gt;
    &lt;div class="dropdown-menu"&gt;
        &lt;a href="#" class="dropdown-item"&gt;Action&lt;/a&gt;
        &lt;a href="#" class="dropdown-item"&gt;Another action&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p class="space">The above example demonstrates the most basic form of the Bootstrap dropdowns. Let's understand each part of the Bootstrap dropdown component one by one.</p>
                <h2>Explanation of Code</h2>
                <p>The Bootstrap dropdown has basically two components &mdash; the dropdown trigger element which can be a hyperlink or button, and the dropdown menu itself.</p>
                <ul>
                	<li>The <code>.dropdown</code> class specifies a dropdown menu.</li>
                    <li>The <code>.dropdown-toggle</code> class defines the trigger element, which is a hyperlink in our case, whereas the attribute <code>data-bs-toggle="dropdown"</code> is required on the trigger element to toggle the dropdown menu.</li>
                    <li>The <a href="bootstrap-dropdowns.php.html#"><code>&lt;div&gt;</code></a> element with the class <code>.dropdown-menu</code> is actually building the dropdown menu that typically contains the related links or actions.</li>
                </ul>
				<p>Similarly, you can add the dropdowns to the buttons and nav components. The following section will show you some common implementation of the Bootstrap dropdown.</p>
				<hr />
				<h2>Dropdowns within a Navbar</h2>
                <p>The following examples will show you how to add dropdowns to navbar.</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=dropdowns-within-navbar.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a><span class="box-size"><i title="Maximize"></i></span></div>
                        <pre class="syntax-highlighter line-numbers scroll xxlarge"><code class="language-markup">&lt;nav class="navbar navbar-expand-sm navbar-light bg-light"&gt;
    &lt;div class="container-fluid"&gt;
        &lt;a href="#" class="navbar-brand"&gt;Brand&lt;/a&gt;
        &lt;button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"&gt;
            &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;div id="navbarCollapse" class="collapse navbar-collapse"&gt;
            &lt;ul class="nav navbar-nav"&gt;
                &lt;li class="nav-item"&gt;
                    &lt;a href="#" class="nav-link"&gt;Home&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                    &lt;a href="#" class="nav-link"&gt;Profile&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item dropdown"&gt;
                    &lt;a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"&gt;Messages&lt;/a&gt;
                    &lt;div class="dropdown-menu"&gt;
                        &lt;a href="#" class="dropdown-item"&gt;Inbox&lt;/a&gt;
                        &lt;a href="#" class="dropdown-item"&gt;Drafts&lt;/a&gt;
                        &lt;a href="#" class="dropdown-item"&gt;Sent Items&lt;/a&gt;
                        &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                        &lt;a href="#"class="dropdown-item"&gt;Trash&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class="nav navbar-nav ms-auto"&gt;
                &lt;li class="nav-item dropdown"&gt;
                    &lt;a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"&gt;Admin&lt;/a&gt;
                    &lt;div class="dropdown-menu dropdown-menu-end"&gt;
                        &lt;a href="#" class="dropdown-item"&gt;Reports&lt;/a&gt;
                        &lt;a href="#" class="dropdown-item"&gt;Settings&lt;/a&gt;
                        &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                        &lt;a href="#" class="dropdown-item"&gt;Logout&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/nav&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow space">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=dropdowns-within-navbar.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-dropdowns-within-navbar.png" width="760" height="66" alt="Bootstrap Dropdowns within Navbar" />
                        </a>
                    </div>
                </div>
				<!--Tip Box-->
				<div class="color-box">
					<div class="shadow">
						<div class="info-tab tip-icon" title="Useful Tips"><i></i></div>
						<div class="tip-box">
							<p><strong>Tip:</strong> You can draw a divider line to separate the links inside a dropdown menu by adding the class <code>.dropdown-divider</code> on a blank <code>&lt;div&gt;</code> element.</p>
						</div>
					</div>
				</div>
				<!--End:Tip Box-->
                <hr />
                <h2>Dropdowns within Navs</h2>
                <p>The following example will show you how to add dropdowns to pills navs.</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=dropdowns-within-nav.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a><span class="box-size"><i title="Maximize"></i></span></div>
                        <pre class="syntax-highlighter line-numbers scroll xxlarge"><code class="language-markup">&lt;ul class="nav nav-pills"&gt;
    &lt;li class="nav-item"&gt;
        &lt;a href="#" class="nav-link active"&gt;Home&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav-item"&gt;
        &lt;a href="#" class="nav-link"&gt;Profile&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
        &lt;a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"&gt;Messages&lt;/a&gt;
        &lt;div class="dropdown-menu"&gt;
            &lt;a href="#" class="dropdown-item"&gt;Inbox&lt;/a&gt;
            &lt;a href="#" class="dropdown-item"&gt;Drafts&lt;/a&gt;
            &lt;a href="#" class="dropdown-item"&gt;Sent Items&lt;/a&gt;
            &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
            &lt;a href="#" class="dropdown-item"&gt;Trash&lt;/a&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown ms-auto"&gt;
        &lt;a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"&gt;Admin&lt;/a&gt;
        &lt;div class="dropdown-menu dropdown-menu-end"&gt;
            &lt;a href="#" class="dropdown-item"&gt;Reports&lt;/a&gt;
            &lt;a href="#" class="dropdown-item"&gt;Settings&lt;/a&gt;
            &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
            &lt;a href="#" class="dropdown-item"&gt;Logout&lt;/a&gt;
        &lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=dropdowns-within-nav.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-dropdowns-within-nav.png" width="760" height="50" alt="Bootstrap Dropdowns within Nav" />
                        </a>
                    </div>
                </div>
				<p>You can simply convert the above example to a tab dropdown by replacing the class <code>.nav-pills</code> with the <code>.nav-tabs</code>, without any further change in markup.</p>
                <hr />
                <h2 id="button-dropdowns">Dropdowns within Buttons</h2>
                <p>The following examples will show you how to add dropdowns to a primary button.</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=dropdowns-within-buttons.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;div class="btn-group"&gt;
    &lt;button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"&gt;Primary&lt;/button&gt;
    &lt;div class="dropdown-menu"&gt;
        &lt;a href="#" class="dropdown-item"&gt;Action&lt;/a&gt;
        &lt;a href="#" class="dropdown-item"&gt;Another action&lt;/a&gt;
        &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
        &lt;a href="#" class="dropdown-item"&gt;Separated link&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; Similarly you can add dropdowns to other variants of the buttons, as shown here:</p>
                <div class="shadow space">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=dropdowns-within-buttons.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-dropdowns-within-buttons.png" width="760" height="48" alt="Bootstrap Dropdowns within Buttons" />
                        </a>
                    </div>
                </div>
                <hr />
                <h2>Bootstrap Split Button Dropdowns</h2>
                <p>The following examples will show you how to add dropdowns to split buttons.</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=split-button-dropdowns.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;div class="btn-group"&gt;
    &lt;button type="button" class="btn btn-primary"&gt;Primary&lt;/button&gt;
    &lt;button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"&gt;
        &lt;span class="visually-hidden"&gt;Toggle Dropdown&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class="dropdown-menu"&gt;
        &lt;a href="#" class="dropdown-item"&gt;Action&lt;/a&gt;
        &lt;a href="#" class="dropdown-item"&gt;Another action&lt;/a&gt;
        &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
        &lt;a href="#" class="dropdown-item"&gt;Separated link&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; Similarly you can add dropdowns to other variants of the buttons, as shown here:</p>
                <div class="shadow break">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=split-button-dropdowns.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-split-button-dropdowns.png" width="760" height="48" alt="Bootstrap Split Button Dropdowns" />
                        </a>
                    </div>
                </div>
				<!--Tip Box-->
                <div class="color-box">
                    <div class="shadow">
                        <div class="info-tab tip-icon" title="Useful Tips"><i></i></div>
                        <div class="tip-box">
                            <p><strong>Tip:</strong> You can use the Bootstrap's button relative sizing classes like <code>.btn-lg</code> and <code>.btn-sm</code> on the <code>.btn</code> element to further <a target="_blank" href="../codelab.php%3Ftopic=bootstrap&amp;file=sizing-button-dropdowns.html">resizing the buttons dropdowns</a>.</p>
                        </div>
                    </div>
                </div>
                <!--End:Tip Box-->
                <hr />
                <h2>Dropdowns Inside Button Groups</h2>
				<p>To create dropdown menus inside a button group just place a <code>.btn-group</code> along with the dropdown markup within another <code>.btn-group</code>, as shown in the following example:</p>
				<!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=dropdowns-within-button-groups.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;div class="btn-group"&gt;
    &lt;button type="button" class="btn btn-primary"&gt;Button&lt;/button&gt;
    &lt;button type="button" class="btn btn-primary"&gt;Another Button&lt;/button&gt;
    &lt;div class="btn-group"&gt;
        &lt;button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"&gt;Dropdown&lt;/button&gt;
        &lt;div class="dropdown-menu"&gt;
            &lt;a href="#" class="dropdown-item"&gt;Action&lt;/a&gt;
            &lt;a href="#" class="dropdown-item"&gt;Another action&lt;/a&gt;
            &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
            &lt;a href="#" class="dropdown-item"&gt;Separated link&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
				<p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=dropdowns-within-button-groups.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-dropdowns-within-button-groups.png" width="760" height="48" alt="Bootstrap Dropdowns within Button Groups" />
                        </a>
                    </div>
                </div>
				<p>Similarly, you can crate dropdown inside vertically stacked button groups, like this:</p>
				<!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=dropdowns-within-vertically-stacked-button-groups.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;div class="btn-group-vertical"&gt;
    &lt;button type="button" class="btn btn-primary"&gt;Button&lt;/button&gt;
    &lt;button type="button" class="btn btn-primary"&gt;Another Button&lt;/button&gt;
    &lt;div class="btn-group"&gt;
        &lt;button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"&gt;Dropdown&lt;/button&gt;
        &lt;div class="dropdown-menu"&gt;
            &lt;a href="#" class="dropdown-item"&gt;Action&lt;/a&gt;
            &lt;a href="#" class="dropdown-item"&gt;Another action&lt;/a&gt;
            &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
            &lt;a href="#" class="dropdown-item"&gt;Separated link&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
				<hr />
				<h2>Creating Dropup, Dropleft and Dropright Menus</h2>
				<p>You can even trigger the dropdown menus above, as well as, at the left and right of the elements by adding an extra class <code>.dropup</code>, <code>.dropstart</code> and <code>.dropend</code>, respectively to the parent element (i.e. the <code>.btn-group</code> element), as shown in the following example.</p>
				<!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=dropup-dropleft-and-dropright-menus.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a><span class="box-size"><i title="Maximize"></i></span></div>
                        <pre class="syntax-highlighter line-numbers scroll xxlarge"><code class="language-markup">&lt;!-- Dropup menu --&gt;
&lt;div class="btn-group dropup"&gt;
    &lt;button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"&gt;Dropup&lt;/button&gt;
    &lt;div class="dropdown-menu"&gt;
        &lt;a href="#" class="dropdown-item"&gt;Action&lt;/a&gt;
        &lt;a href="#" class="dropdown-item"&gt;Another action&lt;/a&gt;
        &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
        &lt;a href="#" class="dropdown-item"&gt;Separated link&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Dropleft menu --&gt;
&lt;div class="btn-group dropstart"&gt;
    &lt;button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"&gt;Dropleft&lt;/button&gt;
    &lt;div class="dropdown-menu"&gt;
        &lt;a href="#" class="dropdown-item"&gt;Action&lt;/a&gt;
        &lt;a href="#" class="dropdown-item"&gt;Another action&lt;/a&gt;
        &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
        &lt;a href="#" class="dropdown-item"&gt;Separated link&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Dropright menu --&gt;
&lt;div class="btn-group dropend"&gt;
    &lt;button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"&gt;Dropright&lt;/button&gt;
    &lt;div class="dropdown-menu"&gt;
        &lt;a href="#" class="dropdown-item"&gt;Action&lt;/a&gt;
        &lt;a href="#" class="dropdown-item"&gt;Another action&lt;/a&gt;
        &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
        &lt;a href="#" class="dropdown-item"&gt;Separated link&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
				<p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=dropup-dropleft-and-dropright-menus.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-dropup-dropleft-and-dropright-menus.png" width="760" height="48" alt="Bootstrap Dropup, Dropleft and Dropright Menus" />
                        </a>
                    </div>
                </div>
				<hr />
				<h2>Creating the Right Aligned Dropdown Menus</h2>
				<p>By default, the top-left corner of the dropdown menu is positioned at the bottom-left corner of its parent element i.e. 100% from the top and along the left side. To right align the dropdown menu just add an extra class <code>.dropdown-menu-end</code> to the <code>.dropdown-menu</code> base class.</p>
                <!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=right-aligned-dropdown-menus.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;div class="btn-group"&gt;
    &lt;button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"&gt;Right-aligned Dropdown Menu&lt;/button&gt;
    &lt;div class="dropdown-menu dropdown-menu-end"&gt;
        &lt;a href="#" class="dropdown-item"&gt;Action&lt;/a&gt;
        &lt;a href="#" class="dropdown-item"&gt;Another action&lt;/a&gt;
        &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
        &lt;a href="#" class="dropdown-item"&gt;Separated link&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
                <p>&mdash; The output of the above example will look something like this:</p>
                <div class="shadow">
                    <div class="preview-box">
                        <a href="../codelab.php%3Ftopic=bootstrap&amp;file=right-aligned-dropdown-menus.html" target="_blank">
                            <img src="../lib/images/bootstrap-5/bootstrap-right-aligned-dropdown-menus.png" width="760" height="48" alt="Bootstrap Right-aligned Dropdown Menus" />
                        </a>
                    </div>
                </div>
				<hr />
				<h2>Adding Headers to Dropdown Items</h2>
				<p>You can optionally add a menu header to label a section of menu items inside a dropdown menu by adding the class <code>.dropdown-header</code> to the <code>&lt;div&gt;</code> element, like this:</p>
				<!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=dropdown-header.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;div class="btn-group"&gt;
    &lt;button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"&gt;Products&lt;/button&gt;
    &lt;div class="dropdown-menu"&gt;
        &lt;div class="dropdown-header"&gt;ELECTRONICS&lt;/div&gt;
        &lt;a href="#" class="dropdown-item"&gt;Mobiles&lt;/a&gt;
        &lt;a href="#" class="dropdown-item"&gt;Tablets&lt;/a&gt;
        &lt;a href="#" class="dropdown-item"&gt;Laptops&lt;/a&gt;
        &lt;div class="dropdown-header"&gt;FASHION&lt;/div&gt;
        &lt;a href="#" class="dropdown-item"&gt;Clothing&lt;/a&gt;
        &lt;a href="#" class="dropdown-item"&gt;Sunglasses&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
				<hr />
				<h2>Disable Items within a Dropdown</h2>
				<p>You can apply the class <code>.disabled</code> to the menu items in the dropdown to make them look like disabled. However, the link is still clickable, to disable this you can typically <a href="../faq/how-to-remove-clickable-behavior-from-a-disabled-link-using-jquery.php.html">remove the anchor's <code>href</code> attribute</a> either using the JavaScript or manually.</p>
				<!--Code box-->
                <div class="example">
                    <div class="codebox">
                        <div class="codebox-title"><h4>Example</h4><a href="../codelab.php%3Ftopic=bootstrap&amp;file=disabling-dropdown-items.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a></div>
                        <pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;div class="btn-group"&gt;
    &lt;button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"&gt;Reports&lt;/button&gt;
    &lt;div class="dropdown-menu"&gt;
        &lt;a href="#" class="dropdown-item"&gt;View&lt;/a&gt;
        &lt;a href="#" class="dropdown-item"&gt;Download&lt;/a&gt;
        &lt;a href="#" class="dropdown-item disabled" tabindex="-1"&gt;Edit / Delete&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
                <!--End:Code box-->
				<hr />
                <h2>Adding Dropdowns via JavaScript</h2>
                <p>You may also add dropdowns manually using the JavaScript &mdash; just call the <code>dropdown()</code> Bootstrap method with the <code>id</code> or <code>class</code> <a href="../css-tutorial/css-selectors.php.html">selector</a> of the link or button element in your JavaScript code.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="enable-dropdowns-via-jquery">jQuery</span> 
                                <span data-target="1" data-url="enable-dropdowns-via-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=enable-dropdowns-via-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $(".dropdown-toggle").dropdown();
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var dropdownElementList = [].slice.call(document.querySelectorAll(".dropdown-toggle"));
    var dropdownList = dropdownElementList.map(function(element){
        return new bootstrap.Dropdown(element)
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
				<!--Note box-->
				<div class="color-box">
					<div class="shadow">
						<div class="info-tab note-icon" title="Important Notes"><i></i></div>
						<div class="note-box">
							<p><strong>Note:</strong> The <code>data-bs-toggle="dropdown"</code> is still required for the dropdown's trigger element regardless of whether you call the dropdown via JavaScript or data-api.</p>
						</div>
					</div>
				</div>
				<!--End:Note box-->
                <hr />
                <h2>Options</h2>
                <p>There are certain options which can be passed to <code>dropdown()</code> Bootstrap method to customize the functionality of a dropdown. Options can be passed via data attributes or JavaScript.</p>
                <p>For setting the dropdown options via data attributes, just append the option name to <code>data-bs-</code>, like <code>data-bs-display="static"</code>, and so on. Also, when passing the options via data attributes make sure to change the case type of the option name from <strong>camelCase</strong> to <strong>kebab-case</strong>. For example, instead of using <code>data-bs-autoClose="false"</code>, use <code>data-bs-auto-close="false"</code>.</p>
                <div class="shadow">
                    <table class="data">
                        <thead>
                            <tr>
                                <th><pre>Name        </pre></th>
                                <th style="width: 80px;">Type</th>
                                <th>Default&nbsp;Value</th>
                                <th>Description</th>
                            </tr>                        	
                        </thead>
                        <tbody>
                            <tr>
                                <td>boundary</td>
                                <td>string | element</td>
                                <td>'clippingParents'</td>
                                <td>Overflow constraint boundary of the dropdown menu (applies only to Popper's preventOverflow modifier). It can also accept an HTMLElement reference (via JavaScript only).</td>
                            </tr>
                            <tr>
                                <td>reference</td>
                                <td>string | element | object</td>
                                <td>'toggle'</td>
                                <td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, an HTMLElement reference or an object providing <code>getBoundingClientRect</code>.</td>
                            </tr>
                            <tr>
                                <td>display</td>
                                <td>string</td>
                                <td>'dynamic'</td>
                                <td>By default, Bootstrap use Popper for dynamic positioning. You can disable this with <code>'static'</code>.</td>
                            </tr>
                            <tr>
                                <td>offset</td>
                                <td>array | string | function</td>
                                <td>[0, 2]</td>
                                <td>Specify the offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: <code>data-bs-offset="10,20"</code>.</td>
                            </tr>
                            <tr>
                                <td>autoClose</td>
                                <td>boolean | string</td>
                                <td>true</td>
                                <td>
                                    <p>Configure the auto close behavior of the dropdown:</p>
                                    <ul>
                                        <li><code>true</code> - the dropdown will be closed by clicking outside or inside the dropdown menu.</li>
                                        <li><code>false</code> - the dropdown will be closed by clicking the toggle button and manually calling  the <code>hide</code> or <code>toggle</code> method. Also, dropdown will not be closed by pressing esc key.</li>
                                        <li><code>'inside'</code> - the dropdown will be closed (only) by clicking inside the dropdown menu.</li>
                                        <li><code>'outside'</code> - the dropdown will be closed (only) by clicking outside the dropdown menu.</li>
                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <td>popperConfig</td>
                                <td>null | object | function</td>
                                <td>null</td>
                                <td>Allows you to change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v1/#Popper.Defaults" rel="nofollow" target="_blank">Popper's configuration</a>.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <p>See the <a href="https://popper.js.org/popper-documentation.html">Popper.js's documentation</a> for more information on options mentioned above.</p>
                <hr />
                <h2>Methods</h2>
                <p class="space">This is the standard bootstrap's dropdown method:</p>
                <h2>toggle</h2>
                <p>This method toggles the dropdown menu of a given navbar or tabbed navigation.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="calling-dropdown-methods-via-jquery">jQuery</span> 
                                <span data-target="1" data-url="calling-dropdown-methods-via-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=calling-dropdown-methods-via-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myDropdown").dropdown("toggle");
    });
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myDropdown");

    // Create a dropdown instance
    var myDropdown = new bootstrap.Dropdown(element);

    btn.addEventListener("click", function(){
        myDropdown.toggle();
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
                <h2>show</h2>
                <p>This method shows the dropdown menu of a given navbar or tabbed navigation.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="calling-dropdown-methods-via-jquery">jQuery</span> 
                                <span data-target="1" data-url="calling-dropdown-methods-via-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=calling-dropdown-methods-via-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myDropdown").dropdown("show");
    });
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myDropdown");

    // Create a dropdown instance
    var myDropdown = new bootstrap.Dropdown(element);

    btn.addEventListener("click", function(){
        myDropdown.show();
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
                <h2>hide</h2>
                <p>This method hides the dropdown menu of a given navbar or tabbed navigation.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="calling-dropdown-methods-via-jquery">jQuery</span> 
                                <span data-target="1" data-url="calling-dropdown-methods-via-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=calling-dropdown-methods-via-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myDropdown").dropdown("hide");
    });
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myDropdown");

    // Create a dropdown instance
    var myDropdown = new bootstrap.Dropdown(element);

    btn.addEventListener("click", function(){
        myDropdown.hide();
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
                <h2>update</h2>
                <p>This method updates the position of an element's dropdown.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="calling-dropdown-methods-via-jquery">jQuery</span> 
                                <span data-target="1" data-url="calling-dropdown-methods-via-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=calling-dropdown-methods-via-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myDropdown").dropdown("update");
    });
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myDropdown");

    // Create a dropdown instance
    var myDropdown = new bootstrap.Dropdown(element);

    btn.addEventListener("click", function(){
        myDropdown.update();
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
                <h2>dispose</h2>
                <p>This method destroys an element's dropdown (i.e. removes stored data on the DOM element).</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="calling-dropdown-methods-via-jquery">jQuery</span> 
                                <span data-target="1" data-url="calling-dropdown-methods-via-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=calling-dropdown-methods-via-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myDropdown").dropdown("dispose");
    });
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myDropdown");

    // Create a dropdown instance
    var myDropdown = new bootstrap.Dropdown(element);

    btn.addEventListener("click", function(){
        myDropdown.dispose();
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->	
                <h2>getInstance</h2>
                <p>This is a static method which allows you to get the dropdown instance associated with a DOM element.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="get-dropdown-instance-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="get-dropdown-instance-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=get-dropdown-instance-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myDropdown = bootstrap.Dropdown.getInstance($("#myDropdown")[0]);
        console.log(myDropdown);
        // {_element: button#myDropdown.btn.btn-primary.dropdown-toggle, _popper: {&hellip;}, _config: {&hellip;}, _menu: div.dropdown-menu, _inNavbar: false}
    });
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myDropdown");

    btn.addEventListener("click", function(){
        var myDropdown = bootstrap.Dropdown.getInstance(element);
        console.log(myDropdown);
        // {_element: button#myDropdown.btn.btn-primary.dropdown-toggle, _popper: {&hellip;}, _config: {&hellip;}, _menu: div.dropdown-menu, _inNavbar: false}
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->                
                <h2>getOrCreateInstance</h2>
                <p>This is a static method which allows you to get the dropdown instance associated with a DOM element, or create a new one in case if the dropdown wasn't initialized.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="get-or-create-dropdown-instance-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="get-or-create-dropdown-instance-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=get-or-create-dropdown-instance-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myDropdown = bootstrap.Dropdown.getOrCreateInstance($("#myDropdown")[0]);
        console.log(myDropdown);
        // {_element: button#myDropdown.btn.btn-primary.dropdown-toggle, _popper: null, _config: {&hellip;}, _menu: div.dropdown-menu, _inNavbar: false}
    });
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myDropdown");

    btn.addEventListener("click", function(){
        var myDropdown = bootstrap.Dropdown.getOrCreateInstance(element);
        console.log(myDropdown);
        // {_element: button#myDropdown.btn.btn-primary.dropdown-toggle, _popper: null, _config: {&hellip;}, _menu: div.dropdown-menu, _inNavbar: false}
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
				<hr />
                <h2>Events</h2>
                <p>These are the standard Bootstrap events to enhance the dropdown functionality.</p>
                <p>All dropdown events are fired at the toggling element and then bubbled up. So you can also add event listeners on the <code>.dropdown-menu</code>'s parent element. Also, you can use the <code>event.relatedTarget</code> to target the toggling anchor element.</p>
                <div class="shadow">
                    <table class="data">
                        <thead>
                            <tr>
                                <th>Event</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>show.bs.dropdown</td>
                                <td>This event fires immediately when the show instance method is called.</td>
                            </tr>
                            <tr>
                                <td>shown.bs.dropdown</td>
                                <td>This event is fired when the dropdown has been made visible to the user and CSS transitions have completed.</td>
                            </tr>
                            <tr>
                                <td>hide.bs.dropdown</td>
                                <td>This event is fired immediately when the hide instance method has been called.</td>
                            </tr>
                            <tr>
                                <td>hidden.bs.dropdown</td>
                                <td>This event is fired when the dropdown has finished being hidden from the user and CSS transitions have completed.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <p>The following example displays the text content of dropdown link when the users click on it.</p>
                <!--Code box-->
				<div class="example">
					<div class="codebox multi-style-mode">
						<div class="codebox-title">
                        	<h4>Example</h4>
                            <div class="code-style">
                            	<span class="active" data-target="0" data-url="listening-to-dropdown-events-using-jquery">jQuery</span> 
                                <span data-target="1" data-url="listening-to-dropdown-events-using-javascript">JavaScript</span>
                            </div>
                            <a href="../codelab.php%3Ftopic=bootstrap&amp;file=listening-to-dropdown-events-using-jquery.html" target="_blank" class="try-btn" title="Try this code using online Editor">Try this code <span>&raquo;</span></a>
						</div>
						<pre class="syntax-highlighter line-numbers"><code class="language-markup">&lt;script&gt;
$(document).ready(function(){
    $(".dropdown").on("show.bs.dropdown", function(e){
        var linkText = $(e.relatedTarget).text(); // Get the link text
        alert("Click on OK button to view the dropdown menu for - " + linkText);
    });
});
&lt;/script&gt;</code></pre>
                        <pre class="syntax-highlighter line-numbers hide"><code class="language-markup">&lt;script&gt;
document.addEventListener("DOMContentLoaded", function(){
    var dropdownList = [].slice.call(document.querySelectorAll(".dropdown"));
    dropdownList.forEach(function(dropdown){
        dropdown.addEventListener("show.bs.dropdown", function(e){
            var linkText = e.relatedTarget.innerText; // Get the link text
            alert("Click on OK button to view the dropdown menu for - " + linkText);
        });
    });
});
&lt;/script&gt;</code></pre>
					</div>
				</div>
				<!--End:Code box-->
                <!--Bottom Navigation-->
                <div class="bottom-link clearfix">
                    <a href="bootstrap-modals.php.html" class="previous-page-bottom">Previous Page</a>
                    <a href="bootstrap-tabs.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 class="skyscraper">
     <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
     <!-- Bottom Skyscraper -->
     <ins class="adsbygoogle"
          style="display:inline-block;width:160px;height:600px"
          data-ad-client="ca-pub-9107540490929984"
          data-ad-slot="3387984471"></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-tutorial%2Fbootstrap-dropdowns.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="bootstrap-dropdowns.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="bootstrap-dropdowns.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-tutorial%2Fbootstrap-dropdowns.php';
        document.getElementById('email-btn').href = 'https://mail.google.com/mail/?view=cm&fs=1&su=' + title + '&body=https://www.tutorialrepublic.com%2Ftwitter-bootstrap-tutorial%2Fbootstrap-dropdowns.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>