Dropdown Menu

Dropdown wide / full

Use the .dropdown-wide class with the .dropdown class to make a dropdown menu big. The default width is 500px. Use the .dropdown-full class to create a dropdown menu as wide as its relative parent. See dropdown examples.

<div aria-labelledby="" class="dropdown-wide dropdown-wide-container">
	<div class="dropdown-menu">
		<div class="row">
			<div class="col-sm-4">
				<ul class="list-unstyled">
					<li class="dropdown-subheader">By Resource</li>
					<li><a class="dropdown-item" href="#1">Support Home</a></li>
					<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled Link</a></li>
					<li><a class="dropdown-item" href="#1">Chat or Call</a></li>
				</ul>
				<ul class="list-unstyled">
					<li class="dropdown-subheader">By Product</li>
					<li><a class="active dropdown-item" href="#1">Developing for the Platform</a></li>
					<li><a class="dropdown-item" href="#1">Mastering Fundamentals</a></li>
					<li><a class="dropdown-item" href="#1">Styling with Themes</a></li>
					<li><a class="dropdown-item" href="#1">Managing Content</a></li>
				</ul>
			</div>
			<div class="col-sm-4">
				<ul class="list-unstyled">
					<li class="dropdown-subheader">Popular Picks</li>
					<li><a class="dropdown-item" href="#1">Error Messages</a></li>
					<li><a class="dropdown-item" href="#1">Updates: Service Packs & Fixes</a></li>
					<li><a class="dropdown-item" href="#1">Install, Upgrade, & Activate</a></li>
					<li><a class="dropdown-item" href="#1">Regular Drivers</a></li>
					<li><a class="dropdown-item" href="#1">Hardware Drivers</a></li>
				</ul>
				<ul class="list-unstyled">
					<li class="dropdown-subheader">Security</li>
					<li><a class="dropdown-item" href="#1">Security Home</a></li>
					<li><a class="dropdown-item" href="#1">Security Essentials</a></li>
					<li><a class="dropdown-item" href="#1">Protecting Your Data</a></li>
					<li><a class="dropdown-item" href="#1">Securing Your Browser</a></li>
				</ul>
			</div>
			<div class="col-sm-4">
				<ul class="list-unstyled">
					<li class="dropdown-subheader">By Audience</li>
					<li><a class="dropdown-item" href="#1">For Home Users</a></li>
					<li><a class="dropdown-item" href="#1">For Small Business</a></li>
					<li><a class="dropdown-item" href="#1">For IT Professionals</a></li>
					<li><a class="dropdown-item" href="#1">For Developers</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>

Dropdown with Other Form Elements

<ul aria-labelledby="theDropdownToggleId" class="dropdown-menu">
	<li class="dropdown-section form-group">
		<label for="basicInputTypeText1">
			Text 1
		</label>
		<input class="form-control form-control-sm" id="basicInputTypeText1" placeholder="Placeholder" type="text"/>
	</li>
	<li class="dropdown-subheader">Form Section</li>
	<li class="dropdown-section">
		<div class="form-group">
			<label for="basicInputTypeText2">
				Text 2
			</label>
			<input class="form-control form-control-sm" id="basicInputTypeText2" placeholder="Placeholder" type="text"/>
		</div>
	</li>
	<li class="dropdown-section">
		<div class="form-group">
			<label for="basicInputTypeText3">
				Text 3
			</label>
			<input class="form-control form-control-sm" id="basicInputTypeText3" placeholder="Placeholder" type="text"/>
		</div>
		<div class="form-group">
			<label for="basicInputTypeTextarea">Textarea</label>
			<textarea class="form-control form-control-sm" id="basicInputTypeTextarea" placeholder="Placeholder"></textarea>
		</div>
	</li>
	<li class="dropdown-subheader">Order by</li>
	<li><a class="active dropdown-item" href="#1">Author</a></li>
	<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Title Entry</a></li>
</ul>

Dropdown Alignment

Add the dropdown-menu, dropdown-menu-right, dropdown-menu-top, or dropdown-menu-top-right class to a dropdown menu to align it with the bottom-left, bottom-right, top-left, or top-right side of the dropdown menu trigger, respectively:

Add the dropdown-menu-right-side, dropdown-menu-left-side, dropdown-menu-right-side-bottom, or dropdown-menu-left-side-bottom class to a dropdown menu to align it with the right side, left side, bottom-right side, or bottom-left side of the dropdown menu trigger, respectively:

You can also center the dropdown menu to its trigger with these four helper classes: dropdown-menu-center, dropdown-menu-top-center, dropdown-menu-left-side-middle, or dropdown-menu-right-side-middle.

To center the dropdown menu in browsers that don't support CSS transforms, set a negative margin-left equal to the width of the dropdown-menu divided by two. To vertically align left-side and right-side dropdown-menus, set a negative margin-top equal to the height of the dropdown-menu divided by two.