X'Byte X'Byte - 7 months ago 11
HTML Question

Formatting HTML buttons

I have three likert scales similar to:

<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<a class="btn btn-link disabled" disabled>Not Fearsome</a>
<button id="fear1" type="button" class="btn btn-default likert-1">1</button>
<button id="fear2" type="button" class="btn btn-default likert-2">2</button>
<button id="fear3" type="button" class="btn btn-default likert-3">3</button>
<button id="fear4" type="button" class="btn btn-default likert-4">4</button>
<button id="fear5" type="button" class="btn btn-default likert-5">5</button>
<a class="btn btn-link disabled" disabled>Extremely Fearsome</a>
</div>
</div>


CodePen

However would like the first button of each scale to be placed exactly under each other for them to be uniform.

Any simple solutions?

Answer

give a min-width to your a

.btn-link {
  min-width: 130px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Fearsome</a>
    <button id="fear1" type="button" class="btn btn-default likert-1">1</button>
    <button id="fear2" type="button" class="btn btn-default likert-2">2</button>
    <button id="fear3" type="button" class="btn btn-default likert-3">3</button>
    <button id="fear4" type="button" class="btn btn-default likert-4">4</button>
    <button id="fear5" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Fearsome</a>

  </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Controllable</a>
    <button id="control1" type="button" class="btn btn-default likert-1">1</button>
    <button id="control2" type="button" class="btn btn-default likert-2">2</button>
    <button id="control3" type="button" class="btn btn-default likert-3">3</button>
    <button id="control4" type="button" class="btn btn-default likert-4">4</button>
    <button id="control5" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Totally Controllable</a>

  </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Dangerous</a>
    <button id="danger1" type="button" class="btn btn-default likert-1">1</button>
    <button id="danger2" type="button" class="btn btn-default likert-2">2</button>
    <button id="danger3" type="button" class="btn btn-default likert-3">3</button>
    <button id="danger4" type="button" class="btn btn-default likert-4">4</button>
    <button id="danger5" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Dangerous</a>

  </div>
</div>