Why isn't my Bootstrap 5 dropdown menu working? - html

Recently, I have started web developing and I am using bootstrap v5.0 to build a website. Following is the code of a file named "grage.php", and its code is stated below,
<!-- HERE SHOULD BE THE CODE OF GARAGE -->
<div class="container-fluid">
<div class="row">
<!-- CODE FOR OPTIONS-->
<div class="col-3" style="align-items: center;">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
<!-- CODE FOR DISPLAYING MODEL -->
<div class="col-7">
<div style="align-items: center;">
<model-viewer src="car_models/compressed_civic.glb" alt="A 3D model of an astronaut" ar ar-modes="webxr scene-viewer quick-look" environment-image="neutral" auto-rotate camera-controls>
</model-viewer>
</div>
</div>
<!-- CODE FOR DISPLAYING CHOOSED OPTION'S AND ETC-->
<div class="col-2">
<p>Here should be the code for option's</p>
</div>
</div>
</div>
<!-- ADDING FOOTER -->
<?php
include "headerAndFooter/footer.php";
?>
<script type="module" src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/#google/model-viewer/dist/model-viewer-legacy.js"></script> -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
I am having problem as the dropdown function is not working as shown below, Dropdown Image
Note: I have added the bootstrap css CDN link in the header.
Please let me know, how to resolve this problem.

I am using bootstrap v5.0
But you've loaded bootstrap 4. That's why it's not working. Bootstrap 4 uses data-toggle="dropdown" and bootstrap 5 uses data-bs-toggle="dropdown". You need to load the right JavaScript/CSS for it to work.
Bootstrap 4 Example:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
Bootstrap 5 Example:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

You need to make sure you're using the Bootstrap 5 CDN that includes Popper:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"crossorigin="anonymous"></script>
From the bootstrap 5 installation guide: https://getbootstrap.com/

Also is important don´t include more than one script like
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
Because not working. Only needs ones like says Nick

I used bootstrap 5 drop-down toggler with reference to 1st comment with snippet.
I faced problem during to close menu after onclick why is this so and it is working perfectly in your case

Related

My dropdown button in bootstrap doesn't work

I've tried all youtube videos, followed all the documentation of bootstrap. Please help me. I can't understand why it's not even working :(
Here's the basic HTML bootstrap code.
!DOCTYPE HTML>
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="scan-landing.component.css">
<link href="https://fonts.googleapis.com/css2?family=Jost:wght#500&display=swap"
rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-
alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div class="main">
<div class="scanner-shell" [hidden]="!hasDevices">
<select #selectedValue (change)="onDeviceSelectChange()">
<option [value]=" " [selected]="!currentDevice">No Device Selected</option>
<option *ngFor="let device of availableDevices" [value]="device.deviceId"
[selected]="currentDevice && device.deviceId === currentDevice.deviceId">{{device.label}}</option>
</select>
<zxing-scanner class="scanner-window" [(device)]="currentDevice" (scanSuccess)="onCodeResult($event)"
[formats]="formatsEnabled" (permissionResponse)="onHasPermission($event)"
(camerasFound)="onCamerasFound($event)"></zxing-scanner>
<!-- <section class="results" *ngIf="qrResultString">
<div>
<small>Result</small>
<strong>{{ qrResultString }}</strong>
</div>
<button (click)="clearResult()">×</button>
</section> -->
</div>
</div>
-->
It's so hard to troubleshoot since nothing shows in my console whenever I press it.
Your included bootstrap files were broken !
You should not split <link> or <script> into two lines.
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="scan-landing.component.css">
<link href="https://fonts.googleapis.com/css2?family=Jost:wght#500&display=swap"
rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div class="main">
<div class="scanner-shell" [hidden]="!hasDevices">
<select #selectedValue (change)="onDeviceSelectChange()">
<option [value]=" " [selected]="!currentDevice">No Device Selected</option>
<option *ngFor="let device of availableDevices" [value]="device.deviceId"
[selected]="currentDevice && device.deviceId === currentDevice.deviceId">{{device.label}}</option>
</select>
<zxing-scanner class="scanner-window" [(device)]="currentDevice" (scanSuccess)="onCodeResult($event)"
[formats]="formatsEnabled" (permissionResponse)="onHasPermission($event)"
(camerasFound)="onCamerasFound($event)"></zxing-scanner>
<!-- <section class="results" *ngIf="qrResultString">
<div>
<small>Result</small>
<strong>{{ qrResultString }}</strong>
</div>
<button (click)="clearResult()">×</button>
</section> -->
</div>
</div>

Right align single element

I want to right align a single element in a dropdown list with Bootstrap 5. Usually I use "justify-content-end" for it, but this does not do so.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
This is just the example from the bootstrap homepage. I tried "justify-content-end" at <li> and at <a> tag. For example, I only want "Another action" to be right aligned, the other two left aligned.
Each element with a class of dropdown-item is set to display: block (meaning it takes up the whole width of the parent element). If you want the text of "Another Action" to be right aligned, means you need to set a class of text-end on the <a> element

