CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Bohn
Bohn

Reputation: 26929

How to add two elements in one row in bootstrap?

I am just learning and coding the same time with Boostrap and the layout I am thinking is something like this:

Row
  <SmallerColumn that hold label 1> <Larger Column that hold the control 1>
  <SmallerColumn that hold label 2> <Larger Column that hold the control 2>
EndRow

So for example a combobox and a label that says what is that conmbox for. For example: Country: Combobox of Countries

Upvotes: 2

Views: 5649

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 282120

form-horizontal class of bootstrap is what you need. However different rows will be taken care of by the form-group class. But using a form-control class will lead you to have a border around the text as:

form-control class

In order not to have a border, using control-label as the class.

Try this code:

<div class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2">Islands:</label>
    <div class="col-sm-10">
    <label class="control-label" id="l1" >Combobox of Islands 1</label>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2">Countries:</label>
    <div class="col-sm-10">
    <label class="control-label" id="l2" >Combobox of Countries 1</label>
    </div>
  </div>
</div>

Here is a jsfiddle: https://jsfiddle.net/mayank_shubham/an197vva/

Upvotes: 1

gmslzr
gmslzr

Reputation: 1251

The question is very simple, but somehow confusing for first timers, don't sweat it, it only requires a quick read on Bootstrap's documentation regarding form control layout.

An extract of the layout would be:

<form class="form-horizontal"> 
    <div class="form-group">
        <label for="inputField" class="col-sm-2 control-label">LabelText</label>
        <div class="col-sm-10">
            <select class="form-control">
                <option>1</option>
                <option>2</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="inputField" class="col-sm-2 control-label">LabelText</label>
        <div class="col-sm-10">
            <select class="form-control">
                <option>1</option>
                <option>2</option>
            </select>
        </div>
    </div>
</form>

No need for .row as .form-group will take care of newly appended elements.

Upvotes: 1

Related Questions