I am trying to fix the toggle button but it is not working I can't tell if this is from me changing a few attributes on my own css file I have look everywhere but can't find an answer
<!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">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="room.css">
<title>Museum of Candy</title>
</head>
<body>
<nav class="navbar bg-dark"
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="navbar-brand mb-0 h1" class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="navbar-brand mb-0 h1" class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
body {
background-color: pink
}
.navbar.bg-dark{
opacity: 0.75;
}
.navbar-brand.mb-0.h1{
color: white;
}
This is my html and CSS files I think the problem might be me changing the opacity of a CSS file but I am uncertain
Try to add navbar-dark class to nav element
...
</head>
<body>
<nav class="navbar bg-dark navbar-dark" >
...
Related
I am trying to put a connect button on the top right corner of the screen on mobile and desktop before the hamburger menu. However all solutions I tried break the menu.
putting the connect button and hamburger button after menu break the toggle on mobile
putting the connect button after the collapsible menu work on desktop but break the layout on mobile
Is there a clean way to do this without resorting to using two button?
<nav class="navbar navbar-expand-md navbar-light bg-light px-3">
Name on Chain
<button type="button" class="btn btn-primary ms-auto me-2" id="connectWallet">Connect Wallet</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
Guide
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</nav>
Try this code this will help you.
Wrap you toggle button and Connect button in a inline-form just like done in code give below or use flexbox.
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light px-3">
Name on Chain
<form class="form-inline">
<button class="btn btn-primary my-2 my-sm-0" type="submit">Connect Wallet </button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</form>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<ul class="navbar-nav">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
Guide
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- 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>
</body>
</html>
Let me know this will help you.
Hello Curio I think you can use JavaScript HTML DOM to change the style of an html element within defined condition.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.5.1.js"></script>
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.min.css">
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light px-3">
<div id="custom">
Name on Chain
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
style="float:right;">
<span class="navbar-toggler-icon"></span>
</button>
<button type="button" class="btn btn-primary ms-auto me-0" id="connectWallet" style="float:right;">Connect
Wallet</button>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
Guide
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</nav>
</body>
<style>
.topright {
position: fixed;
width: 135px;
top: 10px;
}
.custom {
width: 100%
}
</style>
<script>
if (window.innerWidth > 850) {
$('#connectWallet').addClass('topright');
document.getElementById('connectWallet').style.left = "85%";
} else if (window.innerWidth > 766) {
$('#connectWallet').addClass('topright');
document.getElementById('connectWallet').style.left = "80%";
} else {
$('#connectWallet').removeClass('topright');
$('#custom').addClass('custom');
document.getElementById('connectWallet').style.left = "0";
}
</script>
</html>
I hope this will help solve your problem.
I'm trying to change the color of the navbar using a custom color with css but so far no luck, I even went through various searches but those do not work as well. I've used navbar, navbar-custom, and other names to try and modify the color in css but none work.
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Blog</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-custom navbar-expand-lg">
<a class="navbar-brand" href="#">Blog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#footer">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</section>
</body>
</html>
CSS:
.navbar-custom{
background-color: red;
}
I've forgotten to put it styles.css in the css folder.
This question already has answers here:
Change navbar color in Twitter Bootstrap
(12 answers)
Bootstrap change navbar color
(8 answers)
Closed 4 years ago.
I want to change the background color of the bootstrap navigation bar.
This is how it looks at the moment.
The html code that i used.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complete Bootstrap 4 Website Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.html"><img src="img/logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<!--'ml-auto' puts the navigation buttons to the right hand side when it is on a medium screen-->
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="index.html">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link disabled" href="#">Team</a>
<a class="nav-item nav-link disabled" href="#">Connect</a>
</div>
</div>
</nav>
Remove the bg-light class and set any color you want to your navbar class. Note that the bg-light has !important in the value which means it will override properties that are not important. you can use inline style with ~important, it can do the trick as well but not a good practice.
.navbar{
background-color: #bada55 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complete Bootstrap 4 Website Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html"><img src="img/logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<!--'ml-auto' puts the navigation buttons to the right hand side when it is on a medium screen-->
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="index.html">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link disabled" href="#">Team</a>
<a class="nav-item nav-link disabled" href="#">Connect</a>
</div>
</div>
</nav>
you change the bg-light bg-light2 and write you want color.
.bg-light2{background-color:red }a.bg-light2:focus,a.bg-light2:hover,button.bg-light2:focus,button.bg-light2:hover{background-color:#dae0e5}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complete Bootstrap 4 Website Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light2">
<a class="navbar-brand" href="index.html"><img src="img/logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<!--'ml-auto' puts the navigation buttons to the right hand side when it is on a medium screen-->
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="index.html">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link disabled" href="#">Team</a>
<a class="nav-item nav-link disabled" href="#">Connect</a>
</div>
</div>
</nav>
Your navbar background color is under !important rule:
.bg-light {
background-color: #f8f9fa!important;
}
You can try overwriting that value with another !important css rule, but with longer css path. This way your !important rule will have priority over first !important rule.
Something like:
.navbar.bg-light {
background-color: {your-desired-color} !important;
}
P.S. I wouldn't say it's a bad practice, but using !important rule should be avoided if you are not sure why you are using it. So, if you can edit your HTML, just remove bg-light class from <nav> element, and you will be able to change color for it without !important.
I am working on teaching myself web development, and I thought what a better way than to start my own personal web page.
I have run into an issue working with Bootstrap 4 and the navbar.
I can get the list, and the icon to show up when the window shrinks, but I can't get it to expand, or toggle collapse. I've even copied and pasted some code from the bootstrap documentation to see what I'm doing wrong and even then it doesn't work.
I've tried on both firefox and chrome, and on both, I am still unable to toggle the collapse with the icon button.
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Heath's Personal Website">
<meta name="keywords" content="heath, blandford, heath blandford">
<meta name="author" content="heath blandford">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--import bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- import google fonts lobster and open sans -->
<link href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans" rel="stylesheet">
</head>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">navbar</a>
<!-- Navbar brand yo -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTop" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTop">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#about">About</a> </li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Services</a> </li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a> </li>
<li class="nav-item"><a class="nav-link" href="#social">Social Media</a> </li>
</ul>
</div>
</nav>
<body>
</body>
</html>
Although you've imported the Bootstrap CSS, you've neglected to import the required JavaScript.
Importing Bootstrap's JavaScript and the required dependencies (jQuery and Popper.JS) will cause your navigation to toggle correctly.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
This can be seen in the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Heath's Personal Website">
<meta name="keywords" content="heath, blandford, heath blandford">
<meta name="author" content="heath blandford">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--import bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- import google fonts lobster and open sans -->
<link href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans" rel="stylesheet">
</head>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">navbar</a>
<!-- Navbar brand yo -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTop" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTop">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#about">About</a> </li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Services</a> </li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a> </li>
<li class="nav-item"><a class="nav-link" href="#social">Social Media</a> </li>
</ul>
</div>
</nav>
<body>
</body>
</html>
I created a Navbar with Bootstrap 4. The "Logout" button on the left side in the Navbar appears much to wide, when the navbar is collapsed.
How can I fix the big "Logout" button if the navbar is collapsed??
<!doctype html>
<html lang="de">
<head>
<title>Hello World</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="navbar-brand">
<strong>Navbar</strong>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test2</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link btn btn-outline-dark" href="x">Logout<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<!-- 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.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>
</body>
</html>
Thank you!
put the logout button in a form.form-inline like in the official docs, and the button is no longer stretched.
<!doctype html>
<html lang="de">
<head>
<title>Hello World</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="navbar-brand">
<strong>Navbar</strong>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test2</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<form class="form-inline">
<a class="btn btn-outline-dark" href="x">Logout<span class="sr-only">(current)</span></a>
</form>
</li>
</ul>
</div>
</nav>
<!-- 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.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>
</body>
</html>