Align buttons in Bootstrap

Question

Within my current template I am using Bootstrap and it should contain three buttons where each should be positioned respectively. The first one all the way to the left, the second one in the middle and the third (final) one to (all the way to) the right (within a container element).

When I am trying to achieve this with Bootstrap, I happen not to find anything concerning my need. This is because everytime I try to wrap a <div> tag around the input elements, the HTML document will show these on seperate rows:

.foo {
  width: 23%;
  /*Should be the width required by the button,
  but I just took a random number that fits
  best. */
  margin: 0 auto;
}
/*This is how it should look like, however
I want to make use of Bootstrap instead of custom positon css if
possible. */

.desired {
  position: absolute;
  left: 10%;
}
.desired div {
  width: 10%;
  text-align: center;
  display: inline-block;
}
.example2 {
  /*Center second element*/
  position: absolute;
  left: 50%;
  margin-left: -5%;
}
.example3 {
  position: absolute;
  right: 0%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />I tried using the following HTML/CSS:
<!--What I tried doing using Bootstrap: -->
<div class="container">
  <input type="submit" class="btn btn-default" value="Foo">
  <input type="submit" class="btn btn-default" value="Test">
  <input type="submit" class="btn btn-default pull-right" value="Bar">
</div>

<br>And got to a result that looks something like this:
<div class="container">
  <input type="submit" class="btn btn-default" value="Foo">
  <div class="foo">
    <input type="submit" class="btn btn-default" value="Test">
  </div>
  <input type="submit" class="btn btn-default pull-right" value="Bar">
</div>

<br>And this:
<div class="container">
  <input type="submit" class="btn btn-default" value="Foo">
  <div class="text-center">
    <input type="submit" class="btn btn-default" value="Test">
  </div>
  <input type="submit" class="btn btn-default pull-right" value="Bar">
</div>

<br>

<!-- What it looks like I want to achieve -->
I want the elements to look similar to:
<div class="container desired">
  <div class="example1">
    <input type="submit" class="btn btn-default" value="Foo">
  </div>
  <div class="example2">
    <input type="submit" class="btn btn-default" value="Test">
  </div>
  <div class="example3">
    <input type="submit" class="btn btn-default" value="Bar">
  </div>
</div>

<!-- Is it possible to align buttons with the use of Bootstrap classes? -->

If this snippet does not show well, this is due to positioning in percentages, so try to view it in full page if necessary.

So my question is: Is it possible to use Bootstrap to align buttons within a document, even when I want these to be placed on the same horizontal line (or row)?

Thanks in advance.

I think you need this: http://getbootstrap.com/components/#btn-groups — node_modules, Mar 23 '16 at 09:38
Possible, like you have done. Not sure what the question is now? — Praveen Kumar Purushothaman, Mar 23 '16 at 09:38
@C0dekid The thing about the examples given, is that all the buttons stick to each other, I want them horizontally spread (for example, flexbox property uses a value called space between, which works well for flex items, but I want this to work with submit buttons, Bootstrap and without the use of flexbox, since that will make your page slower to load). — Barrosy, Mar 23 '16 at 09:45
@PraveenKumar I want to achieve what I did yes. However I do not wish to use the position property and maybe someone here could tell me if there is already a solution for this within Bootstrap. — Barrosy, Mar 23 '16 at 09:45
@Barrosy Just answered. I guess I am late? Just tell me at least if the answer is right? I am not expecting anything. `:)` — Praveen Kumar Purushothaman, Mar 23 '16 at 09:50

score 8 · Accepted Answer · answered Mar 23 '16 at 09:47

8

very simple just follow below step.

by using bootstrap

put all 3 buttons in same div or container.
add "text-center" class in parent div or container of all 3 buttons
add "pull-left" class to first button.
add "pull-right" class to third button.

by using custom CSS

put all 3 buttons in same parent div.
give that parent div css- .parent-div { text-align:center;}
give first button css- .first_btn { display:inline-block; float:left;}
give third button css- .third_btn { display:inline-block; float:right;}
give second button css- .second_btn { display:inline-block; float:none;}

answered Mar 23 '16 at 09:47

Yashpal Sindhav

365
1
10

Ah that made sense. The answer is easier than I thought. – Barrosy Mar 23 '16 at 09:49
@Barrosy Just answered. I guess I am late? Just tell me at least if the answer is right? I am not expecting anything. `:)` – Praveen Kumar Purushothaman Mar 23 '16 at 09:50

score 2 · Answer 2 · answered Mar 23 '16 at 09:49

You can achieve it without using position this way:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-default">Button</button>
    </div>
    <div class="col-xs-4 text-center">
      <button class="btn btn-default">Button</button>
    </div>
    <div class="col-xs-4 text-right">
      <button class="btn btn-default">Button</button>
    </div>
  </div>
</div>

Align buttons in Bootstrap

2 Answers2

Linked