CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Robert Herhold
Robert Herhold

Reputation: 404

Bootstrap Grid Custom Spacing

I have an issue with having different sized buttons (a tags) with the bootstrap grid system. Right now, I have 4 different sized buttons, and they each take up 3 columns each. For example, I have 4 similar to this:

<div class="col-md-3">  <a href="#page-join-us" class="btn-slider">Button Text Here</a>

    </div>

My current setup (JSFiddle) is:

http://jsfiddle.net/cov4ca1z/17/

For right now, I'm not worried about how the buttons are overlapping when the window is shrunken down to mobile size. Ideally, what I'm looking for is something like this:

http://oi62.tinypic.com/wbp1sp.jpg

I played around with a couple different things, but I couldn't find anything that worked.

Thanks.

Upvotes: 0

Views: 67

Answers (2)

Ryan
Ryan

Reputation: 415

The column widths in the Bootstrap grid system are fixed. If you put each button in its own column, it's going to be constrained by the size of that column, and it will behave independent of your other buttons. So, your very very long button is going to wrap within its own column.

It sounds like you want all the buttons to appear next to each other and have them wrap one at a time as the screen size expands/contracts. I updated your Fiddle:

http://jsfiddle.net/cov4ca1z/24/

I put all the buttons together in their own column and included a float: left in your btn-slider class:

    <div class="col-md-12">
        <a href="#page-join-us" class="btn-slider">Medium</a>
        <a href="#your-progress" class="btn-slider">Very Very Very Very Long</a>
        <a href="#your-progress" class="btn-slider">Short</a>
        <a href="#your-progress" class="btn-slider">About Average Size</a>
    </div>

Upvotes: 1

Mark Busnelli Jr
Mark Busnelli Jr

Reputation: 435

Why not place do something like this?

<ul id="buttonList" class="list-inline">
<li><a href="#page-join-us" class="btn-slider">Medium Size</a></li>
<li><a href="#your-progress" class="btn-slider">Very Very Very Very Long</a></li>
</ul>

Then use CSS to style ul#buttonList li{} to adjust the margins as you would like.

Upvotes: 0

Related Questions