Bootstrap 4 buttons example: where does the space between buttons is coming from?

Question

I have tried to inspect a "Buttons" example from Bootstrap 4. They have a nice-looking row of buttons, like this:

http://getbootstrap.com/docs/4.0/components/buttons/

But I don't understand, where does the space between buttons is coming from.

This is not margin, not flex-box aligning, not a transparent border. So, how it works? Actually, I disabled all the styles in dev-tools, but that space did not disappear.

Glad someone else asked this! Was bugging me for about 10 minutes! — slugmandrew, Feb 14 '19 at 10:21

score 12 · Accepted Answer · edited Aug 19 '22 at 20:23

The space is there because there's whitespace between the HTML elements. If you remove the whitespace, the buttons will be positioned next to each other.

Note that whitespace (newline) between the elements is condensed to a single space by the browser.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>

Now if we remove the whitespace:

<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button>

score 3 · Answer 2 · answered Jan 24 '18 at 05:29

3

If you check with firefox the space coming from here please check screenshot:

You can remove the space by adding your own css rule like merging or padding.

Thanks

answered Jan 24 '18 at 05:29

R.K.Bhardwaj

2,168
1
14
24

Thanks for posting this nice feature of Firefox – slugmandrew Feb 14 '19 at 10:22

Bhuwan · Answer 3 · 2018-01-24T06:14:43.657

The space is coming because buttons are inline elements by default...it is not a bug..its just the way inline elements align in browsers...

So remove all the space from your coding is a solution, which I don't think I will do, because if you are coding your code should look good...right..

As you are using bootstrap4 you can use bootstrap d-flex class

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="parent d-flex">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>
</div>

Another solution is you can set the font-size of the parent of buttons to 0 and then set the font-size of buttons to the default one

Stack Snippet

.parent {
  font-size: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="parent">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>
</div>

score 1 · Answer 4 · answered Jan 24 '18 at 05:40

You can solve it using simple parent element to flex

<div class="button">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
</div>

<style>
    .button{
        display: flex;
    }
    .button > button{
        display: inline-block;
    }
</style>

Bootstrap 4 buttons example: where does the space between buttons is coming from?

4 Answers4