Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I prevent a form-control from taking a new line in Bootstrap

I'm trying to get the dropdown menu to appear next to text "Pay every". How can I do this with bootstrap classes without editing the css or giving it a new custom class?

<div class="form-group">
    <label class="col-sm-2 control-label">Offer:</label>
    <div class="col-sm-2"><input type="text" class="form-control" placeholder="$1000"></div>
    <div class="form-group">
        <div class="i-checks col-sm-1">
            <label class="control-label"> <input type="radio" value="option1" name="a" checked> All at once </label>
        </div>

        <div class="i-checks col-sm-2">
            <label class="control-label"> <input type="radio" value="option1" name="a"> Pay every </label>
            <select class="form-control" name="every" disabled >
                <option>2 weeks</option>
                <option>1 months</option>
                <option>2 months</option>
                <option>3 months</option>
                <option>6 months</option>
            </select>
        </div>

    </div>
</div>

enter image description here

like image 582
code511788465541441 Avatar asked Dec 19 '16 15:12

code511788465541441


People also ask

What does form control do in bootstrap?

Give textual form controls like <input> s and <textarea> s an upgrade with custom styles, sizing, focus states, and more.

How do you reduce the width of a form control?

For default size . form-control is used, for smaller size we can use . form-control class along with . form-control-sm and for larger size we can use .

What is form outline?

form-outline class which provides a material design look. Example label. Show code.


2 Answers

The form-inline class is the bootstrap class for creating forms with inline controls. Everything within each form-group is displayed inline.

<div class="form-inline">
    <div class="form-group">
        <label class="control-label">Offer:</label>
        <input type="text" class="form-control" placeholder="$1000">
    </div>
    <div class="form-group">
        <div class="i-checks">
            <label class="control-label"> 
            <input type="radio" value="option1" name="a" checked> All at once </label>
        </div>
    </div>
    <div class="form-group">
        <div class="i-checks">
            <label class="control-label"> <input type="radio" value="option1" name="a"> Pay every </label>
            <select class="form-control" name="every" disabled >
                <option>2 weeks</option>
                <option>1 months</option>
                <option>2 months</option>
                <option>3 months</option>
                <option>6 months</option>
            </select>
       </div>
    </div>
</div>

You can see how it looks live here: http://www.bootply.com/WXOIcKQN6y

like image 75
Matt Dalzell Avatar answered Oct 15 '22 19:10

Matt Dalzell


Simply put it in a new col?

<div class="row">
<div class="col-sm-4 form-group">
    <label class="control-label">Offer:</label>
    <input type="text" class="form-control" placeholder="$1000">
</div>
<div class="col-sm-4 form-group">
    <div class="i-checks">
        <label class="control-label"> 
        <input type="radio" value="option1" name="a" checked> All at once </label>
    </div>
</div>
<div class="col-sm-4 form-group">
    <div class="i-checks">
        <label class="control-label"> <input type="radio" value="option1" name="a"> Pay every </label>
        <select class="form-control" name="every" disabled >
            <option>2 weeks</option>
            <option>1 months</option>
            <option>2 months</option>
            <option>3 months</option>
            <option>6 months</option>
        </select>
   </div>
</div>

like image 35
Nimesco Avatar answered Oct 15 '22 19:10

Nimesco