I am presently practising some stuff in expressJS and EJS rendering. I noticed that Bootstrap float-right class is not working on the navbar. I even tried d-flex but the result still remain the same. I don't if I am probably doing something wrong. Below is my code:
_header.ejs
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-success">
<a class="navbar-brand" href="/urls">TinyApp</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">
<div class="navbar-nav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="/urls">URLs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/urls/new">New URL</a>
</li>
</ul>
<li class="flaot-right">
<button class="btn btn-outline-danger me-2">
Logout
</button>
</li>
</div>
</div>
</nav>
</header>
This is the button I tried to float to the right
<li class="flaot-right">
<button class="btn btn-outline-danger me-2">
Logout
</button>
</li>
Nothing changes.
I think you should put float-right to the button and set the li tag class to standard (bootstrap 4) nav-item class. Additional we set float-right not flaot-right you have a typo ;-)
Second proposition to set button on the right side is set d-flex and flex-row-reverse to li class like this:
<li class="nav-item d-flex flex-row-reverse">
The code is commented in html code snippet below, You can simple switch if you like second proposition, but remember to remove float-right from button ;-) Good Luck!
<!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.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<title>Hello, float vs d-flex Bootstrap 4!</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-success">
<a class="navbar-brand" href="/urls">TinyApp</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">
<div class="navbar-nav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="/urls">URLs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/urls/new">New URL</a>
</li>
</ul>
<!-- <li class="nav-item d-flex flex-row-reverse"> -->
<li class="nav-item">
<button class="btn btn-outline-danger me-2 float-right">
Logout
</button>
</li>
</div>
</div>
</nav>
</header>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<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>
</body>
</html>
Related
I'm trying to make a collapse navigation bar but having trouble changing the value of the 'aria-expanded'
after reaching value "true" it does not change to "false" on the second click.
Tried doing it several times, read the docs and it still sucks.
So I decided to copy the code from the documentation and use it as is. The effect is the same - it doesn't work.
I don't know why :/
code from docs:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
the "script" is activating the navbar action.
for example :
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
The self contained working example is following:
<!DOCTYPE html >
<html dir="ltr" lang="en-IL">
<head>
<title>test navbar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
Firstly i tried to do margin:0, and padding:0 for body element. But it didn't work. I inspected it to see what's going on google developer tools. I saw my .container-fluid class which has some bootstrap properties by default, has padding in left, and right. So when i write in developer tools; .container-fluid{ padding:0} it works, it deletes that free space. But when I do it in my css file, it doesn't work. Since I didn't want to use !important keyword, cause I think It must have worked...So I need your help, what's my mistake? Thanks.
.container-fluid {
padding: 0;
}
.title-image {
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python Bootcamp Web Page</title>
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- CSS only -->
<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">
<!-- JavaScript Bundle with Popper -->
<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>
</head>
<body>
<section >
<div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
<nav class="navbar navbar-expand-lg navbar-light bg-info">
<a class="navbar-brand" href="#">
<i class="fab fa-python"> Python Bootcamp</i>
</a>
<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 ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Outcomes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
<h1>Download the best bootcamp, and start to study now.</h1>
<button type="button" class="btn btn-lg btn-danger"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-light"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="image.jpg" alt="classroom-image">
</div>
</div>
</section>
</body>
</html>
Just take the navbar out of the container...
<section>
<nav class="navbar navbar-expand-lg navbar-light bg-info">
<a class="navbar-brand" href="#">
<i class="fab fa-python"> Python Bootcamp</i>
</a>
<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 ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Outcomes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
<!-- Title -->
<div class="row g-0">
<div class="col-lg-6">
<!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
<h1>Download the best bootcamp, and start to study now.</h1>
<button type="button" class="btn btn-lg btn-danger"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-light"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="image.jpg" alt="classroom-image">
</div>
</div>
</div>
</section>
Demo
If you also want to remove left/right space from the content area, use p-0 on the container, and g-0 (no-gutters) on the row (otherwise you'll get undesired horizontal scrolling).
Also see: Make a bootstrap 4 container-fluid go full bleed to edge of browser window
In this case, it might be best to just use !important. Or, if you really don't want to, you can make the selector more specific (and thus more "important" that the bootstrap one) by prepending body to it. For example:
body .container-fluid {
padding: 0;
}
.title-image {
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python Bootcamp Web Page</title>
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- CSS only -->
<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">
<!-- JavaScript Bundle with Popper -->
<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>
</head>
<body>
<section >
<div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
<nav class="navbar navbar-expand-lg navbar-light bg-info">
<a class="navbar-brand" href="#">
<i class="fab fa-python"> Python Bootcamp</i>
</a>
<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 ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Outcomes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row g-0">
<div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
<h1>Download the best bootcamp, and start to study now.</h1>
<button type="button" class="btn btn-lg btn-danger"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-light"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="image.jpg" alt="classroom-image">
</div>
</div>
</section>
</body>
</html>
Note that to prevent horizontal scrolling, I also had to add a .g-0 class to the .row element.
I have the problem that in bootstrap if I put an image into an <a class="navbar-brand"> it messes everything up.
<!-- Nav -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#">
<img src="img/bee-1000sqr.png" class="bnav-bee" style="padding-right: -100px;" />
Bienenkamera
</a>
<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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<form action="http://www.lugy-online.de/" method="get">
<button class="btn btn-primary my-2 my-sm-0" type="submit">Zurück zum LuGy</button>
</form>
</div>
</nav>
<!-- /Nav -->
The inside the <a class="navbar-brand"> causes the problem that the navbar-brand <a>-Tag is way to wide and my buttons are far too right and if I size the browser windows down the navbar-toggler is below the navbar-brand.
Can you help me?
.bnav-bee {
max-width: 4%;
margin-top: -10px;
}
I already tried to fix it with width-style(css) in the <a>-Tag and I tried to mess with the padding or margin. Neither of these worked.
Specify the width and the height of your image like in the example below.
And for spacing use the native Bootstrap padding and margin classes such as px-* or pl-* or mx-* etc.
Here's the code snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Nav -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#">
<img src="https://placehold.it/60" width="30" height="30" class="bnav-bee">
Bienenkamera
</a>
<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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<form action="http://www.lugy-online.de/" method="get">
<button class="btn btn-primary my-2 my-sm-0" type="submit">Zurück zum LuGy</button>
</form>
</div>
</nav>
<!-- /Nav -->
<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>
This question already has answers here:
Bootstrap 4 navbar not collapsing on large screen
(4 answers)
Closed 4 years ago.
I'm new to Bootstrap. I installed Bootstrap 4 and took the Navbar code directly from Bootstrap 4 Navbar example code, but the code does not show the navigation - it only shows the menu icon. Could someone tell me what I'm doing wrong here please?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.css">
<link rel="stylesheet" type="text/css" href="js/bootstrap.js">
</head>
<body>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
</div>
</body>
</html>
The Bootstrap V4 Beta navbar is different to the Bootstrap V4 Alpha navbar.
Here's an example Bootstrap v4 Beta navbar taken from https://getbootstrap.com/docs/4.0/components/navbar/
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Not sure which version of bootstrap you are using. However you are missing Jquery CDN which will definitely break bootstrap.
Get rid of the Bootstrap JS at the start of your html doc and add this at the end. (jquery must be referenced before bootstrap JS.)
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
You are using the navbar of an old bootstrap version.
You need to get the template of bootstrap 4.
Follow the link:
https://getbootstrap.com/docs/4.0/components/navbar/
So apparently the alpha 6 version of bootstrap 4 has gone all flex, which has broken some of the stuff I was using in alpha 5. As per this fiddle , I'm trying to get the flex justification class to put the navigation bar content over on the right, like so:
<ul class="navbar-nav justify-content-end">
Inspecting the elemnt shows that is has the justify-content: flex-end !important; on it, so I would have expected it to work. Why doesn't it?
To right align the .navbar-nav on desktop devices you need to place the .justify-content-end class on its parent:
add .justify-content-end class to #navbarSupportedContent.
If you want to right align the mobile menu on the right side:
.text-right (instead of .justify-content-end) on your .navbar-nav and
.justify-content-end on your .form-inline.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#replaceThisWithYourOwnId" aria-controls="replaceThisWithYourOwnId" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">BrandName</a>
<div class="collapse navbar-collapse justify-content-end" id="replaceThisWithYourOwnId">
<ul class="navbar-nav text-right">
<li class="nav-item active">
<a class="nav-link ">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0 justify-content-end">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>