CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
X'Byte
X'Byte

Reputation: 165

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?

Upvotes: 1

Views: 201

Answers (4)

Edu
Edu

Reputation: 2643

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">.

Upvotes: 1

gavgrif
gavgrif

Reputation: 15499

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>

Upvotes: 1

xagos
xagos

Reputation: 98

You need to add display property to change the width of the a tag.

.btn-link {
    display: inline-block;   
    min-width: 110px;
}

Upvotes: 0

dippas
dippas

Reputation: 60553

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>

Upvotes: 1

Related Questions