Want to align a dropdown to the right end using css grid

I am learning to use css grid. I want to align a responsive drop down to the right using css grid. I am aware that there would be many ways to get this simple requirement done, but I want to get it done using css grid. I have taken the dropdown code from bootstrap for quick work. Code is below. the dropdown is not aligned to the right extreme. Please help.
/*
#mydiv ul{
text-align:right;
}*/
/*#mydiv ul { list-style:none;}*/
#mydiv {
grid-column-start: 250;
grid-column-end:300;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class = "container" id="mydiv">
<ul>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle dropdown-menu-right" href="#" id="mydiv" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
You have an extra mydiv id on your dropdown link, you should remove it (removed in my example). Otherwise it may mess you up later.
Also, to have more control over where the dropdown appears, you can use columns in the grid and tell the rendering engine which column to place yur element in.
justify-self:end will tell the element to stick to the right edge of the column.
However, this makes the dropdown to be cropped onn the right edge, so you may need to play around with it.
More details on css columns
#mydiv {
display: grid;
justify-content: end;
grid-template-columns: 70% 30%
}
#mydiv ul {
grid-column-start: 2;
grid-column-end: 2;
justify-self: end;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class = "container" id="mydiv">
<ul>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle dropdown-menu-right" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
If you are going to use grid then you need to add that property.
Very basic example what may help you is this:
#mydiv {
display: grid;
justify-content: end;
//your old properties
grid-column-start: 250;
grid-column-end:300;
}
Anyway taking into account that for grid it is better to specify rows/cols.

Bootstrap 4 input drop-down-list. How?

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.

Bootstrap well and borders doesn't show

I've got a head tag with a bunch of css stuff and my body tag consists of a navbar and a simple header. However, around the header's row, I have a well but neither the well nor it's border shows. I need help fixing the well to display around the "Jesus is Lord" so it looks nice and clean. I also want the well to be at 0.8 opacity. Here is the page (live at theredstonetaco.com):
<html>
<head>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta -->
<meta charset="utf-8"/>
<meta content="initial-scale=1, width=device-width" name="viewport"/>
<!-- bootstrap css, jQuery, popper, bootstrap js-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" 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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<style>
well {
border: solid 5px green;
}
</style>
<!-- title -->
<title>Homepage</title>
<!--
background
and
navbar
-->
<!-- full-page cross image -->
<div style="position:absolute;z-index:-1;left:0;top:0;width:100%;height:100%;">
<img style="width:100%;height:100%;" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Christian_cross.svg" alt="full-page cross" />
</div>
<!-- outer navbar, dark, dark, fixed position -->
<nav class="navbar navbar-light bg-light navbar-fixed-top">
<!-- fluid container -->
<div class="container-fluid">
<!-- row for dropdowns -->
<div style="flex-grow:1;" class="row">
<!-- left dropdown (taccount) -->
<div style="flex-grow:1;"class="col col-xs-4">
<ul class="navbar navbar-nav">
<li class="nav-item dropdown">
<a class="navlink dropdown-toggle" href="#" id="navbarDropdownMenuLinkLeft" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
taccount
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLinkLeft">
<a class="dropdown-item" href="login.php">login</a>
<a class="dropdown-item" href="register.php">register</a>
<a class="dropdown-item" href="#">profile</a>
<a class="dropdown-item" href="#">settings</a>
</div>
</li>
</ul>
</div>
<!-- middle homepage button (tacopage) -->
<div style="flex-grow:1;" class="col col-xs-4">
<ul class="navbar navbar-nav">
<li>
tacopage
</li>
</ul>
</div>
<!-- right dropdown (tactions) -->
<div style="flex-grow:1;" class="col col-xs-4">
<ul class="navbar navbar-nav navbar-right">
<li class="nav-item dropdown">
<a class="navlink dropdown-toggle" href="#" id="navbarDropdownMenuLinkRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
tactions
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLinkRight">
<a class="dropdown-item" href="Christmas.php">Christmas</a>
<a class="dropdown-item" href="dad.php">dad</a>
<a class="dropdown-item" href="https://youtube.com/theredstonetaco">youtube</a>
<a class="dropdown-item" href="dating.php">dating</a>
<a class="dropdown-item" href="#">about</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- embed addons to layout -->
<div class="well">
<div class="row">
<div class="col"></div>
<div class="col text-center" style="opacity: 0.8; color: #000A8C;">
<h1>Jesus is Lord</h1>
</div>
<div class="col"></div>
</div>
</div>
A class selector requires a . in front of it.
So the correct style would be;
.well { border: 5px solid green; }
For completeness; here you can find all css selectors and how to use them.