1

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

2 Answers 2

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/

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

Comments

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/

2 Comments

This aligns the labels to the right, but I'm fairly certain he wants them aligned to the left
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. :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.