Home / Questions / 485455
Accepted
Jonas
Asked: 2022-09-21 14:45:27 +0800 CST 2022-09-21 14:45:27 +0800 CST

How to lower a text in a div using bootstrap

  • 772

how can i lower the change text so that it appears in the middle of the content using bootstrap

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
 <div class=" row justify-content-center mt-5">
      <div class="col-4">
        <img src="/Order Sumary/images/icon-music.svg" alt="">
        <span class="h6"> Annual Plan</span>
        <span class="text"><a href="">Change</a></span>
        <p>$59.99/year</p>
      </div>
      
    </div>

I don't know how I can do to lower the link (text) Change a little more I have tried everything with margin for example and nothing

html

1 Answers

  1. Best Answer

    I put a border to see it better, all you have to do is change the class of the margin (mt-5) from place

    UPDATE: I made some modifications to keep the grid as you have it.

    • First I put a col-12 so that it covers the whole screen
    • Then I removed the justify-content-centerone from where you had it and I created a new div of type flex to put the content and that's it

    .box {
  border: solid 1px red
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<div class="row box">
  <div class="col-12 my-5">
    <div class="justify-content-center d-flex">
      <div class='text-center'>
        <img src="/Order Sumary/images/icon-music.svg" alt="">
        <span class="h6"> Annual Plan</span>
        <span class="text d-block"><a href="">Change</a></span>
        <p>$59.99/year</p>
      </div>
    </div>
  </div>

</div>

    • 1