Formatting HTML buttons - html

Question

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 1

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>

Answer 2

Simplest answer is to put a width styling on the link using 300px in the following example:
<a class="btn btn-link disabled" disabled style="width:300px">Not Fearsome</a>
This would force all the leading statements to be the same width. I would suggest adding a class and doing via the CSS:
//css
.leftSide{width:300px}
<a class="leftSide btn btn-link disabled" disabled>Not Fearsome</a>
you could also pull the links out of the button-group and have them to each side in their own divs:
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="col-md-2">
<a class="btn btn-link disabled" disabled>Not Fearsome</a>
</div>
<div class="col-md-10">
<div class="btn-group" role="group" aria-label="...">
<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>
</div>
</div>
<div class="col-md-2">
<a class="btn btn-link disabled" disabled>Extremely Fearsome</a>
</div>
</div>

Answer 3

Even though #dippas commented that the class wasn't needed and was the accepted answer, the fact is that his solution is increasing the width of the last <a> of each line unnecessarily.
A simple and clean way to achieve what you want is using:
.btn-link:first-child {
display:inline-block;
width: 150px;
}
That way, of the <a> with the class btn-link, you will only select the first that appears inside the <div class="btn-group">.

Answer 4

You need to add display property to change the width of the a tag.
.btn-link {
display: inline-block;
min-width: 110px;
}