I am working on a project with bootstrap, and I am trying to figure out how to get a button that shows: -Text aligned to the left (it seems that there is a left-left sense here) - The icon is aligned right with the number (right right makes sense here)
This works fine, but the problem is that most of my buttons have names that are perfect for a two-line button. Everything looks great on one line, but as soon as the text gets too long or the button gets too short, it kicks the text to another line, and the top text looks in the center, not left. It looks good:
<div style="width:300px;margin:10px">
<button type="button" class="btn btn-primary btn-block" style="font-weight:bold;white-space:normal;">
<span class="pull-left">Under Investigation </span><span class="badge pull-right">5</span>
</button>
</div>
It looks bad (the button is too narrow, the text on the top does not pull to the left):
<div style="width:150px;margin:10px">
<button type="button" class="btn btn-primary btn-block" style="font-weight:bold;white-space:normal;display:inline-flex;">
<span class="pull-left">Under Investigation </span><span class="badge pull-right">5</span>
</button>
</div>
Fiddle: https://jsfiddle.net/rjerskine/ay9L512h/2/
:
div, . , . , , :
<div class="col-sm-2">
<button type="button" class="btn btn-primary btn-block" style="font-weight:bold;">
<div class="pull-left" style="text-align:left;width:calc(100% - 30px);white-space:normal;overflow:hidden;">
Under Investigation
</div>
<span class="badge pull-right" style="display:inline-flex;">5</span>
</button>
</div>