2

I have a form that relies on Bootstrap 3:

Imgur

full working example: http://jsfiddle.net/x7vk7/2/

The gist is that I have 2 columns for content. The first column is col-lg-4, and the second is col-lg-8. The first column displays a form, and the 2nd column displays results.

The problem I'm having is related to the width of the inline form elements in the Cases question. I used this post to figure out how to properly nest inline form elements in a horizontal form. Here's the relevant code I have for the Cases question:

<div class="form-group">
    <label class="col-lg-2 control-label" for="id_current_case_count" data-placement="top" data-toggle="tooltip" title="How many cases have you seen?">Cases</label>
    <div class="col-lg-10">
        <div class="form-inline">
            <div class="form-group">
                <input class="form-control" id="id_current_case_count" min="0" name="current_case_count" type="number" />
            </div>
            ±
            <div class="form-group">
                <input class="form-control" id="id_case_count_uncertainty" min="0" name="case_count_uncertainty" type="number" />
            </div>
            <div class="form-group">
                <select class="form-control" id="id_case_count_interval" name="case_count_interval">
                    <option value="weekly">per week</option>
                    <option value="total">total</option>
                </select>
            </div>
        </div>
    </div>
</div>

The problem is that I want all 3 form elements for the Cases question to be on the same line. The first 2 elements are just integer fields, so it's not necessary for them to be very wide. What's the proper way to adjust the width of those first two integer fields so that all 3 fields fit on the same line?

Improve this question

5 Answers 5

Reset to default
14
+50

If you want to achieve this all you have to do is to use this code insted of yours:

<div class="content row">
    <div class="col-xs-3" style="padding-right: 5px;">
        <input class="form-control" id="id_current_case_count" min="0" name="current_case_count" type="number" />
    </div>                            
    <div class="col-xs-3"  style="padding-right: 5px;">
        <input class="form-control" id="id_case_count_uncertainty" min="0" name="case_count_uncertainty" type="number" />
    </div>
    <div class="col-xs-6">
        <select class="form-control" id="id_case_count_interval" name="case_count_interval">
            <option value="weekly">per week</option>
            <option value="total">total</option>
        </select>
    </div>
</div>

All the code in jsfiddle here.

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

1 Comment

Sorry for the slow response (been at a conference), but that looks great! I'm gonna try it out tomorrow. I think this'll solve my issues. Thanks so much!
2

The recommended way stated in the documentation is to wrap the input in a parent element, and set the column width there.

<div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
</div>

http://getbootstrap.com/css/#forms-control-sizes

In your example you already have them wrapped in a div so just add the col-class to your form-group.

Improve this answer

3 Comments

This is close to working, but there's an issue with the spacing between elements (see jsfiddle.net/x7vk7/4 for an example). You can see that the elements are actually sitting on top of each other. This covers up the ±, too. Any idea how to fix that?
It depends on the size of your browser how it is rendered. Note that bootstrap3 is very adaptive, i.e. if you have a narrow display, it will split it up to several lines for it to fit properly. One thing that I noticed in your jsfiddle, is that the width of three controls (and the +/-) don't add up to 12 properly. I suggest that you put <span class="col-xs-2"> around the +/-
Ok, here's a link to the current jsfiddle: jsfiddle.net/x7vk7/7. It still looks off (see i.imgur.com/1ASVV5S.png). I'm widening the browser to make maximal use of col-lg-*, and the form elements are still sitting on top of each other. I just don't know how to prevent that from happening.
1

You can use Bootstrap's column classes within any element group. In this case, your problem can be solved by giving each of your .form-group divs in the section in question an additional class of .col-xs-4. This will size each of them to be 1/3 of the available space, and all on the same line.

JSFiddle

Improve this answer

1 Comment

I definitely like where you're going, but the example you provided doesn't quite work. i.imgur.com/EgZeGWo.png is what it looks like. Also, the ± is missing (I do need that there).
0

You can simply set the .col-lg-4 to width="40%" or whatever else you want it set to. I use this myself so i don't see why it shouldn't work.

Example,

.col-lg-4 {
width: 50%;
}

Make sure this is in a separate CSS file that is is added in the HTML AFTER the bootstrap is.

Example,

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/local.css" rel="stylesheet">
Improve this answer

1 Comment

Uh, you should really not override bootstrap's classes but add your own class with your custom css
-1

Add style="width:33%;display:inline-block;" to your input tags or a class containing the same.

Improve this answer

5 Comments

I tried adding style="width:30%;" to the form-group (see jsfiddle.net/x7vk7/5), but it's not working. The inputs just sit on top of each other. How can I make them sit next to each other instead of on top?
@Geoff you also need to add display:inline-block
Crap, I'm still seeing the same thing: jsfiddle.net/x7vk7/6. The inputs are still on top of each other.
@Geoff you can't simply go on merging the answers. Remove your col classes
I don't follow. This fiddle has nothing to do with the other 2 answers. There are no col classes on these form-groups, unless I'm misunderstanding.

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.