Bootstrap dropdown is not full width - css

Question

My bootstrap dropdown for some reason is nowhere near full width and I need it to be.
Here is an image of what Im talking about:
The country and city are bootstrap dropdowns which I have styled rather a lot to completely change the look. They are each inside a container row. They each take up 6 columns so that it is split in half. I just want them to take up their full half of the green bit. Here is my code.
HTML:
<div id="find-vegan-products-page" style="height:900px;">
<div class="form-background">
<div class="container-fluid" style="padding: 40px;">
<h1>Filter Your Search!</h1>
<form role="form">
<div class="row">
<div class="form-group col-sm-6">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle input-control no-box-shadow" type="button" data-toggle="dropdown">Country
</button>
<ul class="dropdown-menu">
<li>HTML
</li>
<li>CSS
</li>
<li>JavaScript
</li>
</ul>
</div>
</div>
<div class="form-group col-sm-6">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle input-control no-box-shadow" type="button" data-toggle="dropdown">City
</button>
<ul class="dropdown-menu">
<li>HTML
</li>
<li>CSS
</li>
<li>JavaScript
</li>
</ul>
</div>
</div>
</div>
</form>
</div>
</div>
CSS:
.input-control {
height: 5rem;
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom: 1px solid dimgray;
border-left-style: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
}
button.input-control:hover {
background-color: none;
background: none;
}
.btn-primary.active,
.btn-primary:active,
.open>.dropdown-toggle.btn-primary {
/* color: #fff; */
background-color: transparent;
border-color: transparent;
}
.btn:focus,
.btn:active {
outline: none !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
color: #fff;
background-color: transparent;
border-color: dimgray;
box-shadow: none;
}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
color: #fff;
background-color: transparent;
border-color: dimgray;
}
.btn {
font-weight: 100;
}
.btn-primary:hover {
color: #fff;
background-color: transparent;
border-color: dimgray;
}
dropdown > button {
background:none;
border:none;
box-shadow:none;
}
.form-background {
background: rgba(149, 246, 102, .5);
}
#find-vegan-products-page {
margin-top: 100px; /*separate the div from top of the page*/
padding: 100px; /*or whatever value to give the div space */
}
.btn.btn-default:focus {
border:none;
outline:0;
}
.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: white;
font-weight: 100;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: white;
opacity: 1;
font-weight: 100;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
color: white;
opacity: 1;
font-weight: 100;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: white;
font-weight: 100;
}
.form-control:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
color: white;
font-weight: 100;
}
How do I make the bootstrap dropdowns take up their full 6 columns in the bootstrap container? The only thing that will look different will be the bottom border will go the full width of the 6 container columns.

Answer 1

I did the following:
.input-control {
border:none; /* Remove border bottom */
}
.dropdown, .dropup {
border-bottom: 1px solid #696969; /* Add bottom border to drop down instead */
}
.dropdown-menu {
width:100%; /* Make drop down 100% width OPTIONAL */
}
I put an optional 100% width on the drop down menu incase you wanted the border to match.
UPDATE:
Having the button full width would help usability as well.
.input-control {
width:100%;
text-align:left;
}