How to evenly space three horizontally aligned buttons with bootstrap 3?

Question

If I enclose with a <div> with class="row" and give each button class="span4" the buttons fill the total width of the screen.

I want each button to be only as wide as the text which it contains, with the centers being at 25%, 50% and 75% of the width.

             [aaa]                        [bbb]                     [ccc]

not

[            aaa             ][            bbbb         ][            cccc            ]

I am new to bootstrap and not a CSS guru.

How do I achieve this?

My buttons also have class="btn-outline btn-default", but that shouldn't affect things (I think) .

By the way, I am currently considering exactly 3 buttons, but if a generic solution for any number is just as easy, that would be welcome.

Answer 1

first of all from your classes it seems you are still using bootstrap-v2, try using bootstrap-v3 (v4 it is still in alpha beta[now] stage), and you can achieve what you want with this:

.row {
  border: 1px dashed red /* demo */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <div class="col-xs-4">
      <button type="button" class="btn btn-default">Left</button>
    </div>
    <div class="col-xs-4">
      <button type="button" class="btn btn-default">Middle</button>
    </div>
    <div class="col-xs-4">
      <button type="button" class="btn btn-default">Right</button>
    </div>
  </div>
</div>

UPDATE (bootstrap-v4)

For those who are using/want to use bootstrap V4, here is how:

.row {
  border: 1px dashed red /* demo */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <div class="col-4">
      <button type="button" class="btn btn-default">Left</button>
    </div>
    <div class="col-4">
      <button type="button" class="btn btn-default">Middle</button>
    </div>
    <div class="col-4">
      <button type="button" class="btn btn-default">Right</button>
    </div>
  </div>
</div>

Answer 2

Try to use a div with class="row" and 3 div with the class="span4 text-center" and put a button in each of these