Twitter Bootstrap Question posted in

Twitter Bootstrap: Filling 100% grid width wraps elements

I have a problem that when using the Twitter Bootstrap Grid system the elements contained in the grid are wrapped around the end of the row, although the width of all the contained elements together is 100%.

Illustration here:
http://www.bootply.com/KEm1U4bDVP

I tried to find for margins and paddings already but couldn’t find any element that makes up that extra space to cause the wraparound.

Instead of using “30%” width for the last button I could use a value like 29%, but that is against my will. since the little extra spacing is becoming less and less when the screen width decreases.

How can I make the buttons to stay on one row and not be wrapped?

Tags:

3

Answers


  1. 0

    You have to use the grid-system correctly

    <div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
          <div class="row">
            <div class="col-lg-4"><button class="btn btn-primary btn-block">1</button></div>
            <div class="col-lg-4"><button class="btn btn-primary btn-block">1</button></div>
            <div class="col-lg-4"><button class="btn btn-primary btn-block">1</button></div>
          </div>
        </div>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    Buttons are inline-block elements. You have two options:

    Floated elements: http://www.bootply.com/drrFPKsDPY

    Or comment the spaces: http://www.bootply.com/RMoQw95WpJ

    Login or Signup to reply.
  3. 0

    You can set the width using calc see fiddle: https://jsfiddle.net/eye4ytq2/1/

    <button class="btn btn-primary" style="width: calc(30% - 5px)">1</button>
<button class="btn btn-primary" style="width: 40%">2</button>
<button class="btn btn-primary" style="width: calc(30% - 5px)">3</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search