Bootstrap class "text-right or text-end" not working on <a> element

Question

I am trying to use text-right or text-end classes for the anchor element at the end but somehow it's not working for me. I even tried to use style="text-align:right !important;"but it doesn't seem to give the necessary outcome.

  <div class="container my-5 text-center">
<h1 class="fw-light">My <span style="color:#39aea9;">Projects</span> </h1>
<div class="lead">
  I build products, just like this website
</div>
<div class="row my-5 pt-3">
  <div class="col-md-4 my-2">
    <div class="card h-100 shadow">
      <div class="card-body">
        <img class="card-img-top" src="sample1.jpg" alt="sample1">
        <h4 class="card-title">Project 1</h4>
        <p class="card-text">This is my first project about...</p>
        <a href="" class="stretched-link"></a>
      </div>
    </div>
  </div>
  <div class="col-md-4 my-2">
    <div class="card h-100 shadow">
      <div class="card-body">
        <img class="card-img-top " src="sample2.jpg" alt="sample2">
        <h4 class="card-title">Project 2</h4>
        <p class="card-text">This is my second project about...</p>
        <a href="" class="stretched-link"></a>
      </div>
    </div>

  </div>
  <div class="col-md-4 my-2">
    <div class="card h-100 shadow">
      <div class="card-body">
        <img class="card-img-top " src="sample3.jpg" alt="sample3">
        <h4 class="card-title">Project 3</h4>
        <p class="card-text">This is my third project about...</p>
        <a href="" class="stretched-link"></a>
      </div>
    </div>
  </div>

</div>

<a class="text-right text-dark text-decoration-none lead" href="">See my projects</a>

Answer 1

You forgot a closing div tag just try it like this it will fix your problem .

 <div class="container my-5 text-center">
<h1 class="fw-light">My <span style="color:#39aea9;">Projects</span> </h1>
<div class="lead">
  I build products, just like this website
</div>
<div class="row my-5 pt-3">
  <div class="col-md-4 my-2">
    <div class="card h-100 shadow">
      <div class="card-body">
        <img class="card-img-top" src="sample1.jpg" alt="sample1">
        <h4 class="card-title">Project 1</h4>
        <p class="card-text">This is my first project about...</p>
        <a href="" class="stretched-link"></a>
      </div>
    </div>
  </div>
  <div class="col-md-4 my-2">
    <div class="card h-100 shadow">
      <div class="card-body">
        <img class="card-img-top " src="sample2.jpg" alt="sample2">
        <h4 class="card-title">Project 2</h4>
        <p class="card-text">This is my second project about...</p>
        <a href="" class="stretched-link"></a>
      </div>
    </div>

  </div>
  <div class="col-md-4 my-2">
    <div class="card h-100 shadow">
      <div class="card-body">
        <img class="card-img-top " src="sample3.jpg" alt="sample3">
        <h4 class="card-title">Project 3</h4>
        <p class="card-text">This is my third project about...</p>
        <a href="" class="stretched-link"></a>
      </div>
    </div>
  </div>
  </div>

</div>

<a class="text-right text-dark text-decoration-none lead" href="">See my projects</a>

Answer 2

tag is inline element (display: inline). It means it does not force text to new line or element to stretch to parent element width.

As this is Bootstrap, use class "d-block" to change from display: inline; to display: block;