Menu
What is the difference in use between the css classes input-group and form-group in Bootstrap?
450
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.
The . input-group class is a container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text". Use . input-group-prepend to add the help text in front of the input, and . input-group-append to add it behind the input.
A FormGroup aggregates the values of each child FormControl into one object, with each control name as the key. It calculates its status by reducing the status values of its children. For example, if one of the controls in a group is invalid, the entire group becomes invalid.
form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies margin-bottom , but it picks up additional styles in . form-inline as needed.
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> 
<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> 
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
