bootstrap 4 input group with multiple button groups

Question

Looking for assistance get this input group all on one line as a group

Here is how it currently looks like and what im trying to achieve.

Note: the Active/Radio are not buttons but rather radio buttons.

sample fiddle here: https://jsfiddle.net/h8kdpejk/3/

<div class="container">
    <div class="col-md-6 col-lg-6">

      <div class="input-group">

        <input type="text" class="form-control" id="input-field" name="input-field" placeholder="Enter text here">

        <div class="input-group-btn">

            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                <label class="btn btn-secondary active">
                    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
                </label>
                <label class="btn btn-secondary">
                    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
                </label>
                <button type="submit" class="btn btn-primary dropdown-toggle submit" data-toggle="dropdown">Submit</button>
                <div class="dropdown-menu">
                    <a id="dns" class="dropdown-item" href="javascript:void(0);">link 1</a>
                    <a id="file" class="dropdown-item" href="javascript:void(0);">link 2</a>
                </div>
            </div>

            </div>

      </div>

    </div>
</div>

Answer 1

You can add css display: flex !important; for btn-group. In a stable version of bootstrap there is a special class d-flex.

Demo: https://jsfiddle.net/d_potapov/h8kdpejk/29/