Aligning input fields using bootstrap css/ css/html

Question

I would like to align the following:

<div class="span5">
                    <div class="">
                        <span class="label">Label1</span>
                        <input type="text" class="input-medium" placeholder="0">
                    </div>
                    <div class="">   
                        <span class="label">Label2</span>
                        <input type="text" class="input-medium" placeholder="0" >
                    </div>
                    <div class="">   
                        <label class="checkbox inline">
                        <input type="checkbox"><span>Something</span>
                        </label> 
                        <input type="text" class="input-medium" placeholder="0">
                    </div>       
                    <div class="">     
                        <span class="label">Label4</span>  
                        <input type="text" class="input-medium" placeholder="0">
                    </div>
                    <div class="">
                        <span class="label label-inverse">Label5</span>
                        <input type="text" class="input-medium" placeholder="0">  
                    </div>
                </div>

Here's the fiddle: http://jsfiddle.net/qP46X/1267/

I tried margin right but it didnt help. I am not sure how to align the textboxes together

Explosion Pills · Accepted Answer · 2013-03-28 14:02:05Z

3

Use a set width for the .label elements. Ideally you'd have consistency in the layout and you could also use labels for all of the text, but a set width + display: inline-block will work. You can of course change the width as needed.

http://jsfiddle.net/qP46X/1268/

answered Mar 28, 2013 at 14:02

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

I_Debug_Everything · Accepted Answer · 2013-03-29 06:35:13Z

2

you can also use twitter bootstrap form-horizontal css class and its sub-component classes to fulfill your requirement. i modified a bit styling of your code but you might achieve exactly what you want from the below reference( see Horizontal form in the below link)

Reference: http://twitter.github.com/bootstrap/base-css.html#forms

Demo: http://jsfiddle.net/qP46X/1269/

edited Mar 29, 2013 at 6:35

answered Mar 28, 2013 at 14:22

I_Debug_Everything

3,8465 gold badges39 silver badges49 bronze badges

2 Comments

Explosion Pills Over a year ago

This aligns the labels to the right, but I'm fairly certain he wants them aligned to the left

I_Debug_Everything Over a year ago

yeah it does aligns them to the right. But i wasnt going with the concern for aligning his labels right/left. I just gave him an idea to use the already build bootstrap css classes inorder to achieve proper alignment. He also didnt mentioned whether he wants his label left/right aligned. No objection with your comment though, aligning to the left that's what we generally do. :)

Collectives™ on Stack Overflow

Aligning input fields using bootstrap css/ css/html

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related