CODEWITHSUNDEEP
twitter-bootstrap
Boris Kamp
Boris Kamp

Reputation: 338

Bootstrap buttons margin-right

Im using this html with bootstrap Framework:

<div id="postsPerPage">
  <button type="button" class="btn btn-default sort filter" title="5">5</button>
  <button type="button" class="btn btn-default sort active filter" title="10">10</button>
  <button type="button" class="btn btn-default sort filter" title="25">25</button>
  <button type="button" class="btn btn-default sort filter" title="50">50</button>
  <button type="button" class="btn btn-default sort filter" title="100">100</button>
</div>

please see this fiddle: https://jsfiddle.net/boriskamp1991/vppt8qvm/2/

Why is there a untraceable margin between the buttons? I need this to be 0 beacuse I want to work with percent width units and this messes it up.....

I have really no clue after searching and searching. You can find the margin on their doc page as well: http://getbootstrap.com/css/#buttons

Thanks!

Upvotes: 1

Views: 3345

Answers (3)

Adam_O
Adam_O

Reputation: 341

Building off of Tim Lewis's answer, you can optionally just add the btn-group class to the same div that has id="postsPerPage". Looking something like this:

<div id="postsPerPage" class="btn-group">
    <button type="button" class="btn btn-default sort filter" title="5">5</button>
    <button type="button" class="btn btn-default sort active filter" title="10">10</button>
    <button type="button" class="btn btn-default sort filter" title="25">25</button>
    <button type="button" class="btn btn-default sort filter" title="50">50</button>
    <button type="button" class="btn btn-default sort filter" title="100">100</button>
</div>

Upvotes: 0

Jacob Bundgaard
Jacob Bundgaard

Reputation: 1085

The "margin" is due to the whitespace between the <button> elements. If you really do want the look of five individual buttons, and not of a button group, as suggested in the answer by Tim Lewis, you can remove the whitespace:

<div id="postsPerPage">
  <button type="button" class="btn btn-default sort filter" title="5">5</button><button type="button" class="btn btn-default sort active filter" title="10">10</button><button type="button" class="btn btn-default sort filter" title="25">25</button><button type="button" class="btn btn-default sort filter" title="50">50</button><button type="button" class="btn btn-default sort filter" title="100">100</button>
</div>

Upvotes: 0

Tim Lewis
Tim Lewis

Reputation: 29288

Add a <div class="btn-group"> around your... button group:

<div id="postsPerPage">
    <div class="btn-group">
        <button type="button" class="btn btn-default sort filter" title="5">5</button>
        <button type="button" class="btn btn-default sort active filter" title="10">10</button>
        <button type="button" class="btn btn-default sort filter" title="25">25</button>
        <button type="button" class="btn btn-default sort filter" title="50">50</button>
        <button type="button" class="btn btn-default sort filter" title="100">100</button>
    </div>
</div>

That will get rid of the spacing between them.

JSFiddle

Upvotes: 4

Related Questions