Sign in


Sign up


Bootstrap Input Group


Basic example

@
@example.com
https://example.com/users/
$ .00
                
<div class="md-form input-group">
    <span class="input-group-addon" id="basic-addon1">@</span>
    <input type="text" class="form-control pt-0" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="md-form input-group">
    <input type="text" class="form-control pt-0" placeholder="Recipient's username" aria-describedby="basic-addon2">
    <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<label class="ml-3" for="basic-url">Your URL</label>
<div class="md-form input-group">
    <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
    <input type="text" class="form-control pt-0" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="md-form input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control pt-0" aria-label="Amount (to the nearest dollar)">
    <span class="input-group-addon">.00</span>
</div>
                
            

Input groups sizing

@

@
                
<div class="input-group input-group-lg">
    <span class="input-group-addon" id="sizing-addon1">@</span>
    <input type="text" class="form-control" placeholder="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="Username" aria-describedby="sizing-addon2">
</div>
                
            

Multiple input groups

$
$ 0.00
                
<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            <span class="input-group-addon">
                <input type="checkbox" id="checkbox69">
                <label for="checkbox69"></label>
            </span>
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control" aria-label="Text input with checkbox">
        </div>
    </div>
    <div class="col-lg-6">
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <span class="input-group-addon">0.00</span>
            <input type="text" class="form-control" aria-label="Text input with radio button">
        </div>
    </div>
</div>
                
            

Checkboxes and radio input groups MDB Pro component

                
<div class="input-group">
    <span class="input-group-addon">
        <input type="checkbox" id="checkbox65">
        <label for="checkbox65"></label>
   </span>
    <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
<div class="input-group">
    <span class="input-group-addon">
        <input type="radio" id="radio61">
        <label for="radio61"></label>
   </span>
    <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
                
            

Basic buttons input groups

                
<div class="md-form input-group">
    <span class="input-group-btn">
        <button class="btn btn-primary btn-lg" type="button">Go!</button>
    </span>
    <input type="search" class="form-control" placeholder="Search for...">
</div>
<div class="md-form input-group">
    <input type="search" class="form-control" placeholder="Search for...">
    <span class="input-group-btn">
        <button class="btn btn-primary btn-lg" type="button">Go!</button>
    </span>
</div>
<div class="md-form input-group">
    <span class="input-group-btn">
        <button class="btn btn-default btn-lg" type="button">Hate it</button>
    </span>
    <input type="text" class="form-control" placeholder="Product name">
    <span class="input-group-btn">
        <button class="btn btn-danger btn-lg" type="button">Love it</button>
    </span>
</div>
                
            


Material buttons input groups MDB Pro component

                
.input-group .form-control.added-padding-2 {
    padding-top: 4px;
}
.input-group .form-control.added-padding-3 {
    padding-top: 3px;
}
                
            
                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-4">

        <div class="md-form input-group">
            <span class="input-group-btn">
                <button class="btn btn-primary peach-gradient" type="button">Go!</button>
            </span>
            <input type="search" class="form-control added-padding-3" placeholder="Search for...">
        </div>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-4">

        <div class="md-form input-group">
            <input type="search" class="form-control added-padding-3" placeholder="Search for...">
            <span class="input-group-btn">
                <button class="btn btn-primary aqua-gradient" type="button">Go!</button>
            </span>
        </div>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->

<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-4">

        <div class="md-form input-group">
            <span class="input-group-btn">
                <button class="btn btn-outline-warningwaves-effect" type="button">Go!</button>
            </span>
            <input type="search" class="form-control added-padding-2" placeholder="Search for...">
        </div>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-4">

        <div class="md-form input-group">
            <input type="search" class="form-control added-padding-2" placeholder="Search for...">
            <span class="input-group-btn">
                <button class="btn btn-outline-successwaves-effect" type="button">Go!</button>
            </span>
        </div>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->

<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-8">

        <div class="md-form input-group">
            <span class="input-group-btn">
                <button class="btn btn-indigo btn-rounded" type="button">Hate it</button>
            </span>
            <input type="text" class="form-control added-padding-2" placeholder="Product name">
            <span class="input-group-btn">
                <button class="btn btn-pink btn-rounded" type="button">Love it</button>
            </span>
        </div>

        <div class="md-form input-group">
            <span class="input-group-btn">
                <button class="btn btn-outline-default btn-roundedwaves-effect" type="button">Hate it</button>
            </span>
            <input type="text" class="form-control added-padding-2" placeholder="Product name">
            <span class="input-group-btn">
                <button class="btn btn-outline-danger btn-roundedwaves-effect" type="button">Love it</button>
            </span>
        </div>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            

Colorful input groups MDB Pro component

@
$ .00
$ 0.00
@example.com
https://example.com/users/
                
.input-group.md-form.form-sm.form-4 input {
    border: 1px solid #bdbdbd;
}
.input-group.md-form.form-sm.form-4 input[type=text]:focus:not([readonly]).lime-border  {
    border: 1px solid #cddc39;
    box-shadow: none;
}
.input-group.md-form.form-sm.form-3 input {
    border: 1px solid #bdbdbd;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
.input-group.md-form.form-sm.form-3 input[type=text]:focus:not([readonly]).red-border  {
    border: 1px solid #ef9a9a;
    box-shadow: none;
}
.input-group.md-form.form-sm.form-3 input[type=text]:focus:not([readonly]).amber-border  {
    border: 1px solid #ffca28;
    box-shadow: none;
}
.input-group.md-form.form-sm.form-3 input[type=text]:focus:not([readonly]).blue-border  {
    border: 1px solid #64b5f6;
    box-shadow: none;
}
.input-group.md-form.form-sm.form-5 input {
    border: 1px solid #bdbdbd;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
.input-group.md-form.form-sm.form-5 input[type=text]:focus:not([readonly]).purple-border  {
    border: 1px solid #ce93d8;
    box-shadow: none;
}
                
            
                
<div class="input-group md-form form-sm form-3 pl-0">
    <span class="input-group-addon amber lighten-3 black-text" id="basic-addon9">@</span>
    <input type="text" class="form-control mt-0 amber-border" placeholder="Username" aria-describedby="basic-addon9">
</div>

<div class="input-group md-form form-sm form-4 pl-0">
  <span class="input-group-addon lime lighten-2 black-text">$</span>
  <input type="text" class="form-control mt-0 lime-border" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon lime lighten-2 black-text">.00</span>
</div>

<div class="input-group md-form form-sm form-3 pl-0">
    <span class="input-group-addon red lighten-3 black-text">$</span>
    <span class="input-group-addon red lighten-3 black-text">0.00</span>
    <input type="text" class="form-control mt-0 red-border" aria-label="Amount (to the nearest dollar)">
</div>

<div class="input-group md-form form-sm form-5 pl-0">
    <input type="text" class="form-control mt-0 purple-border" placeholder="Recipient's username" aria-describedby="basic-addon12">
    <span class="input-group-addon purple lighten-3 black-text" id="basic-addon12">@example.com</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group md-form form-sm form-3 pl-0"">
    <span class="input-group-addon blue lighten-3 black-text" id="basic-addon33">https://example.com/users/</span>
    <input type="text" class="form-control mt-0 blue-border" id="basic-url" aria-describedby="basic-addon33">
</div>