CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Mawg
Mawg

Reputation: 40140

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

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.

Upvotes: 5

Views: 11840

Answers (3)

dippas
dippas

Reputation: 60543

first of all from your classes it seems you are still using , try using (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 ()

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>

Upvotes: 9

Mahmoud
Mahmoud

Reputation: 936

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

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53664

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>

Upvotes: 0

Related Questions