Question 301378 in Html Question posted in
Some basic documentation can be found here.

Html – How to make icon inline with text in button bootstrap 5

can anyone help

<div class="col-auto mt-lg-0 mt-2">
  <a href="#" style="--bs-btn-font-size: .95rem;" class="btn btn-outline-secondary">
     <i class="bi bi-download"></i>
     Download
  </a>
</div>

I have tried using d-flex align-items-center in tag a but still doesn’t work

result
icon button

Tags:

2

Answers


  1. 0

    wrap it on div with class ‘btn-group’

    <div class="btn-group">
    <button class="btn btn-outline-secondary" type="button" >
      <span>
        <i class="bi bi-download"></i>
        Download
      </span>
    </button>
  </div>
    Login or Signup to reply.
  2. 0

    You just have to give a span tag and add m-auto class to that span tag. Try below code:

    <div class="col-auto mt-lg-0 mt-2">
    <a href="#" style="--bs-btn-font-size: .95rem;" class="btn btn-outline-secondary d-flex align-items-center">
      <span class="m-auto">
        <i class="bi bi-download me-2"></i>
      Download
      </span>
    </a>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search