Difference between input-group and form-group

What is the difference in use between the css classes input-group and form-group in Bootstrap?

Input groups are extended Form Controls. Using input groups you can easily prepend and append text or buttons to the text-based inputs. For example, you can add the $ symbol, @ for a Twitter username, or anything else as required.

Form groups are used to wrap labels and form controls in a div to get optimum spacing between the label and the control.

Therefore, use both form-group and input-group as required. Do wrap your label and input in a form-group tag. If any of your input field required to prepended/appended with text/button, wrap the control with input-group. Below is the example, combining both of them. Hope this helps

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<body>
    <div class="container-fluid justify-content-center">
        <form role="form" class="pt-3">
            <div class="form-group row">
                <label for="inputfield1" class="col-sm-2 control-label">Generic input</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputfield1" placeholder="Generic input..." />
                </div>
            </div><!-- .form-group -->
            <div class="form-group row">
                <label for="inputfield2" class="col-sm-2 control-label">Money value</label>
                <div class="input-group col-sm-10">
                    <span class="input-group-prepend input-group-text">$</span>
                    <input type="text" class="form-control" id="inputfield2" placeholder="Money value..." />
                    <span class="input-group-append input-group-text">.00</span>
                </div>
            </div><!-- .form-group -->
            <div class="form-group row">
                <label for="inputfield3" class="col-sm-2 control-label">Username</label>
                <div class="input-group col-sm-10">
                    <span class="input-group-prepend input-group-text">@</span>
                    <input type="text" class="form-control" id="inputfield3" placeholder="Username..." />
                </div>
            </div><!-- .form-group -->
        </form>
    </div>
</body>

I am upgrading the stylesheet of a ASP.NET webforms project to bootstrap. One noticeable difference, form-group will maximize the width of the control. input-group will only use the required width. For example, a row with a column 4 width:

<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <asp:UpdatePanel ID="UpdatePanel4" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label3" runat="server" Text="Professional Title" /><br />
                    <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true"
                        OnSelectedIndexChanged="ddlptitle_SelectedIndexChanged" AppendDataBoundItems="true"
                        CssClass="form-control" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
</div>

enter image description here

<div class="row">
    <div class="col-md-4">
        <div class="input-group">
            <asp:UpdatePanel ID="UpdatePanel4" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label3" runat="server" Text="Professional Title" /><br />
                    <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true"
                        OnSelectedIndexChanged="ddlptitle_SelectedIndexChanged" AppendDataBoundItems="true"
                        CssClass="form-control" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
</div>

enter image description here

Difference between input-group and form-group

Related

Recent Posts