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>     

Recommended Answers

All 4 Replies

You can put them in a table... one row three columns. Worked for me!

You can use three columns, just simplify your HTML a bit. See this

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"

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.