Dropdown with data toggle keeps two options selected - html

I have a dropdown menu with contains a data toggle for tabs. I have the problem that once I selected an item, the item stays selected and stays blue.
Any ways to fix this?
Code:
<ul class='nav nav-tabs'>
<li class='nav-item'>
<a class='nav-link active' data-toggle='tab' href='#overall'>Overall</a>
</li>
<li class='nav-item'>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Classes
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
<button class="dropdown-item" data-toggle='tab' href="#spider" type="button"aria-selected="false">Spider</button>
<button class="dropdown-item" data-toggle='tab' href="#enderman" type="button"aria-selected="false">Enderman</button>
</div>
</div>
</li>
</ul>
<div class='tab-content'>
<div class='tab-pane container active' id='overall'>
blabla
</div>
<div class='tab-pane container' id='zombie'>
zombie
</div>
<div class='tab-pane container' id='spider'>
Spider
</div>
<div class='tab-pane container' id='enderman'>
Enderman
</div></div>


Make a id="dropdown-menu" next to class="dropdown-menu". This would be more convenient. reference line -20.
Make a Javascript that will add .active class in your clicked area/HTML. For example if you click on
<button class="dropdown-item" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
that will add .active class in there
<button class="dropdown-item class" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
And it will remove .active class from the previous position. This .active class is a Bootstrap class. It will render CSS style from Bootstrap.
Code below-
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/>
<title>HTML5, CSS3 and JavaScript demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<ul class='nav nav-tabs'>
<li class='nav-item'>
<a class='nav-link active' data-toggle='tab' href='#overall'>Overall</a>
</li>
<li class='nav-item'>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Classes
</button>
<div id="dropdown-menu" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
<button class="dropdown-item" data-toggle='tab' href="#spider" type="button"aria-selected="false">Spider</button>
<button class="dropdown-item" data-toggle='tab' href="#enderman" type="button"aria-selected="false">Enderman</button>
</div>
</div>
</li>
</ul>
<div class='tab-content'>
<div class='tab-pane container active' id='overall'>
blabla
</div>
<div class='tab-pane container' id='zombie'>
zombie
</div>
<div class='tab-pane container' id='spider'>
Spider
</div>
<div class='tab-pane container' id='enderman'>
Enderman
</div></div>
<script>
var header = document.getElementById("dropdown-menu");
var btns = header.getElementsByClassName("dropdown-item");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
document.getElementById("overall").innerHTML = this.innerText;
});
}
</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.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

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>

Change the name of the dropdown menu by selected link name

