Bootstrap Dropdown styling

Question

I want to put two dropdown lists next to each other. So I have to rows in my form with two dropdown lists next to each other taking up the same width as the other inputs. I also want to keep the responsivnes. I have only been using vanilla Bootstrap v3.3.7. I have been messing around with the columns, but cant get my head around it. I would appriciate help on this matter from a helpful soul.

My code:

@using (Ajax.BeginForm("FormData", "Home", new AjaxOptions { //Lägg till Microsoft.jQuery.Unobtrusive.Ajax om du vill ha formulär utan postback HttpMethod = "POST"}, new { id = "form" })) { @Html.AntiForgeryToken()

<div class="form-horizontal">
  <h4>Arbetsplan</h4>
  <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) @* StartTime *@
  <div id="worktime">
    <div class="form-group">
      @* Hours *@ @Html.LabelFor(model => model.StartTimeHours, new {@class = "control-label col-xs-2 col-sm-2 col-md-2" })
      <div class="col-xs-5 col-sm-5 col-md-5">
        @Html.DropDownListFor(m => m.StartTimeHours, new SelectList(ViewBag.list, "Text", "Value"), new {@class = "form-control"}) @Html.ValidationMessageFor(model => model.StartTimeHours, "", new {@class = "text-danger"})
      </div>
      @* Minutes *@
      <div class="col-xs-5 col-sm-5 col-md-5">
        @Html.DropDownListFor(m => m.StartTimeMinutes, new SelectList(ViewBag.list2, "Text", "Value"), new {@class = "form-control"}) @Html.ValidationMessageFor(model => model.StartTimeMinutes, "", new {@class = "text-danger"})
      </div>

    </div>

    @* EndTime *@
    <div class="form-group">
      @Html.LabelFor(model => model.EndTimeHours, new { @class = "control-label col-xs-2 col-sm-2 col-md-2" }) @* Hours *@
      <div class="col-xs-5 col-sm-5 col-md-5">
        @Html.DropDownListFor(m => m.EndTimeHours, new SelectList(ViewBag.list, "Text", "Value"), new { @class = "form-control", id = "wishTime" }) @Html.ValidationMessageFor(model => model.EndTimeHours, "", new { @class = "text-danger" })
      </div>
      @* Minutes *@
      <div class="col-xs-5 col-sm-5 col-md-5">
        @Html.DropDownListFor(m => m.EndTimeMinutes, new SelectList(ViewBag.list2, "Text", "Value"), new { @class = "form-control", id = "wishTime" }) @Html.ValidationMessageFor(model => model.EndTimeMinutes, "", new { @class = "text-danger" })
      </div>
    </div>

    <div class="form-group">
      <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="Submit" id="submitBtn" class="btn btn-default" />
        <input type="button" value="Reset calender" id="clearCal" class="btn btn-default" />
      </div>
    </div>
  </div>
  }

It looks like this now:

Would like it to look something like this:

StartTime1 and EndTime1 should be on one row and StartTime2 and EndTime2 on another. If there is any thing else you would like to see let me know.

Thanks!! It work half way. any ides on how to make it look like the pic above?

With your cod examples I got it to work. there is a tiny step left. when the screen reaches under 990px, all the Titles jumps up and positions theme self above the input exept for the two dropdown lists titles. the stay at the side. is there a way for theme to also jump up. Heres som pics:

991px and above.

991px and under

EDIT:

Answer 1

You will find here a working example.

Basically the structure is below:

<form class="form-horizontal">

  <div class="form-group">
    <label class="col-sm-2 control-label"></label>
    <div class="col-sm-10">
      //input or select
    </div>
  </div>

  <div class="form-group">
    <label class="col-xs-12 col-sm-2 col-md-2 control-label"></label>
    <div class="col-xs-12 col-sm-5 col-md-5">
      //input or select
    </div>
    <div class="col-xs-12 col-sm-5 col-md-5">
      //input or select
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      // submit button
    </div>
  </div>
</form>

EDIT :

You have to change the classes :

1. col-xs-2 col-sm-2 col-md-2 for the label
2. col-xs-5 col-sm-5 col-md-5 for the dropdown lists

Currently the label / dropdown keep the same proportions because you set always the same value for xs sm and md.

I suggest you to set 12 for the label and 6 for the dropdown list for under 991px size screen.

Follow this link to see bootstrap size class prefix xs sm md lg and px associated.

EDIT :

Example of previous EDIT + Fix label going on right

To fix label going on right, you have to surround label with div containing the class="col-xs-12 col-sm-2 col-md-2"

<form class="form-horizontal">

  <div class="form-group">
    <label class="col-sm-2 control-label"></label>
    <div class="col-sm-10">
      //input or select
    </div>
  </div>

  <div class="form-group">
    <div class="col-xs-12 col-sm-2 col-md-2">
      <label class="control-label"></label>
    </div>
    <div class="col-xs-12 col-sm-5 col-md-5">
      //input or select
    </div>
    <div class="col-xs-12 col-sm-5 col-md-5">
      //input or select
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      // submit button
    </div>
  </div>
</form>

Answer 2

You have to but the second select element in a .col element in the same row as the first select element.

<div class="form-group">
    <label class="col-md-2">
        My Label
    </label>

   <!-- 1st select -->
    <div class="col-md-5">
      <select>
          <!-- options -->
      </select>
    </div>

   <!-- 2nd select -->
    <div class="col-md-5">
      <select>
          <!-- options -->
      </select>
    </div>
</div>

---

Update 1

At the end you have to make your input/select elements full width to match you design.

Answer 3

id your input field and fix it size if you are working on single screen(not-recommended) and if you are going to make it responsive then use col for screens. sorry for bad English. hope this will help.

If using col then do this.

<div class="form-group col-md-10">
<label class="col-md-2">
</label>
<div class="col-md-3">
  <select>
  </select>
  </div>

<div class="col-md-3">
  <select>
  </select>
</div>
</div>

Answer 4

I don't really know if this will solve your problem but in past works it worked for me, so try this : (Never tried it with form-group but tried with other similar things)

<div class="form-group">
 <div class="col-md-10">
  <div class="col-md-6"> 
   //input field
  </div>
  <div class="col-md-6"> 
   //input field
  </div>
 </div>
</div>

by the way this has nothing to do particularly with dropdowns, just the form.