I would like to have the collapsible button alligned to the right of the navbar (Bootstrap v4). I've tried to wrap the button in:
<div class='nav navbar-nav navbar-right'>
And also added the float-xs-right class... without success.
I have created the following plunker:
On
maybe add position absolute or fixed and move it to right
.navbar .navbar-toggler{
position: absolute;
right: 0;
}
you also want to move collapsible content out of nav
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">My Brand</a>
<button class="navbar-toggler float-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">Expand</button>
</nav>
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse text-muted p-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
see updated plunker
On
simply fix with text-align:right
.navbar {
text-align:right;
}
try with this snippet
.navbar {
text-align:right;
}
#exCollapsingNavbar {
text-align:left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap-flex.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="bootstrap" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">My Brand</a>
<button class="navbar-toggler float-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">Expand</button>
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse text-muted p-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
</nav>
</body>
</html>
float-xs-rightwas introduced in Bootstrap Alpha 5, but the plunker CSS is referencing Bootstrap Alpha 4. It works fine with Alpha 5:http://www.codeply.com/go/Ina8YfuXaU