CODEWITHSUNDEEP
htmltwitter-bootstrap
Euklides
Euklides

Reputation: 584

How to align an even number of items horizontally with spacing between the items using Bootstrap?

I have a problem with dynamically aligning some items using Bootstrap when there are an even number of items.

I have 4 HTML select items next to each other and I want to have some spacing between them. Therefore I have set every select item in a col-md-3 div. For that I have used width 80% for each of them. Below these I have a table which I want to have size 100%. I have placed all items in a row container. I want the selectors to align up with the table below which I can not manage to do.

<div class="container">
<div class="row">
    <h1>Title</h1>
    <div class="col-md-3 col-xs-3" style="padding-left: 0; padding-right: 0;">
        <label>Test1</label>
        <select style="width: 80%">
            <option selected="selected" value="1">Test1</option>
        </select>
    </div>
    <div class="col-md-3 col-xs-3" style="padding-left: 0; padding-right: 0;">
        <label>Test2</label>
        <select style="width: 80%">
            <option selected="selected" value="1">Test2</option>
        </select>
    </div>
    <div class="col-md-3 col-xs-3" style="padding-left: 0; padding-right: 0;">
        <label>Test3</label>
        <select style="width: 80%">
            <option selected="selected" value="1">Test3</option>
        </select>
    </div>
    <div class="col-md-3 col-xs-3" style="padding-left: 0; padding-right: 0;">
        <label>Test4</label>
        <select style="width: 80%">
            <option selected="selected" value="1">Test4</option>
        </select>
    </div>

    <p>
       Some description
    </p>

    <table class="text-center">
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
            </tr>
        </thead>
    </table>
</div>
</div>

The problem is that since I use 80% width on the selectors the last selector, i.e. "Test5" does not align up with the end border of the table. I think the problem is clear if one looks at the the following JSFiddle.

So how can one dynamically align items with Bootstrap and have spacing between the elements? I have attached an image below with the desired design, how I want it to look.

Desired design.

Upvotes: 0

Views: 130

Answers (1)

sringland
sringland

Reputation: 131

Is this what your looking? https://jsfiddle.net/fjavmgrf/1/

If you take away the padding I personally think it looks better, but you have that option open to you.

select{
  width:100%;
}

.paddingZero{
  padding:0;
}

Or this: https://jsfiddle.net/37z2dqqk/1

EDIT (After image was put up:

What you want isn't really possible with bootstrap. Yes you could play about with the padding and possibly the margins and hack it but I'm personally not a fan of it. If you do still want to do it that way then basically just adjust the padding until it works and keep the select at 100%. Sorry I can't be of my help but my honest advice would be to go with one of the suggestions in my answers or those in the comments above as well.

Upvotes: 1

Related Questions