dotvim/vim/UltiSnips/html_bootstrap4_components-input_group.snippets

# Input Group
# Input Group - Bootstrap 4
snippet iptg
<div class="input-group">
    <span class="input-group-addon" id="${2:basic-addon1}">@</span>
    <input type="text" class="form-control" placeholder="${1:Username}" aria-describedby="${2:basic-addon1}">
</div>
<br>
<div class="input-group">
    <input type="text" class="form-control" placeholder="${1:Recipient's username}" aria-describedby="${2:basic-addon2}">
    <span class="input-group-addon" id="${2:basic-addon2}">.00</span>
</div>
<br>
<label for="basic-url">${3:Your vanity URL}</label>
<div class="input-group">
    <span class="input-group-addon" id="${2:basic-addon3}">https://example.com/users/</span>
    <input type="text" class="form-control" id="basic-url" aria-describedby="${2:basic-addon3}">
</div>
<br>
<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    <span class="input-group-addon">.00</span>
</div>
endsnippet

# Input Group Sizing - Bootstrap 4
snippet iptgsz
<div class="input-group input-group-lg">
    <span class="input-group-addon" id="sizing-addon1">@</span>
    <input type="text" class="form-control" placeholder="${1:Username}" aria-describedby="sizing-addon1">
</div>
<br>
<div class="input-group">
    <span class="input-group-addon" id="sizing-addon2">@</span>
    <input type="text" class="form-control" placeholder="${1:Username}" aria-describedby="sizing-addon2">
</div>
<br>
<div class="input-group input-group-sm">
    <span class="input-group-addon" id="sizing-addon3">@</span>
    <input type="text" class="form-control" placeholder="${1:Username}" aria-describedby="sizing-addon3">
</div>
endsnippet

# Checkboxes and radio addons - Bootstrap 4
snippet iptgadd
<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            <span class="input-group-addon">
                <input type="checkbox" aria-label="${1:Checkbox for following text input}">
            </span>
            <input type="text" class="form-control" aria-label="${1:Text input with checkbox}">
        </div>
    </div>
    <div class="col-lg-6">
        <div class="input-group">
            <span class="input-group-addon">
                <input type="radio" aria-label="${1:Radio button for following text input}">
            </span>
            <input type="text" class="form-control" aria-label="${1:Text input with radio button}">
        </div>
    </div>
</div>
endsnippet

# Buttons addons - Bootstrap 4
snippet iptbtnadd
<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            <span class="input-group-btn">
                <button class="btn btn-secondary" type="button">Go!</button>
            </span>
            <input type="text" class="form-control" placeholder="${1:Search for...}">
        </div>
    </div>
    <div class="col-lg-6">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="${1:Search for...}">
            <span class="input-group-btn">
                <button class="btn btn-secondary" type="button">Go!</button>
            </span>
        </div>
    </div>
</div>
endsnippet

# Buttons w/ dropdowns - Bootstrap 4
snippet iptbtnwdd
<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            <div class="input-group-btn">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Action
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="${1:#}">${2:Action}</a>
                    <a class="dropdown-item" href="${1:#}">${2:Another action}</a>
                    <a class="dropdown-item" href="${1:#}">${2:Something else here}</a>
                    <div role="separator" class="dropdown-divider"></div>
                    <a class="dropdown-item" href="${1:#}">${2:Separated link}</a>
                </div>
            </div>
            <input type="text" class="form-control" aria-label="${1:Text input with dropdown button}">
        </div>
    </div>
    <div class="col-lg-6">
        <div class="input-group">
            <input type="text" class="form-control" aria-label="${1:Text input with dropdown button}">
            <div class="input-group-btn">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Action
                </button>
                <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item" href="${1:#}">${2:Action}</a>
                    <a class="dropdown-item" href="${1:#}">${2:Another action}</a>
                    <a class="dropdown-item" href="${1:#}">${2:Something else here}</a>
                    <div role="separator" class="dropdown-divider"></div>
                    <a class="dropdown-item" href="${1:#}">${2:Separated link}</a>
                </div>
            </div>
        </div>
    </div>
</div>
endsnippet

# Segmented buttons - Bootstrap 4
snippet iptbtnseg
<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            <div class="input-group-btn">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Action
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="${2:#}">${3:Action}</a>
                    <a class="dropdown-item" href="${2:#}">${3:Another action}</a>
                    <a class="dropdown-item" href="${2:#}">${3:Something else here}</a>
                    <div role="separator" class="dropdown-divider"></div>
                    <a class="dropdown-item" href="${2:#}">${3:Separated link}</a>
                </div>
            </div>
            <input type="text" class="form-control" aria-label="${1:Text input with dropdown button}">
        </div>
    </div>
    <div class="col-lg-6">
        <div class="input-group">
            <input type="text" class="form-control" aria-label="${1:Text input with dropdown button}">
            <div class="input-group-btn">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Action
                </button>
                <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item" href="${2:#}">${3:Action}</a>
                    <a class="dropdown-item" href="${2:#}">${3:Another action}</a>
                    <a class="dropdown-item" href="${2:#}">${3:Something else here}</a>
                    <div role="separator" class="dropdown-divider"></div>
                    <a class="dropdown-item" href="${2:#}">${3:Separated link}</a>
                </div>
            </div>
        </div>
    </div>
</div>
endsnippet