CODEWITHSUNDEEP
csstwitter-bootstrap-3
Nikola Obreshkov
Nikola Obreshkov

Reputation: 1748

Space between Bootstrap 3 buttons

If I put several Bootstrap 3 buttons in a row:

    <button class="btn btn-default">Button 1</button>
    <button class="btn btn-default">Button 2</button>
    <button class="btn btn-default">Button 3</button>

there is a small space between them. Where does it come from and how to remove it without using float? According to the Firebug and Chrome Inspector the buttons haven't any margin applied to them.

Upvotes: 7

Views: 15627

Answers (2)

Tieson T.
Tieson T.

Reputation: 21236

The newline between the buttons actually causes the space. Observe:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-default">Button 1</button><button class="btn btn-default">Button 2</button><button class="btn btn-default">Button 3</button>

There is a button-group rule you can use if you want the buttons visually grouped: http://getbootstrap.com/components/#btn-groups

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Upvotes: 12

David Escudero
David Escudero

Reputation: 88

I believe you style your buttons display:inline-block; or inline. By default they create spaces if you have newline character.

So to remove it, put those markups next to each other without newline char. It would get messy, but will get what you want without having a style float

So do it like this :

<button class="btn btn-default">Button 1</button><button class="btn btn-default">Button 2</button><button class="btn btn-default">Button 3</button>

Upvotes: 3

Related Questions