Put a link on the right of a card - bootstap - bootstrap-5

Question

I have a page (show route) that looks like this:
and i would like to position the link to "All Camgrounds" to the right of the card. I tried several things like adding classes like "text-right" or "justify-content-end", but it did not work.
I am using the framework Boostrap-5.
Any help would be much appreciated. Here is the code for the SHOW page :
<% layout('layouts/boilerplate') %>
<div class="row">
<div class="col-6 offset-3">
<div class="card">
<div class="card-header">
<h2>
<%= campground.title %>
</h2>
</div>
<img src="<%= campground.image %>" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">
<%= campground.description %>
</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item text-muted">
<%= campground.location %>
</li>
<li class="list-group-item">
$ <%= campground.price %> /night
</li>
</ul>
<div class="card-body">
<a class="card-link btn btn-warning" href="/campgrounds/<%= campground._id %>/edit">Edit</a>
<form class="d-inline" action="/campgrounds/<%= campground._id %>?_method=DELETE" method="post">
<button class="btn btn-danger">Delete</button>
</form>
<a class="card-link d-inline text-right" href="/campgrounds">All
campgrounds</a>
</div>
</div>
</div>
</div>

Answer 1

There are many different ways to align right in Bootstrap 5.
In your case it's probably easiest to use float-end.
<div class="row">
<div class="col-6 offset-3">
<div class="card">
<div class="card-header">
<h2> Title </h2>
</div>
<img src="//via.placeholder.com/500" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text"> campground.description </p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item text-muted"> campground.location </li>
<li class="list-group-item"> $ 39/night </li>
</ul>
<div class="card-body">
<a class="card-link btn btn-warning" href="/campgrounds/<%= campground._id %>/edit">Edit</a>
<form class="d-inline" action="/campgrounds/<%= campground._id %>?_method=DELETE" method="post">
<button class="btn btn-danger">Delete</button>
</form>
<a class="card-link float-end" href="/campgrounds">All campgrounds</a>
</div>
</div>
</div>
</div>
https://codeply.com/p/S9PyKHZC9y
Also note, left and right have been replaced with start and end in Bootstrap 5.