Put a link on the right of a card - bootstap

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>

score 0 · Answer 1 · answered Dec 08 '21 at 18:15

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.

Put a link on the right of a card - bootstap

1 Answers1