Sign in


Sign up


Bootstrap Input Group

Group of fields used for collecting data enetred by users. Usually containing buttons, text areas or other inputs. With this component your forms are attractive and easy to customize.


Basic example

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

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

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

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

Input groups sizing

Small
Large
                
<div class="md-form input-group input-group-sm mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
    </div>
    <input type="text" class="form-control py-0" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="md-form input-group input-group-lg">
    <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
    </div>
    <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>
                
            

Multiple input groups

$ 0.00
$ 0.00
                
<div class="md-form input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">$</span>
        <span class="input-group-text">0.00</span>
    </div>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>
<div class="md-form input-group">
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    <div class="input-group-append">
        <span class="input-group-text">$</span>
        <span class="input-group-text">0.00</span>
    </div>
</div>
                
            

Checkboxes and radio input groups MDB Pro component

                
<div class="md-form input-group mt-0">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <input type="checkbox" id="checkbox65" aria-label="Checkbox for following text input">
            <label class="pb-4 pl-4 mb-3 ml-1" for="checkbox65"></label>
        </span>
    </div>
    <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
<div class="md-form input-group mt-0">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <input type="radio" id="radio61" aria-label="Radio button for following text input">
            <label class="pb-4 pl-4 mb-3 ml-1" for="radio61"></label>
        </span>
    </div>
    <input type="text" class="form-control" aria-label="Text input with radio button">
</div>
                
            

Basic buttons input groups

                
<div class="md-form input-group">
    <span class="input-group-btn">
        <button class="my-0 btn btn-primary" 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="my-0 btn btn-primary" type="button">Go!</button>
    </span>
</div>
<div class="md-form input-group">
    <span class="input-group-btn">
        <button class="my-0 btn btn-default" type="button">Hate it</button>
    </span>
    <input type="text" class="form-control" placeholder="Product name">
    <span class="input-group-btn">
        <button class="my-0 btn btn-danger" 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 my-0" 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 my-0" 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-warning waves-effect my-0" 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-success waves-effect my-0" 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 my-0" 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 my-0" 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-rounded waves-effect my-0" 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-rounded waves-effect my-0" 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">
    <div class="input-group-prepend">
        <span class="input-group-text amber lighten-3 black-text" id="basic-addon9">@</span>
    </div>
    <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">
  <div class="input-group-prepend">
      <span class="input-group-text lime lighten-2 black-text">$</span>
  </div>
  <input type="text" class="form-control mt-0 lime-border" aria-label="Amount (to the nearest dollar)">
  <div class="input-group-append">
      <span class="input-group-text lime lighten-2 black-text">.00</span>
  </div>
</div>

<div class="input-group md-form form-sm form-3 pl-0">
    <div class="input-group-prepend">
        <span class="input-group-text red lighten-3 black-text">$</span>
        <span class="input-group-text red lighten-3 black-text">0.00</span>
    </div>
    <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">
    <div class="input-group-append">
        <span class="input-group-text purple lighten-3 black-text" id="basic-addon12">@example.com</span>
    </div>
</div>

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