Can't arrange two Bootstrap's buttons inline within a footer

Question

Trying to make a footer with the two buttons by using Bootstrap library. Every button should be 50% width, but instead of be placed in same line, second button moved to new line. If I change width of the buttons to 49% everything works. I've added box-sizing: border-box; but it didn't help.

There's my html code:

.footer{
    background-color: lime;
    bottom: 0;
    height: 10vh;
    position: absolute;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.footer > button{
 width: 50%;
 height: 100%;
 border-radius: 0px;
 box-sizing: border-box;
}

<div class="footer">
    <button type="button" class="btn btn-primary btn-lg">Save</button>
    <button type="button" class="btn btn-default btn-lg">Close</button>
</div>

My codepen: http://codepen.io/anatoly314/pen/VezEOJ

Update: actually my question is part of well known problem which has much broader covering in this topic: Ignore whitespace in HTML, I won't close it because people already answered but advice you to look for solution in a topic mentioned above.

Possible duplicate of [Ignore whitespace in HTML](http://stackoverflow.com/questions/2628050/ignore-whitespace-in-html) — Anatoly, Jan 14 '16 at 11:34
Actually yes, see my update. I won't delete my question because I coldn't imagine that it related to white spaces so I guess there're another people with same. So if somebody will come here with the same issue he will be redirected to right topic. — Anatoly, Jan 14 '16 at 11:39

score 1 · Answer 1 · answered Jan 14 '16 at 11:16

In bootstrap you have to use columns, you can read about it in their documentation.

<div class="row">
  <div class="col-md-6">
     <button type="button" class="btn btn-primary btn-lg">Save</button>
  </div>
  <div class="col-md-6">
     <button type="button" class="btn btn-default btn-lg">Close</button>
  </div>
</div>

So 100% width is md-12, then you can play with that number, 6 / 6 is two columns of 50% each in a row.

score 1 · Answer 2 · edited Feb 12 '16 at 11:11

It is because display: inline-block is white space dependent and the elements won't stick on one line. Edit your html and remove the white space between buttons to fix it:

<div class="footer">
    <button type="button" class="btn btn-primary btn-lg">Save</button> 
    <button type="button" class="btn btn-default btn-lg">Close</button>
</div>

Or you can use html comment:

<div class="footer">
    <button type="button" class="btn btn-primary btn-lg">Save</button><!--
    --><button type="button" class="btn btn-default btn-lg">Close</button>
</div>

score 1 · Answer 3 · answered Jan 14 '16 at 11:17

try to change your HTML codes to the following:

<div class="footer">
    <button type="button" class="col-sm-6 btn btn-primary btn-lg">Save</button>
    <button type="button" class="col-sm-6 btn btn-default btn-lg">Close</button>
</div>

you can use bootstrap classes helping you in size for the buttons also not only div elements

score 1 · Answer 4 · edited Feb 12 '16 at 11:13

You can find a working codepen here. I suggest you to take a look at the Bootsrap's Grid system.

.footer {
  background-color: lime;
  bottom: 0;
  height: 10vh;
  position: absolute;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.footer > .row {
  margin: 0;
}

.footer > .row > div {
  margin: 0;
}

.footer button {
  height: 100%;
  border-radius: 0;
}

<div class="footer">
  <div class="row">
    <div class="col-xs-6">
      <button type="button" class="btn btn-primary btn-lg btn-block">Save</button>
    </div>
    <div class="col-xs-6">
      <button type="button" class="btn btn-default btn-lg btn-block">Close</button>
    </div>
  </div>
</div>

Can't arrange two Bootstrap's buttons inline within a footer

4 Answers4