First of all, I will paste my whole html code here:
{% extends "base.html" %}
{% block content %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Postgresqlabfragen -->
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<ul>
<li> <strong>Verfügbare Abfragen:</strong> </li>
</ul>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{{url_for('server.epex')}}">
EPEX
</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{{url_for('server.post')}}">
Show Partner
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">EPEX Strompreise</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
</div>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Aktueller Stand
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" onclick="loadNewGraph(1)">Aktueller Stand</a></li>
<li><a class="dropdown-item" onclick="loadNewGraph(1)">Letzte Woche</a></li>
<li><a class="dropdown-item" onclick="loadNewGraph(2)">Maximum</a></li>
</ul>
</div>
</div>
</div>
<img id="graph" src="" width="900" height="600" >
<!-- <script src="{{ url_for('static', filename='EPEX_dashboard.js') }}"></script>-->
<script>
function loadNewGraph(id){
let req_url = '/postgresql/epex/get_graph/'
//if (window.location.href.includes("partner")){
// req_url = '/postgresql/partner/get_graph/'
//}
// ajax call to url get_graph, cf.: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
const xhttp = new XMLHttpRequest();
xhttp.open("GET", req_url + id, true);
xhttp.send();
xhttp.onload = function(e){
imgurl = document.getElementById('graph')
imgurl.src = '/static/Bilder/new_plot.png' + "?ts=" + Date.now()
}
}
loadNewGraph(0)
</script>
</body>
{% endblock %}
My problem is that I want to change the button name "Aktueller Stand" with the selected one.
In this case I have 3 possible selections:
'Aktueller Stand
Letzte Woche
Maximum'
But clicking on them still leaves in the window "Aktueller Stand". I didnt find a satysfying solution on the internet. Can you help me out guys?
Here is a photo of my linked Bootstrap Dropdownmenu:
https://ibb.co/gbKk53Z "dropdown menu"

Add an id to your button to use it in js. I said lnkButton, you can name anything.
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="lnkButton">
Add a text input to your function as the click options text :
function loadNewGraph(id, text){
...
Use this input to change the button text at the very bottom of your function
...
document.getElementById("lnkButton").innerText = text;
}
Add text input values into your link as their button text :
<li><a class="dropdown-item" onclick="loadNewGraph(0, 'Aktueller Stand')">Aktueller Stand</a></li>
<li><a class="dropdown-item" onclick="loadNewGraph(1, 'Letzte Woche')">Letzte Woche</a></li>
<li><a class="dropdown-item" onclick="loadNewGraph(2, 'Maximum')">Maximum</a></li>
Finally add the first button text as the initial value when you call your function:
loadNewGraph(0, 'Aktueller Stand');

You can pass the content of the clicked option as second parameter like this
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Aktueller Stand
</button>
<ul class="dropdown-menu">
<li>
<!-- The keyword this refer to the a tag -->
<a class="dropdown-item" onclick="loadNewGraph(this, 0)">Aktueller Stand</a>
</li>
<li>
<a class="dropdown-item" onclick="loadNewGraph(this, 1)">Letzte Woche</a>
</li>
<li>
<a class="dropdown-item" onclick="loadNewGraph(this, 2)">Maximum</a>
</li>
</ul>
</div>
<img id="graph" src="" width="900" height="600" />
<script>
// Your dropdown button you can give an id for more specificity
let dropdownBtn = document.querySelector(".dropdown button");
function loadNewGraph(el, id) {
// Update label depending on what you click
dropdownBtn.innerText = el.innerText;
//.....
}
// Default option
loadNewGraph(dropdownBtn, 0);
</script>

Thank you Batu.Khan and the rest of community :-).
I post here my solution leaned on the answer of Batu.kha, which is now working wonderful.
{% extends "base.html" %}
{% block content %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Postgresqlabfragen -->
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<ul>
<li> <strong>Verfügbare Abfragen:</strong> </li>
</ul>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{{url_for('server.epex')}}">
EPEX
</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{{url_for('server.post')}}">
Show Partner
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">EPEX Strompreise</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
</div>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="lnkButton">
Aktueller Stand
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" onclick="loadNewGraph(0,'Aktueller Stand')">Aktueller Stand</a></li>
<li><a class="dropdown-item" onclick="loadNewGraph(1, 'Letzte Woche')">Letzte Woche</a></li>
<li><a class="dropdown-item" onclick="loadNewGraph(2, 'Maximum')">Maximum</a></li>
</ul>
</div>
</div>
</div>
<img id="graph" src="" width="900" height="600" >
<!-- <script src="{{ url_for('static', filename='EPEX_dashboard.js') }}"></script>-->
<script>
function loadNewGraph(id,text){
let req_url = '/postgresql/epex/get_graph/'
//if (window.location.href.includes("partner")){
// req_url = '/postgresql/partner/get_graph/'
//}
// ajax call to url get_graph, cf.: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
const xhttp = new XMLHttpRequest();
xhttp.open("GET", req_url + id, true);
xhttp.send();
xhttp.onload = function(e){
imgurl = document.getElementById('graph')
imgurl.src = '/static/Bilder/new_plot.png' + "?ts=" + Date.now()
}
document.getElementById("lnkButton").innerText = text;
}
loadNewGraph(0, 'Aktueller Stand')
</script>
</body>
{% endblock %}

Why isn't my Bootstrap 5 dropdown menu working?

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

boostrap dropdown menu align

I am new to bootstrap and created a website with that but my dropdown menu didn't work right it open "out of the window" so anyone can help me with that? I've tried a lot with classes but it didn't work...
https://i.imgur.com/DbjKm3U.png
my code:
<div class='dropdown'>
<button class='btn' type='button' id='dropdownMenuButton' data-toggle='dropdown'>
<img class='rounded-circle float-right' height='45px' src='$profileimgurl' />
</button>
<ul class='dropdown-menu pull-left' role='menu'>
<li class='dropdown-header'>$username</li>
<li class='dropdown-header'><a href='profile.php'class=''>Profile</a></li>
<li class='dropdown-header'><a class=''>Friends</a></li>
<li class='dropdown-header'><a class=''>Activity</a></li>
<li class='divider'></li>
<li class='dropdown-header'>Account</li>
<li>
<form action='includes/logout.inc.php' method='post'>
<button class='btn btn-link' type='submit' name='logout-submit'>Logout</button>
</form>
</li>
</ul>
</div>

The default behavior of Bootstrap's Dropdown Component is to align to the bottom left margin of whatever object triggered it. To override this behavior you apply dropdown-menu-right to the dropdown-menu. To use your own code as an example:
<ul class='dropdown-menu dropdown-menu-right' role='menu'>
<li class='dropdown-header'>$username</li>
<li class='dropdown-header'><a href='profile.php'class=''>Profile</a></li>
<li class='dropdown-header'><a class=''>Friends</a></li>
<li class='dropdown-header'><a class=''>Activity</a></li>
<li class='divider'></li>
<li class='dropdown-header'>Account</li>
<li>
<form action='includes/logout.inc.php' method='post'>
<button class='btn btn-link' type='submit' name='logout-submit'>Logout</button>
</form>
</li>
</ul>
It is unclear whether you are using Bootstrap 3.x or Bootstrap 4.x, but in the latter you can also apply responsive behavior to this class (ie. .dropdown-menu-lg-right to better modify your UI on different devices or screens.

This Technique only work on Bootstrap 4
This is not problem bro, its default behavior of dropdowns but for solving this situation you need to use dropdown-menu-right class, for more info go to this link.
<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="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>

How to move Bootstrap pagination in-line with buttons

See the image above - I have Bootstrap dropdowns on the left, and buttons on the right. They're nicely aligned, but I'd like to move the pagination up so it's in between them to make better use of the space. Now currently the pagination code is further down, but if I move it between the dropdowns and buttons, it causes what you see in the second image. How can I have everything aligned?
Bootiply here: http://www.bootply.com/5Ufnpj317Z
EDIT:

please find attached images and do changes as per red area.

I've rearranged a fair bit of your code, summarised as follows:
introduced bootstrap container and rows
removed panel-body class
removed pull-right class from the buttons on the right
added test.css for some custom adjustments
fixed indenting
It looks ok an a wide screen, but elements will stack on top of each other on smaller screens.
/*test.css*/
#dropdownMenu1-div{
display:inline;
}
#dropdownMenu2-div{
display:inline;
}
.pagination{
margin:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="test.css">
</head>
<body>
<h2 class="text-center">Browse</h2>
<hr class="no-bottom-pad">
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="dropdown inline-control" id="dropdownMenu1-div"">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Location:
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>all</li>
<li class="divider"></li>
<li>London Waterloo</li>
<li>London Waterloo 3F workshop</li>
<li>London Waterloo comms room</li>
</ul>
</div>
<div class="dropdown inline-control" id="dropdownMenu2-div">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Type:
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>all</li>
<li class="divider"></li>
<li>Laptop</li><li>Chromebook</li>
<li class="divider"></li>
<li>HP</li>
<li>Lenovo</li>
<li>Toshiba</li>
<li class="divider"></li>
<li>HP Brilliance 5000</li>
<li>Lenovo B50-70</li>
<li>Toshiba Portege R930</li>
</ul>
</div>
</div>
<div class="col-xs-2" id="page-numbers">
<!-- <p class="no-bottom-pad">136 laptops</p> -->
<ul class="pagination">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="col-xs-7">
<a href="#" id="add-laptop-btn" class="btn btn-default" onclick="laptop_modal('new')">
Add Laptop
</a>
<input id="add-multiple-input" class="btn btn-default less-right-pad" type="number" min="0" max="50">
<a href="#" id="add-multiple-btn" class="btn btn-default less-right-pad disabled" onclick="addMultiple();">
Add Multiple ->
</a>
<input id="earmark-multiple-input" class="btn btn-default less-right-pad" type="number" min="0" max="50">
<a href="#" id="earmark-multiple-btn" class="btn btn-default less-right-pad disabled" onclick="addMultiple();">
Earmark Multiple ->
</a>
</div>
</div>
</div>
</body>
</html>