Vertically STACK bootstrap input-group controls

Question

So the normal behavior of the input-group controls of bootstrap is horizontal stacking within the 100% of the container. What I'd like to do is stack them on top of each other so instead of having this:

I'll have this:

(If you wonder, the vertical image is done by paint :))

So far I have tried

<div class="input-group">
    <span class="input-group-addon">One</span>
    <select class="form-control"><option>1</option></select>
</div>
<div class="input-group">
    <span class="input-group-addon">One</span>
    <select class="form-control"><option>1</option></select>
</div>

And this (which I don't think is supported by bootstrap)

<div class="input-group">
    <div class="input-group">
        <span class="input-group-addon">One</span>
        <select class="form-control"><option>1</option></select>
    </div>
    <div class="input-group">
        <span class="input-group-addon">One</span>
        <select class="form-control"><option>1</option></select>
    </div>
</div>

As you can see, it's stacked as I want it to be - only that it is very small (not spanned over 100% of the container) AND the joined part has border-radius.

Must I tamper with/override the css styles of the input-group to achieve my goal is there any other preferred/supported way?

Answer 1

I just used this with Bootstrap 4. I added an additional CSS rule in order to remove the thick border between input fields.

.vertical-input-group .input-group:first-child {
    padding-bottom: 0;
}
.vertical-input-group .input-group:first-child * {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;    
}
.vertical-input-group .input-group:last-child {
    padding-top: 0;
}
.vertical-input-group .input-group:last-child * {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.vertical-input-group .input-group:not(:last-child):not(:first-child) {
    padding-top: 0;
    padding-bottom: 0;
}
.vertical-input-group .input-group:not(:last-child):not(:first-child) * {
    border-radius: 0;
}  
.vertical-input-group .input-group:not(:first-child) * {
    border-top: 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="vertical-input-group">
    <div class="input-group">
        <input type="text" class="form-control" id="sao" placeholder="Attention Of">
    </div>

    <div class="input-group">
        <input type="text" class="form-control" id="ad1" placeholder="Line 1">
    </div>
    
    <div class="input-group">
        <input type="text" class="form-control" id="ad2" placeholder="Line 2">
    </div>

    <div class="input-group">
        <input type="text" class="form-control" id="ad3" placeholder="Line 3">
    </div>
    <div class="input-group">
        <input type="text" class="form-control" id="ad4" placeholder="Line 4">
    </div>

    <div class="input-group">
        <input type="text" class="form-control" id="ad5" placeholder="City">
    </div>

    <div class="input-group">
        <input type="text" class="form-control" id="county" placeholder="County">
    </div>

    <div class="input-group">
        <input type="text" class="form-control" id="postalcode" placeholder="Postal Code">
    </div>

</div>

Vertical Aligned with thin border