Member Avatar for divinity02

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
  • 305 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by patk570

Dani AI

Generated

The selects are stacking because of markup/nesting, not the selects themselves. Several replies (, , ) point toward layout approaches, but the immediate bug in ’s snippet is that the day and year columns sit outside the same .row/column wrapper as the month. In Bootstrap the grid only works when .col-* elements are direct children of a .row; misplaced or mismatched closing tags will drop those columns onto their own lines. Also remember that breakpoint classes like col-md-* only place items side‑by‑side at the medium breakpoint and up — on narrow screens columns will stack by design.

Checklist and quick fixes:

  • Verify every opening tag has a matching closing tag and that the label, the parent .col-, the .row, and the inner .col-* elements are nested correctly.
  • Put all three select controls inside the same .row (inside the .col- that follows the label) so they share the same horizontal space.
  • Keep inner column widths <= 12 total. Use col-xs-* or col-sm-* if side‑by‑side behavior is needed on smaller screens.
  • Inspect the DOM with browser devtools (Elements panel) to see where columns break out of the intended row.

Minimal corrected structure (adaptable to the desired column sizes):

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-md-4 control-label">Date of Birth</label>
    <div class="col-md-8">
      <div class="row">
        <div class="col-xs-5"><select class="form-control">...</select></div>
        <div class="col-xs-3"><select class="form-control">...</select></div>
        <div class="col-xs-4"><select class="form-control">...</select></div>
      </div>
    </div>
  </div>
</form>

If the selects still stack after fixing nesting, validate the HTML (an unclosed earlier tag often causes this) and temporarily add visible borders to the .col-* divs to confirm layout boundaries.

Recommended Answers

All 4 Replies

Member Avatar for JamesCherrill

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

Member Avatar for pty

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

Member Avatar for patk570

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.