CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3557085
user3557085

Reputation: 27

HTML & Bootstrap dropdown select

How do I fix this design? I am using Bootstrap 3.

Code:

<b>Course:</b>
<div class="form-group">
    <select name="course" class="form-control">
        ...php code...
    </select>
    <select name="yearlevel" class="form-control">
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
    </select>
    <select name="section" class="form-control">
        <option>L</option>
        <option>M</option>
        <option>G</option>
        <option>U</option>
    </select>
</div>

Picture:

enter image description here

I want the 3 dropdown boxes to be on the same line. How would I fix this design?

Thanks.

Upvotes: 0

Views: 54

Answers (2)

abhishek bagul
abhishek bagul

Reputation: 263

Try using this html 

<b>Course:</b>
<div id="lineblock" class="form-group">
    <select name="course" class="form-control">
        ...php code...
    </select>
    <select name="yearlevel" class="form-control">
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
    </select>
    <select name="section" class="form-control">
        <option>L</option>
        <option>M</option>
        <option>G</option>
        <option>U</option>
    </select>
</div>

and the following css

#lineblock select{
    float: left;
    width: 33%;
}

You can see live working demo of it here http://jsfiddle.net/rgf1kvkv/

Upvotes: 1

moberemk
moberemk

Reputation: 1625

An easy way is to wrap the <select> tags in a .form-inline class; that'll render any .form-control elements inside it to display using inline-block instead of block so that they'll all sit on a single line instead of pushing each other to the next one.

Upvotes: 1

Related Questions