5.input groups

• basic input groups

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">@</span>
    </div>
    <input class="form-control" type="text" placeholder="Username">
</div>

<br>

<div class="input-group">
    <input class="form-control" type="text" placeholder="Username">
    <div class="input-group-append">
        <span class="input-group-text">@something.com</span>
    </div>
</div>

<br>

<label for="basic-url">Custom URL</label>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">https://something.com/member/</span>
    </div>
    <input class="form-control" type="text">
</div>

<br>

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">$</span>
    </div>
    <input class="form-control" type="text">
    <div class="input-group-append">
        <span class="input-group-text">.00</span>
    </div>
</div>

• checkbox

        <div class="input-group">
            <div class="input-group-prepend">
                <div class="input-group-text">
                    <input type="checkbox">
                </div>
            </div>
            <input class="form-control" type="text">
        </div>

• radio

<div class="input-group">
	<div class="input-group-prepend">
		<span class="input-group-text">
			<input type="radio">
		</span>
	</div>
	<input type="text" class="form-control">
</div>

• multiple inputs

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text" id="">Name & Email</span>
    </div>
    <input class="form-control" type="text" placeholder="Full Name">
    <input class="form-control" type="email" placeholder="Email">
</div>

• button addons

<div class="input-group">
    <input class="form-control" type="text" placeholder="Find By Name...">
    <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">Search</button>
    </div>
</div>