CODEWITHSUNDEEP
htmlcssformstwitter-bootstrapresponsive-design
Jan
Jan

Reputation: 1221

Bootstrap form horizontal: align two inputs next to each other

I am trying to figure out how to align two inputs (like zip and city) parallel side by side in Bootstrap using form-horizontal. I tried using the div.row wrapper with spanX classes combined with input-block-level.

Alternatively, I attempted to leave out the div.row but giving the inputs the spanX classes directly.

The problem is, that the width of the inputs differs. Maybe this is a bug, but at a certain viewport (requires bootstrap-responsive.css) it works properly — but not with a large viewport and sometimes horizontal scrollbars appear.

Shouldn't rhe responsive stylesheet of Bootstrap adapt the sizes? Wrapping the whole code in a div.container makes it even worse.

Maybe you can even show me some complete different solutions?

I prepared a jsFiddle and some screenshots for you. You can find the size of the window and the size of the viewport (in square brackets) in the title. Click the images for full size.

Upvotes: 4

Views: 12920

Answers (2)

banjoSas
banjoSas

Reputation: 194

You have to remember that spanX classes are implemented with percentages, so sometimes the edges will not align properly when putting multiple input areas in same row. So when you use a span12 class, the members of that div might get warped.

The labels are another concern in this multiple input per line scenario. They take 160px, so they are not compatible with span12 input areas. They are best for one input per line and span1-span10.

<form class="container-fluid">
    <div class="control-group">

        <div class="controls row-fluid">
            <input type="text" class="span11" placeholder="Street" />
        </div>

        <div class="controls controls-row row-fluid">
            <input type="text" class="span4" placeholder="Zip" />
            <input type="text" class="span7" placeholder="City" />
        </div>
    </div>
</form>

I have added two more classes on your 2nd row, controls-row and row-fluid - first one aligns the rows together while the other makes the length fluid.

A better design decision will be to get rid of the labels - the placeholders already do their job - in case of multiple input areas on same row. That way you can use the entire 11 columns.

The horizontal scroll bar will appear sometimes due to the 12 column structure, so get rid of it by setting "overflow-x:hidden" right on the body element.

Upvotes: 1

Akshaya Raghuvanshi
Akshaya Raghuvanshi

Reputation: 2277

Because which style you are changing is working only for mobile screen devices. If you use the above code;

.input-block-level{
    width:60%;

}

you'll only find the zip and country inputs aligned only on mobile viewport example-320px/480px and above it wouldn't work. So you have to add any style like this to add in other mediaqueries also like 768px or whatever you want. Your code will work at any cost either style it via class method or via input[type="text"] method, only thing they should be in the exact mediaqueries.

Upvotes: 0

Related Questions