How Do I Adjust Bootstrap 3 Inline Form Width?

I have a form that relies on Bootstrap 3: 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 s

Solution 1:

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.

Solution 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.

Solution 3:

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

Solution 4:

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">

Solution 5:

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