Jaime Alvarez Jaime Alvarez - 4 months ago 25
CSS Question

Left alignment of text and icon in bootstrap button with custom image

I'm having trouble horizontal aligning in button working with bootstrap framework. I've tried so many things and I have read a lot but my solution is not working. Can someone help me? Thank you in advance.

The idea is to align to left the text of the button, The attached image is the output of the following html:

<div class="btn-group btn-group-justified">

<a href="#" class="btn btn-default" id="bCheckIn" value="action01">
<img src="http://localhost/daycare/assets/img/activities/CheckIn.png" width="35" height="35" align="left" />
<span class="hidden-xs hidden-sm">Check in</span>
</a>

<a href="#" class="btn btn-default" id="bactivities" value="action02">
<img src="http://localhost/daycare/assets/img/activities/Activities.png" width="35" height="35" align="left" />
<span class="hidden-xs hidden-sm">Activities</span>
</a>

<a href="#" class="btn btn-default" id="bBottle" value="action03">
<img src="http://localhost/daycare/assets/img/activities/Bottle.png" width="35" height="35" align="left" />
<span class="hidden-xs hidden-sm">Bottle</span>
</a>

<a href="#" class="btn btn-default" id="bComputer" value="action04">
<img src="http://localhost/daycare/assets/img/activities/ComputerTime.png" width="35" height="35" align="left" />
<span class="hidden-xs hidden-sm">Computer</span>
</a>

<a href="#" class="btn btn-default" id="bDiaper" value="action05">
<img src="http://localhost/daycare/assets/img/activities/Diaper.png" width="35" height="35" align="left" />
<span class="hidden-xs hidden-sm">Diaper</span>
</a>

</div>


How to align to left?

Answer

text-align: left css property can affect inline and inline-block elements and you can use it for left alignment.

Note: See Demo in Full Page mode.

.btn-group .btn-default {
  text-align: left;
}

.btn-group .btn-default span,
.btn-group .btn-default img {
  vertical-align: middle;
  display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-default" id="bCheckIn" value="action01">
        <img src="http://localhost/daycare/assets/img/activities/CheckIn.png" width="35" height="35"/>
        <span class="hidden-xs hidden-sm">Check in</span>
    </a>

    <a href="#" class="btn btn-default" id="bactivities" value="action02" >
        <img src="http://localhost/daycare/assets/img/activities/Activities.png" width="35" height="35"/>
       <span class="hidden-xs hidden-sm">Activities</span>
    </a>

    <a href="#" class="btn btn-default" id="bBottle" value="action03">
        <img src="http://localhost/daycare/assets/img/activities/Bottle.png" width="35" height="35"/>
        <span class="hidden-xs hidden-sm">Bottle</span>
    </a>

    <a href="#" class="btn btn-default" id="bComputer" value="action04">
        <img src="http://localhost/daycare/assets/img/activities/ComputerTime.png" width="35" height="35"/>
        <span class="hidden-xs hidden-sm">Computer</span>
    </a>

    <a href="#" class="btn btn-default" id="bDiaper" value="action05">
        <img src="http://localhost/daycare/assets/img/activities/Diaper.png" width="35" height="35"/>
        <span class="hidden-xs hidden-sm">Diaper</span>
    </a>
</div>