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

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

Answer 3

The bootstrap way would be
.col-md-3 {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
</div>
</div>
or to do it using plain CSS and flexbox
.row {
display: flex;
}
.col-md-4 {
flex-grow: 1;
text-align: center;
}
<div class="container">
<div class="row">
<div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
</div>
</div>