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
With textarea
                      
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="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 vanity URL</label>
<div class="input-group mb-3">
  <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" id="basic-url" aria-describedby="basic-addon3">
</div>

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

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">With textarea</span>
  </div>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div>
                      
                  
@
@example.com
https://example.com/users/
$
.00
With textarea
                      
<div class="md-form input-group mt-0 mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon11">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon11">
</div>

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

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

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

<div class="md-form input-group mt-0 mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">With textarea</span>
  </div>
  <textarea class="form-control md-textarea" aria-label="With textarea"></textarea>
</div>
                      
                  

Input groups sizing

Small
Default
Large
                      
<div class="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" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
  </div>
  <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>

<div class="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-lg">
</div>
                      
                  
Small
Default
Large
                      
<div class="md-form input-group input-group-sm mt-0 mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm1">Small</span>
  </div>
  <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm1">
</div>

<div class="md-form input-group mt-0 mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default1">Default</span>
  </div>
  <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default1">
</div>

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

Multiple input groups

$ 0.00
$ 0.00
                      
<div class="input-group mb-3">
  <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="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>
                      
                  
$ 0.00
$ 0.00
                      
<div class="md-form input-group mt-0 mb-3">
  <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 mt-0">
  <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="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheckbox1">
      <label class="form-check-label" for="defaultCheckbox1">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input class="form-check-input filled-in" type="checkbox" value="" id="filledInCheckbox1">
      <label class="form-check-label" for="filledInCheckbox1">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
      <label class="form-check-label" for="exampleRadios1">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with radio button">
</div>
                      
                  
                      
<div class="md-form input-group mt-0 mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheckbox12">
      <label class="form-check-label" for="defaultCheckbox12">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<div class="md-form input-group mt-0 mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input class="form-check-input filled-in" type="checkbox" value="" id="filledInCheckbox19">
      <label class="form-check-label" for="filledInCheckbox19">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<div class="md-form input-group mt-0 mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios16" value="option16">
      <label class="form-check-label" for="exampleRadios16">
    </div>
  </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">
  <div class="input-group-prepend">
    <button class="btn btn-primary waves-effect m-0" type="button">Button</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>

<div class="md-form input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button class="btn btn-mdb-color waves-effect m-0" type="button">Button</button>
  </div>
</div>

<div class="md-form input-group">
  <div class="input-group-prepend">
    <button class="btn btn-unique waves-effect m-0" type="button">Button</button>
    <button class="btn btn-unique waves-effect m-0" type="button">Button</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>

<div class="md-form input-group">
  <div class="input-group-prepend">
    <button class="btn btn-info waves-effect m-0" type="button">Button</button>
  </div>
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button class="btn btn-info waves-effect m-0" type="button">Button</button>
  </div>
</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>