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:

<divclass="content row"><divclass="col-xs-3"style="padding-right: 5px;"><inputclass="form-control"id="id_current_case_count"min="0"name="current_case_count"type="number" /></div><divclass="col-xs-3"style="padding-right: 5px;"><inputclass="form-control"id="id_case_count_uncertainty"min="0"name="case_count_uncertainty"type="number" /></div><divclass="col-xs-6"><selectclass="form-control"id="id_case_count_interval"name="case_count_interval"><optionvalue="weekly">per week</option><optionvalue="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">
    <inputtype="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.