Bootstrap Grid System: do you have to have 12 columns or can use use fewer columns

2
votes

Is it required to use col-sm-9 to make 12 col in second div or I can use col-sm-4 to make input field small.Is there other way to make input field small in bootstrap form class="form-horizontal". 

<form class="form-horizontal">
            <div class="form-group">
               <label for="label" class="col-sm-3 control-label">Label</label>
               <div class="col-sm-9">        
                  <input class="form-control textLabel" type="text" id="label" autocomplete="off"/>
               </div>
            </div>             
    </form>
1
twitter-bootstrap
You can use the col-sm-4, but the next column may float next to it if it's less than 7 -- so use a clearfix on a div <div class="clearfix"></div> after the col-X-4 – Christina

1 Answers

0
votes

I can't comment, so I am leaving this as an answer. As far as I understand, you HAVE to have 12 columns in a row, period (edit: I appear to be incorrect, see comments). So you add a column that doesn't take up space after your desired width column:

<form class="form-horizontal">
    <div class="form-group">
       <label for="label" class="col-sm-3 control-label">Label</label>
       <div class="col-sm-5" style = "width: 20%;">        
          <input class="form-control textLabel" type="text" id="label" autocomplete="off"/>
       </div>
       <div class="col-sm-4" style = "width:0px; height:0px;">        
       </div>
    </div>             
</form>
<div class = "row">
    <div class = "col-sm-12" style = "background-color:red;">TESTING FOR RESIZE BEHAVIOR</div>
</div>

Except you don't even need that extra column unless you want to stick to pure bootstrap for sizing. You can simply leave sm-9, BUT specify the width:

<div class="col-sm-9" style = "width: 20%;">        
    <input class="form-control textLabel" type="text" id="label"   autocomplete="off"/>
</div>