Bootstrap styled dropdown
by amindunited
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div>
<select>
<option>
Portfolio One
Agency
Branch
</option>
</select>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Full Search Results
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">
<b>Branch One</b>
<div class="indent-1">
<sub>
Portfolio One <br/>
Agency One<br/>
Branch One<br/>
</sub>
</div>
</a>
<a class="dropdown-item" href="#">
<b>Branch One</b>
<div class="indent-1">
Portfolio One <br/>
Agency Two <br/>
Branch One<br/>
</div>
</a>
<a class="dropdown-item" href="#">
<b>Branch Onely</b>
<div class="indent-1">
Portfolio Two <br/>
Agency Two<br/>
Branch Onely<br/>
</div>
</a>
</div>
</div>
CSS
.dropdown-item {
/* padding: 2px; */
background-color: grey;
border-bottom: solid 1px black;
}
.indent-1 {
padding-left: 0.5rem;
}