Input group component

Extending Form Controls input box as per input text

Input groups are created using the class .input-group. Further, use the class .input-group-prepend to place the addons before the input, whereas use the class .input-group-append to place the addons after the input and wrap the text or icon in a <span> and apply the class .input-group-text on it for proper rendering and styling.

 

Ex.

<style>

    .bs-example{

        margin: 20px;       

    }

</style>

</head>

<body>

<div class="bs-example">

    <form>

        <div class="row">

            <div class="col-sm-4">

                <div class="input-group">

                    <div class="input-group-prepend">

                        <span class="input-group-text">

                            <span class="fa fa-user"></span>

                        </span>                   

                    </div>

                    <input type="text" class="form-control" placeholder="Username">

                </div>

            </div>

            <div class="col-sm-4">

                <div class="input-group">           

                    <input type="text" class="form-control" placeholder="Amount">

                    <div class="input-group-append">

                        <span class="input-group-text">.00</span>

                    </div>

                </div>

            </div>

            <div class="col-sm-4">

                <div class="input-group">

                    <div class="input-group-prepend">

                        <span class="input-group-text">$</span>

                    </div>

                    <input type="text" class="form-control" placeholder="US Dollar">

                    <div class="input-group-append">

                        <span class="input-group-text">.00</span>

                    </div>

                </div>

            </div>

        </div>

    </form>

</div>

</body>

 

Checkboxes and Radio Buttons Addons

Similarly, you can place checkbox or radio button within input group's addon instead of text.

Ex.

<style>

    .bs-example{

        margin: 20px;       

    }

</style>

</head>

<body>

<div class="bs-example">

    <form>

        <div class="row">

            <div class="col-sm-6">

                <div class="input-group">

                    <div class="input-group-prepend">

                        <span class="input-group-text">

                            <input type="checkbox">

                        </span>

                    </div>

                    <input type="text" class="form-control">

                </div>

            </div>

            <div class="col-sm-6">

                <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>

            </div>

        </div>

    </form>

</div>

</body>

Placing Multiple Inputs or Addons

You can also place multiple inputs side-by-side within an input group easily, like this:

Ex.

<style>

    .bs-example{

        margin: 20px;       

    }

</style>

</head>

<body>

<div class="bs-example">

    <form>

        <div class="input-group">

            <div class="input-group-prepend">

                <span class="input-group-text">Your Name</span>

            </div>

            <input type="text" class="form-control" placeholder="First name">

            <input type="text" class="form-control" placeholder="Last name">

        </div>

    </form>

</div>

</body>

Powered  by Codersarts