Bootstrap 5 - Place Radio Buttons Inline and a Radio Input Group next to each other

Question

"Simple" problem, I'm trying to place a few radio buttons(inline) and a radio input group next to each other, on the same line. For some reason the input group goes to a new line.

Here is the code:

<div class="d-flex flex-wrap">
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="radioFilter" id="filter-none" checked>
        <label class="form-check-label" for="inlineRadio1">none</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="radioFilter" id="filter-1">
        <label class="form-check-label" for="inlineRadio2">filter 1</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="radioFilter" id="filter-2">
        <label class="form-check-label" for="inlineRadio2">filter 2</label>
    </div>
    <div class="input-group input-group-sm">
        <div class="input-group-text">
            <input class="form-check-input" type="radio" name="radioFilter">
        </div>
        <input type="text" class="form-control" aria-label="Text input with radio button">
    </div>
</div>

https://codeply.com/p/DAlKhU9atE

Thanks

Answer 1

Remove flex-wrap. Use text-nowrap to prevent wrapping labels...

<div class="d-flex">
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="radioFilter" id="filter-none" checked>
        <label class="form-check-label" for="inlineRadio1">none</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="radioFilter" id="filter-1">
        <label class="form-check-label text-nowrap" for="inlineRadio2">filter 1</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="radioFilter" id="filter-2">
        <label class="form-check-label text-nowrap" for="inlineRadio2">filter 2</label>
    </div>
    <div class="input-group input-group-sm">
        <div class="input-group-text">
            <input class="form-check-input" type="radio" name="radioFilter">
        </div>
        <input type="text" class="form-control" aria-label="Text input with radio button">
    </div>
</div>

Demo

Answer 2

Use the standard Bootstrap grid. Like so:

<div class="row">
    <div class="col-auto">
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="radioFilter" id="filter-none" checked>
            <label class="form-check-label" for="inlineRadio1">none</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="radioFilter" id="filter-1">
            <label class="form-check-label" for="inlineRadio2">filter 1</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="radioFilter" id="filter-2">
            <label class="form-check-label" for="inlineRadio2">filter 2</label>
        </div>
    </div>
    <div class="col-auto">
        <div class="input-group input-group-sm">
            <div class="input-group-text">
                <input class="form-check-input" type="radio" name="radioFilter">
            </div>
            <input type="text" class="form-control" aria-label="Text input with radio button">
        </div>
    </div>
</div>

col-auto auto-sizes the div to only take up as much space as needed. You can change that to just the other col- classes as needed to get the exact widths you want. See the Bootstrap documentation here: https://getbootstrap.com/docs/4.0/components/forms/#form-grid