Here is what I am talking about.
<!DOCTYPE html>
<html lang="en">
<head>
<!--REQUIRED META TAGS-->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--------------------------------------------------------------------------------------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>App</title>
</head>
<body class="bg-ttgl">
<div class="container">
<form class="form-group">
<div class="search-row row justify-content-center">
<!--dropdown section-->
<div class="col-7 input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Watching</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item">Completed</a>
<a class="dropdown-item">On-Hold</a>
<a class="dropdown-item">Dropped</a>
<a class="dropdown-item">Plan to Watch</a>
</div>
<!--search field section-->
<input type="text" class="form-control" aria-label="Anime list username" label="Anime list username" autocorrect="off" autocapitalize="off" placeholder="MyAnimeList username">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-light btn-outline-secondary" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>$(".dropdown-menu a").click(function () {
$("button").text($(this).text());
});
</script>
</body>
</html>
I also have another question, in the .gif above you can see the dropdown menu changing size, how do I make the dropdown menu not change size like shown
this gif here
By doing $("button.").text($(this).text()); you are essentially changing the text of every button present on the screen. To change the text of toggle button only, change it to $("button.dropdown-toggle").text($(this).text());
As for the width, the toggle button is changing size because there is no minimum width defined. Use this CSS to do so
button.dropdown-toggle {
min-width: 10rem; // This is same as the min-width of dropdown-menu
}
button.dropdown-toggle {
min-width: 10rem; // This is same as the min-width of dropdown-menu
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--REQUIRED META TAGS-->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--------------------------------------------------------------------------------------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>App</title>
</head>
<body class="bg-ttgl">
<div class="container">
<form class="form-group">
<div class="search-row row justify-content-center">
<!--dropdown section-->
<div class="col-7 input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Watching</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item">Completed</a>
<a class="dropdown-item">On-Hold</a>
<a class="dropdown-item">Dropped</a>
<a class="dropdown-item">Plan to Watch</a>
</div>
<!--search field section-->
<input type="text" class="form-control" aria-label="Anime list username" label="Anime list username" autocorrect="off" autocapitalize="off" placeholder="MyAnimeList username">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-light btn-outline-secondary" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>$(".dropdown-menu a").click(function () {
$("button.dropdown-toggle").text($(this).text());
});
</script>
</body>
</html>
Related
When I pressed the dropdown button, the links were supposed to be sorted one after the other. But I could not. I am using Bootstrap. I'm almost new to software by the way. It may be an easy question.
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
Link 1
Link 2
Link 3
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"></script>
You need to include "popper.js" library. It's what bootstrap uses for dropdown mechanism if i've researched correct. So this code works;
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
Link 1
Link 2
Link 3
</div>
</div>
</body>
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"
></script>
</html>
Just add the data-bs-toggle="dropdown" attribute to dropdown-toggle button.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown">Dropdown button</button>
<div class="dropdown-menu">
Link 1
Link 2
Link 3
</div>
</div>
Codepen live :
https://codepen.io/Superawdi/pen/jOzYrvX
I have input field inside a dropdown css and I am using bootstrap 4. when I enter some character I am not able to enter but I am able to input numbers. How to solve this.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="dropdown" data-dropdown="true">
<button type="button" class="btn btn-light btn-sm dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">Spot</button>
<div class="dropdown-menu" style="overflow-y: auto; max-height: 300px;" data-loaded="true" data-selectedvalues="S">
<input placeholder="Search...Type" type="search">
<button type="button" class="dropdown-item active" data-selectedvalues="S">Spot</button>
<button type="button" class="dropdown-item" data-selectedvalues="T">Term</button>
</div>
</div>
Ok I found the issue. There was a event listener for document level for a particular class input. It will fire every time I press the character key. The script was on some other file so was not able to find out. I thought it was a bootsrap feature initially.
Bootstrap dropdownlist is not displaying its list of contents on click. I added jquery library prior to the bootstrap.min.js(This was the solution that i found in stack overflow,but it does not work for me).
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="container features">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="signin-div">
<h3 class="feature-title">Login Here..</h3>
<div class="form-group">
<!-- Basic dropdown -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<!-- Basic dropdown -->
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
</div>
</div>
</div>
</body>
</html>
Try this code.
I have added popper.js before boostrap.js
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" i crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container features">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="signin-div">
<h3 class="feature-title">Login Here..</h3>
<div class="form-group">
<!-- Basic dropdown -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<!-- Basic dropdown -->
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
</div>
</div>
</div>
</body>
</html>
paste this code in head
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
paste this code in body
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Below is a sample of a button dropdown I've customized with material icons and the google roboto mono font which is great for spacing. My question is how can I get an input to behave in the same manner?
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- GOOGLE FONT CSS - Roboto Mono -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700&display=swap" rel="stylesheet">
<!-- GOOGLE FONT CSS - Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- FORM-ROW -->
<div class="form-row mb-2">
<!-- ROW > COLUMN -->
<div class="col">
<!-- <label for="dropDown1" class="small my-0">DROPDOWN 1</label> -->
<!-- DROPDOWN -->
<div class="dropdown">
<!-- BUTTON -->
<button class="btn btn-outline-dark btn-block rounded-0" type="button" id="dropDown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-flex justify-content-start align-items-center">
<i class="material-icons md-24 mr-2">double_arrow</i>
<span class="mr-auto" id="dropDownClockProjectText">DROPDOWN 1</span>
<i class="material-icons md-24">expand_more</i>
</div>
</button>
<!-- DROPDOWN > MENU -->
<div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable w-100 rounded-0" aria-labelledby="dropDown1">
<!-- MENU - HEADER -->
<!-- <h6 class="dropdown-header">Dropdown header</h6> -->
<!-- <div class="dropdown-divider"></div> -->
<!-- MENU - LINK -->
<a class="dropdown-item" data-item-id="1" href="#">ITEM 1</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item" data-item-id="2" href="#">ITEM 2</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item" data-item-id="3" href="#">ITEM 3</a>
<div class="dropdown-divider"></div>
</div>
</div>
</div>
</div>
If I convert the button to an input of type text, the goal would be to type into it and display the filtered list of results. Kind like a google but the data being filtered is already downloaded by the time the user types to filter.
Alright. So, after a little more paying around I have come up with this solution. It would be nice to know how to get rid of the dropdown-dividers that had their respective links hidden during filtering.
// List Filter
$(document).ready(function() {
// On KeyUp...
$("#inputText9").on("keyup", function() {
// No results have been found yet
let result_found = false;
// All values typed in to lower case...
var search_string = $(this).val().toLowerCase();
$("#dropDown9 a").filter(function() {
// Hide if it does not match
$(this).toggle($(this).text().toLowerCase().indexOf(search_string) > -1);
if ($(this).text().toLowerCase().indexOf(search_string) > -1) {
// Results found
//$("#no_search_results").hide();
result_found = true;
}
// No results found
if (!result_found) {
//$("#no_search_results").show();
}
});
});
});
.material-icons.md-24 { font-size: 24px; }
.dropdown-menu-scrollable {
height: auto;
max-height: 244px; /* 5 items */
overflow-x: hidden;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- GOOGLE FONT CSS - Roboto Mono -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700&display=swap" rel="stylesheet">
<!-- GOOGLE FONT CSS - Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="form-row mb-2">
<!-- ROW > COLUMN -->
<div class="col">
<!-- <label for="dropDown1" class="small my-0">DROPDOWN 1</label> -->
<!-- DROPDOWN -->
<div class="dropdown">
<!-- DROPDOWN > TOGGLER -->
<!-- <a class="btn btn-secondary btn-block dropdown-toggle rounded-0" href="#" role="button" id="dropDown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown 1
</a> -->
<button class="btn btn-dark btn-block rounded-0" type="button" id="dropDown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="d-flex justify-content-start align-items-center">
<i class="material-icons md-24 mr-2">done</i>
<span class="mr-auto" id="dropDownClockProjectText">DROPDOWN FILTER</span>
<i class="material-icons md-24">expand_more</i>
</div>
</button>
<!-- DROPDOWN > MENU -->
<div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable w-100 rounded-0" aria-labelledby="dropDown1" id="dropDown9">
<!-- MENU - HEADER -->
<!-- <h6 class="dropdown-header">Dropdown header</h6> -->
<!-- <div class="dropdown-divider"></div> -->
<!-- INPUT TEXT -->
<div class="col mb-2">
<!-- <label for="inputText1">inputText1</label> -->
<input type="text" class="form-control rounded-0" id="inputText9" aria-describedby="inputText1Desc" placeholder="Filter dropdown-items..">
</div>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item searchable" data-item-id="1" href="./">dropdown-item 1</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item searchable" data-item-id="2" href="./">dropdown-item 2</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item searchable" data-item-id="3" href="./">dropdown-item 3</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item searchable" data-item-id="4" href="./">dropdown-item 4</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item searchable" data-item-id="5" href="./">dropdown-item 5</a>
<div class="dropdown-divider"></div>
<!-- MENU - LINK -->
<a class="dropdown-item searchable" data-item-id="6" href="./">dropdown-item 6</a>
<div class="dropdown-divider"></div>
</div>
</div>
</div>
</div>
Search by number for highest specificity.
This should help you:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Dropdown Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<select class="custom-select">
<option selected><i class="fa fa-angle-double-right"></i>Dropdown 1</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
This is my best example. I don't think you can add a custom font because Bootstrap has its own font installed. I don't think you can add icons either, because I tried to in the example.
how can I make the dropdown menu to expand upwards instead of downwards?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<div class="container">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
COLOR
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">red</a>
<a class="dropdown-item" href="#">yellow</a>
</div>
</div>
</body>
</html>
I expect the dropdown menu to expand upwards instead of downwards but the actual output is, the dropdown menu shows downward.
if the button is the only thing on your page, and I suspect that from your code, the dropup wouldn't work... so check the code below and try removing the H1 and p tags...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<h1> This is demo text </h1>
<p>There needs to be some text... else it won't open up</p>
<div class="dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
COLOR
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">red</a>
<a class="dropdown-item" href="#">yellow</a>
</div>
</div>
</div>
Here is a bootstrap solution
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<br>
<br>
<br>
<div class="container">
<div class="btn-group dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
COLOR
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">red</a>
<a class="dropdown-item" href="#">yellow</a>
</div>
</div>
</div>
</body>
</html>