0

hi all

I am trying to build a registration form using the bootstrap, design, and I am stuck.
i am stuck where the date of birth. it used the drop down list in bootstrap but where I am stuck at is getting it to be side by side on the webpage. it is showing it is on top of one another instead of side by side. i have tried everything that I can think of, I have tried researching on ways on how to do it, found a couple but they not working, becuz i have tried out them, can u tell me where and what i am doing wrong, here is the codes that i a using.

<div class="form-group">
<label for="inputdateofbirth" class="col-md-4 control-label">Date of Birth</label>
<div class="col-md-8">
<div class="row">
<div class="col-md-5">
<select class="form-control" name="">
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option selected value="May">May</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<select name="" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option selected value="5">5</option>
</select>
</div>
<div class="col-md-4">
<select name="" class="form-control">
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option selected value="2006">2006</option>
</select>
</div>
</form>     
4
Contributors
4
Replies
21
Views
4 Months
Discussion Span
Last Post by patk570
0

Directly from getboostrap.com

Inline form
Add .form-inline to your form (which doesn't have to be a <form>) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>

Use the .form-inline class to make the form go "side by side"

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.