Twitter Bootstrap Question posted in

Bootstrap Place Image Above Hyper Link-Twitter bootstrap

I am trying to place the image above the text content. I.E something like below

https://i.stack.imgur.com/5L4FG.png

.button-link {
  background: #DBBC26;
  border-radius: 4px;
  color: #ffffff;
  display: block;
  font-size: 14px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  width: 190px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0;
  letter-spacing: .2px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<a class="button-link" href="#">Download</a>
Tags:

2

Answers


  1. 0

    try this

     .button-link img{
 height: 20px;
 display: block;
 margin: auto;
}
 .button-link {
 background: #DBBC26;
 border-radius: 4px;
 color: #ffffff;
 display: block;
 font-size: 14px;
 height: 60px;
 text-align: center;
 width: 190px;
 font-weight: 600;
 text-transform: uppercase;
 padding: 0;
 letter-spacing: .2px;}
     <a class="button-link" href="#">
 <img src="https://i.stack.imgur.com/5L4FG.png"/>Download</a>
    Login or Signup to reply.
  2. 0

    So you have a link and an image, and you want to stack the image on top of the text in link.

    and you have defined your link <a class="button-link" href="#">Download</a> and an image <img src="#" alt="my image" /> The next thing you need to do is merge them 

    <a class="button-link" href="#">
    <img src="#" alt="my image" />
    Download
</a>

    would be better if you wrapped link content inside a div

    here’s an example: https://jsfiddle.net/fatgamer85/gzmzo4un/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search