CODEWITHSUNDEEP
csstwitter-bootstrap
Michael
Michael

Reputation: 13636

Make two html elements in single row.

I use bootstrtap 3.3.7, I have two elements input textbox and drop down menu.

Here is html:

<!-- input -->
 <div class="container">
 <div class="row">      
    <div class="form-control col-xs-6" style="background-color:red">
        <select name="UNITS" class="btn btn-default dropdown-toggle">
        <option value="me">me</option>
        <option value="fe">fe</option>
        <option value="ki">ki</option>
        <option value="mi">mi</option>
        </select>
    </div>  

    <div class="form-group col-xs-6" style="background-color:green">
        <!-- <i class="fa fa-text-height"></i> -->
        <input type="edit" name="DISTANCE" id="distance" class="form-control input-group-lg" onkeyup="ValidateInput('distance')" placeholder='__#BUFFERDISTANCE#__'>    
    </div>

My question is how to make two elements above in same row?

And here is jsfiddle.

Upvotes: 2

Views: 1719

Answers (4)

Rodrigo Aires
Rodrigo Aires

Reputation: 339

Try to replace form-control

<div class="form-control col-xs-6" style="background-color:red">

to form-group

<div class="form-group col-xs-6" style="background-color:red">

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122145

form-control class is adding width: 100% on that element so you have multiple solutions.

  1. You can remove form-control
  2. You can create one more element inside col-xs-6 with form-control class DEMO
  3. Or you can set width: 50% Demo

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362810

The col-xs-6 shouldn't also be a form-control because it's adding padding that's causing the columns to wrap. Make the select a form-control instead.

<div class="container">
         <div class="row">      
            <div class="col-xs-6" style="background-color:red">
                <select name="UNITS" class="form-control btn btn-default dropdown-toggle">
                <option value="me">me</option>
                <option value="fe">fe</option>
                <option value="ki">ki</option>
                <option value="mi">mi</option>
                </select>
            </div>  

            <div class="form-group col-xs-6" style="background-color:green">
                <!-- <i class="fa fa-text-height"></i> -->
                <input type="edit" name="DISTANCE" id="distance" class="form-control input-group-lg" onkeyup="ValidateInput('distance')" placeholder='__#BUFFERDISTANCE#__'>    
            </div>
       </div>
    </div>

https://jsfiddle.net/fryp6mdf/

Upvotes: 1

Monicka
Monicka

Reputation: 505

I changed <div class="form-control col-xs-6" style="background-color:red">into <div class="form-group col-xs-6" style="background-color:red"> 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- input -->
 <div class="container">
 <div class="row">      
    <div class="form-group col-xs-6" style="background-color:red">
        <select name="UNITS" class="btn btn-default dropdown-toggle">
        <option value="me">me</option>
        <option value="fe">fe</option>
        <option value="ki">ki</option>
        <option value="mi">mi</option>
        </select>
    </div>  

    <div class="form-group col-xs-6" style="background-color:green">
        <!-- <i class="fa fa-text-height"></i> -->
        <input type="edit" name="DISTANCE" id="distance" class="form-control input-group-lg" onkeyup="ValidateInput('distance')" placeholder='__#BUFFERDISTANCE#__'>    
    </div>

Upvotes: 1

Related Questions