Align Button - Icon With Button In Html/css/bootstrap 3?

Question

I am using Bootstrap 3 in my project. Here is my html page: As you can notice, the star is not aligned in line with the view details button below. Here is my html code

Solution 1:

The problem is, that the span with the star icon is already an inline-block with different height and line-height. The button which surrounds the span is also an inline-block element, that's why it is a bit complicated.

Another fix would be, to remove the span inside the button and add the classes from the star-icon to the button like this:

<button class="glyphicon glyphicon-star-empty bookmark">

Now you have the same styling for both buttons and they align correctly when you add vertical-align: middle; to the star button.

http://jsfiddle.net/a29hC/

Solution 2:

There's a number of ways this can be achieved. I'd use one of the following:

Option 1 - relative position with top

button.bookmark {
  border:none;
  background: none;
  padding: 0;
  position: relative;
  top: 2px;

}

Demo

Option 2 - give the button a .btn class so it has same layout styles as the .btn next to it, then remove left and right padding

<button type="button"class="btn bookmark"id="1799" >

button.bookmark {
  border:none;
  background: none;
  padding-left: 0;
  padding-right: 0;
}

EDIT: Note that the gylphicon gets given a line-height of 1 by Bootstrap. With this technique we don't want that because we want it to match the .btn. So that can be overridden:

.btn.bookmark.glyphicon {
  line-height: inherit;
  vertical-align: middle;
}

Demo

Solution 3:

Try putting the two images in a div and using the vertical-align property.

Example:

<divclass="col-6 col-sm-6 col-lg-4"><h3>2000 Cadillac Eldorado Esc (Prospect heights) $3500 </h3><p><small>clean eldorado only 123000 miles fresh tune up needs nothing adult driven extremely reliable and well taken care of for ... </small></p><div><aclass="btn btn-default"href="/search/1799/detail/"role="button">View details &raquo;</a><buttontype="button"class="bookmark"id="1799"><spanclass="glyphicon glyphicon-star-empty"style="vertical-align: middle;"></span></button></div></div>

Solution 4:

why not just put the star inside the button and let Bootstrap align it for you? You can also add the btn class to the <a> tag to style it as a button. Less code :)

<aclass="btn btn-default"href="/search/1799/detail/"class="bookmark"id="1799">
    View details <spanclass="glyphicon glyphicon-star-empty"></span></a>

Edit: the reason I made this suggestion is a personal preference; I prefer to let Bootstrap do its thing and not add too much additional CSS positioning as it might get in the way when resizing the browser, etc.

Solution 5:

Bootstrap may have some special class for this... however it might rely on a set of circumstances. I think you'd be better off thinking of this as a CSS positioning question.

You want to align 2 elements to one another, vertically. elements which are display: inline or inline-block can align with vertical-align. You can read about that HERE.

In your case, you will want the two elements to be display: inline-block so that you can give them shape and position like a block element, and still have access to some of the properties an inline element would have. Once they are both display: inline-block you can align them with vertical-align: middle;. 2 things to keep in mind are that you don't want them floated, and that when we say they are aligned, it is to each other and not to the box they reside in.

HTML

<ahref="http://sheriffderek.com"class="button">View Details >></a><buttonclass="star">★</button>

CSS

a { /* reset a */text-decoration: none;
    color: inherit;
}

.button {
    display: inline-block;
    padding: .5em;
    border: 1px solid black;
    border-radius: 5px;
    vertical-align: middle;
}

.star {
    background: transparent;
    border: 0;
    display: inline-block;
    vertical-align: middle;
}

Here is a jsFiddle

Html5 Academy