Bootstrap column width adjustments - css

Question

I am new to using Bootstrap. I tried adjusting a 3-coulmn row to fit, with the last column divided into another 3, but it overlaps and having difficulty in making it look right.
My cshtml for the 1st row:
<div class="row">
<div class="col-md-4 col-sm-4">
<strong>Last Name</strong> <span class="required">*</span>
#Html.TextBoxFor(m => m.Patient_Lastname, new { #class = "text-primary", required = "required" })
</div>
<div class="col-md-4 col-sm-4">
<strong>First Name</strong> <span class="required">*</span>
#Html.TextBoxFor(m => m.Patient_Firstname, new { #class = "text-primary", required = "required" })
</div>
<div class="col-md-1 col-sm-1">
<strong>birth</strong> <span class="required">*</span>
#Html.DropDownListFor(m => m.YearOfBirth, Enumerable.Range(1900, 119).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }),
"--Year--", new { #class = "form-control", style = "width: 90px; height:30px;", required = "required" })
</div>
<div class="col-md-1 col-sm-1">
<strong>Month</strong> <span class="required">*</span>
#Html.DropDownListFor(m => m.YearOfBirth, Enumerable.Range(1, 12).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }),
"--Month--", new { #class = "form-control", style = "width: 90px; height:30px;", required = "required" })
</div>
<div class="col-md-2 col-sm-2">
<strong>Day</strong> <span class="required">*</span>
#Html.DropDownListFor(m => m.YearOfBirth, Enumerable.Range(1, 31).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }),
"--Day--", new { #class = "form-control", style = "width: 80px; height:30px;", required = "required" })
</div>
</div>
The 2nd and 3rd row are straight forward with col-md-4
Could you help me fix this ?
TIA
Ron.

Answer 1

I think the problem is the input filled width is bigger than available try resizing it.

Answer 2

There is no fixed layout you have to follow so that your screen will look nice automatically! It's your job to try and experiment what's the best to fit your need.
Obviously there is no way for col-sm-1 to fit a dropdown perfectly so you have to think of different layouts for different breakpoints. And bootstrap has many nice CSS classes you can use out of the box already for that purpose.
Extra Small Devices
For extra small devices, you might still be able to put year, month and day dropdown in a single row.
HTML Structure
<form>
<div class="form-row">
<div class="form-group">Last Name Label & Input</div>
<div class="form-group">First Name Label & Input</div>
<div class="form-group">
<div class="form-row">
<div class="form-group col">Year Label & Input</div>
<div class="form-group col">Month Label & Input</div>
<div class="form-group col">Day Label & Input</div>
</div>
</div>
</div>
</form>
I used .form-row here instead of .row because it gives you tighter gutters between columns.
.form-group is used to give each input group a nice margin-bottom.
Use of .col is to give you auto width.
How it looks like
Now you have a layout that works for extra small devices. You kind of start building up from this layout for each different devices with different screen sizes and add necessary CSS classes.
Small Devices
For small devices, you might want to put last name and first name input as 2 columns in a row.
HTML Structure
<form>
<div class="form-row">
<div class="form-group col-sm-6">Last Name Label & Input</div>
<div class="form-group col-sm-6">First Name Label & Input</div>
<div class="form-group col-sm-12">
<div class="form-row">
<div class="form-group col">Year Label & Input</div>
<div class="form-group col">Month Label & Input</div>
<div class="form-group col">Day Label & Input</div>
</div>
</div>
</div>
</form>
See those .col-sm-* classes are added?
How it looks like
...
...
...
Extra Large Devices
HTML Structure
<form>
<div class="form-row">
<div class="form-group col-sm-6 col-xl-4">Last Name Label & Input</div>
<div class="form-group col-sm-6 col-xl-4">First Name Label & Input</div>
<div class="form-group col-sm-12 col-xl-4">
<div class="form-row">
<div class="form-group col">Year Label & Input</div>
<div class="form-group col">Month Label & Input</div>
<div class="form-group col">Day Label & Input</div>
</div>
</div>
</div>
</form>
How it looks like