CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
diegoaguilar
diegoaguilar

Reputation: 8376

How can I get this Bootstrap class HTML elements to get in one single line?

I want to place a <select>, and two <input type="text"> elements in one single row. I'm using Bootstrap 3.

This is my markup:

<div class="form-group">

    <label for="checkPosgrado" class="col-xs-2 control-label">Estudios de Posgrado</label>

    <div class="col-xs-7">

        <div class="input-group">
            <select class="input-group-select form-control">
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
                <option value="five">Five</option>
            </select>
          <input type="text" class="form-control" id="tituloPosgrado1" placeholder="Título">
        </div><!-- /input-group -->                     

    </div>

    <div class="col-xs-3">
        <input type="text" class="form-control" placeholder="A" id="Posgrado1">
    </div>
</div>

Knowing Bootstrap grid system is 12 units based, I'm giving two units for label, seven for the select and one input and the 3 left for last input.

I want the select and one input to be together, that's why I'm trying to use .input-group classes.

However, select it's taking its width throwing last input to next line, how how can fix it?

This is an example fiddle

Upvotes: 0

Views: 89

Answers (1)

Nono
Nono

Reputation: 161

You can divide your div containing the select and the first input in two parts of 6 units each 

<div class="form-group">

    <label for="checkPosgrado" class="col-xs-2 control-label">Estudios de Posgrado</label>

    <div class="col-xs-7">
        <div class="col-xs-6">
            <select class="input-group-select form-control">
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
                <option value="five">Five</option>
            </select>
        </div>
        <div class="col-xs-6">
            <input type="text" class="form-control" id="tituloPosgrado1" placeholder="Título">
        </div>                
    </div>

    <div class="col-xs-3">
        <input type="text" class="form-control" placeholder="A" id="Posgrado1">
    </div>
</div>

http://jsfiddle.net/9h7k8/

@Diegoaguilar asked for a smaller padding on each div.

// HTML
<div class="form-group smallPadding">

    <label for="checkPosgrado" class="col-xs-2 control-label">Estudios de Posgrado</label>

    <div class="col-xs-7">
        <div class="col-xs-6">
            <select class="input-group-select form-control">
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
                <option value="five">Five</option>
            </select>
        </div>
        <div class="col-xs-6">
            <input type="text" class="form-control" id="tituloPosgrado1" placeholder="Título">
        </div>                
    </div>

    <div class="col-xs-3">
        <input type="text" class="form-control" placeholder="A" id="Posgrado1">
    </div>
</div>

// CSS
.smallPadding div{
    padding-right : 2px;
    padding-left : 2px;
}

http://jsfiddle.net/9h7k8/2/

Upvotes: 2

Related Questions