CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Barrosy
Barrosy

Reputation: 1457

Align buttons in Bootstrap

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.

Upvotes: 1

Views: 15084

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

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>

Upvotes: 2

Yashpal Sindhav
Yashpal Sindhav

Reputation: 375

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;}

Upvotes: 8

Related Questions