How do you align navigation to the right with bootstrap? [duplicate] - html

Question

This question already has answers here:
Bootstrap 5 navbar align items right
(13 answers)
How to align nav items to the right in Bootstrap 5?
(7 answers)
Closed 1 year ago.
We are trying to have our navigation items aligned to the right of our page. We have used a container class as well as align-items-end to no avail. We will admit that this section is pretty hacked together and we don't quite understand everything that's going on. What we're trying to accomplish is to have the top of our page have a cover cover image with our navigation to the right, included in the container, we want a heading and two buttons. We also need our navigation collapse at the small (mobile) breakpoint.
This is our design from Photoshop and what we want our end design to look like.
This is what our current code renders.
What are we doing wrong?
.cover {
min-height: 500px;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(img/moco-trucks.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
position: relative;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-dark:hover,
.navbar-dark:focus,
.navbar-dark:active {
color: rgba(199, 84, 40, 1)
}
.nav-item,
.nav-link {
color: #fff;
text-transform: uppercase;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #c75428;
}
.nav-pills .nav-link.active:hover,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #a64723;
}
.nav-link:hover,
.nav-link:focus,
.nav-link:active {
color: #c75428;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- container with bg img -->
<div class="cover">
<div class="container justify-content-end">
<!-- NAV Here -->
<nav class="navbar navbar-expand-sm navbar-dark" aria-label="responsive navbar">
<a class="navbar-brand" href="index.html"><img src="img/the-other-side-moving-storage-color-white.png" width="75%" height="75%"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link" href="denver-moving-services.html">Moving</a>
</li>
<li class="nav-item">
<a class="nav-link" href="denver-storage-company.html">Storage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
</li>
<li class="nav-item">
<button class="btn btn-tosa" type="submit">Free Estimate</button>
</li>
</ul>
</div>
</nav>
</div>
<!-- Nav end -->
<!-- FS Hero -->
<div class="container-xl mb-4">
<div class="row text-center">
<div class="col-12">
<h1 class="py-5">Denver Moving and Storage</h1>
<button type="button" class="btn btn-tosa mx-3">Free Estimate</button>
<button type="button" class="btn btn-outline-tosa mx-3">Our Story</button>
</div>
</div>
</div>
<!-- End FS Hero -->
</div>
<!-- End Cover -->

Answer 1

I've applied justify-content-end to the link wrapper.
See all flex utilities.
.cover {
min-height: 500px;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(img/moco-trucks.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
position: relative;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-dark:hover,
.navbar-dark:focus,
.navbar-dark:active {
color: rgba(199, 84, 40, 1)
}
.nav-item,
.nav-link {
color: #fff;
text-transform: uppercase;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #c75428;
}
.nav-pills .nav-link.active:hover,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #a64723;
}
.nav-link:hover,
.nav-link:focus,
.nav-link:active {
color: #c75428;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- container with bg img -->
<div class="cover">
<div class="container">
<!-- NAV Here -->
<nav class="navbar navbar-expand-sm navbar-dark d-flex" aria-label="responsive navbar">
<a class="navbar-brand" href="index.html"><img src="https://via.placeholder.com/60" width="75%" height="75%"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="responsive-navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link" href="denver-moving-services.html">Moving</a>
</li>
<li class="nav-item">
<a class="nav-link" href="denver-storage-company.html">Storage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
</li>
<li class="nav-item">
<button class="btn btn-tosa" type="submit">Free Estimate</button>
</li>
</ul>
</div>
</nav>
<!-- Nav end -->
</div>
<!-- FS Hero -->
<div class="container-xl mb-4">
<div class="row text-center">
<div class="col-12">
<h1 class="py-5">Denver Moving and Storage</h1>
<button type="button" class="btn btn-tosa mx-3">Free Estimate</button>
<button type="button" class="btn btn-outline-tosa mx-3">Our Story</button>
</div>
</div>
</div>
<!-- End FS Hero -->
</div>
<!-- End Cover -->

Answer 2

I added this code to your CSS:
#responsive-navbar .navbar-nav{
position: absolute !important;
right: 0;
}
to make the navbar position to the right.
.cover {
min-height: 500px;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(img/moco-trucks.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
position: relative;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-dark:hover, .navbar-dark:focus, .navbar-dark:active{
color: rgba(199, 84, 40, 1)
}
.nav-item, .nav-link {
color: #fff;
text-transform: uppercase;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
color: #fff;
background-color: #c75428;
}
.nav-pills .nav-link.active:hover, .nav-pills .show>.nav-link {
color: #fff;
background-color: #a64723;
}
.nav-link:hover, .nav-link:focus, .nav-link:active {
color: #c75428;
}
#responsive-navbar .navbar-nav{
position: absolute !important;
right: 0;
}
<!-- container with bg img -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="cover">
<div class="container justify-content-end">
<!-- NAV Here -->
<nav class="navbar navbar-expand-sm navbar-dark" aria-label="responsive navbar">
<a class="navbar-brand" href="index.html"><img src="img/the-other-side-moving-storage-color-white.png" width="75%" height="75%"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link" href="denver-moving-services.html">Moving</a>
</li>
<li class="nav-item">
<a class="nav-link" href="denver-storage-company.html">Storage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
</li>
<li class="nav-item">
<button class="btn btn-tosa" type="submit">Free Estimate</button>
</li>
</ul>
</div>
</nav>
</div>
<!-- Nav end -->
<!-- FS Hero -->
<div class="container-xl mb-4">
<div class="row text-center">
<div class="col-12">
<h1 class="py-5">Denver Moving and Storage</h1>
<button type="button" class="btn btn-tosa mx-3">Free Estimate</button>
<button type="button" class="btn btn-outline-tosa mx-3">Our Story</button>
</div>
</div>
</div>
<!-- End FS Hero -->
</div>
<!-- End Cover -->