• Light Version

  • Dark Version

  • RTL Version

Ericsson University
avatar
Sara Hopkins

Webdeveloper

Statistics

$545

27%

Friends

Ericsson University

Documentation

English
SpanishjapaneseFrance
Mark all as read

  • Campaign Holidayis nearly reach budget limit.

  • New admission 32in computer department.

  • 6th sem result 67%in computer department.

  • New Feedback 53for university assessment.

Mark all as read
George
ProfileSettings6InboxMessage
Need help?Sign out

Forms Basic example

Examples and usage guidelines for form control styles,layout options,and custom components for creating a wide variety of forms.

Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>s outside the input group.

@
@example.com
https://example.com/users/
$
.00
With textarea
<divclass="input-group mb-3"><divclass="input-group-prepend"><spanclass="input-group-text"id="basic-addon1">@</span></div><inputtype="text"class="form-control"placeholder="Username"aria-label="Username"aria-describedby="basic-addon1"></div><divclass="input-group mb-3"><inputtype="text"class="form-control"placeholder="Recipient's username"aria-label="Recipient's username"aria-describedby="basic-addon2"><divclass="input-group-append"><spanclass="input-group-text"id="basic-addon2">@example.com</span></div></div><labelfor="basic-url">Your vanity URL</label><divclass="input-group mb-3"><divclass="input-group-prepend"><spanclass="input-group-text"id="basic-addon3">https://example.com/users/</span></div><inputtype="text"class="form-control"id="basic-url"aria-describedby="basic-addon3"></div><divclass="input-group mb-3"><divclass="input-group-prepend"><spanclass="input-group-text">$</span></div><inputtype="text"class="form-control"aria-label="Amount (to the nearest dollar)"><divclass="input-group-append"><spanclass="input-group-text">.00</span></div></div><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text">With textarea</span></div><textareaclass="form-control"aria-label="With textarea"></textarea></div>

Sizing

Small
Default
Large
<divclass="input-group input-group-sm mb-3"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroup-sizing-sm">Small</span></div><inputtype="text"class="form-control"aria-label="Sizing example input"aria-describedby="inputGroup-sizing-sm"></div><divclass="input-group mb-3"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroup-sizing-default">Default</span></div><inputtype="text"class="form-control"aria-label="Sizing example input"aria-describedby="inputGroup-sizing-default"></div><divclass="input-group input-group-lg"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroup-sizing-lg">Large</span></div><inputtype="text"class="form-control"aria-label="Sizing example input"aria-describedby="inputGroup-sizing-lg"></div>

Checkboxes and radios

Place any checkbox or radio option within an input group’s addon instead of text.

<divclass="input-group mb-3"><divclass="input-group-prepend"><divclass="input-group-text"><inputtype="checkbox"aria-label="Checkbox for following text input"></div></div><inputtype="text"class="form-control"aria-label="Text input with checkbox"></div><divclass="input-group"><divclass="input-group-prepend"><divclass="input-group-text"><inputtype="radio"aria-label="Radio button for following text input"></div></div><inputtype="text"class="form-control"aria-label="Text input with radio button"></div>

Multiple inputs

While multiple <input>s are supported visually,validation styles are only available for input groups with a single <input>.

First and last name
<divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text">First and last name</span></div><inputtype="text"aria-label="First name"class="form-control"><inputtype="text"aria-label="Last name"class="form-control"></div>

Multiple addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

$0.00
$0.00
<divclass="input-group mb-3"><divclass="input-group-prepend"><spanclass="input-group-text">$</span><spanclass="input-group-text">0.00</span></div><inputtype="text"class="form-control"aria-label="Dollar amount (with dot and two decimal places)"></div><divclass="input-group"><inputtype="text"class="form-control"aria-label="Dollar amount (with dot and two decimal places)"><divclass="input-group-append"><spanclass="input-group-text">$</span><spanclass="input-group-text">0.00</span></div></div>

Button addons

<divclass="input-group mb-3"><divclass="input-group-prepend"><buttonclass="btn btn-outline-secondary"type="button"id="button-addon1">Button</button></div><inputtype="text"class="form-control"placeholder=""aria-label="Example text with button addon"aria-describedby="button-addon1"></div><divclass="input-group mb-3"><inputtype="text"class="form-control"placeholder="Recipient's username"aria-label="Recipient's username"aria-describedby="button-addon2"><divclass="input-group-append"><buttonclass="btn btn-outline-secondary"type="button"id="button-addon2">Button</button></div></div><divclass="input-group mb-3"><divclass="input-group-prepend"id="button-addon3"><buttonclass="btn btn-outline-secondary"type="button">Button</button><buttonclass="btn btn-outline-secondary"type="button">Button</button></div><inputtype="text"class="form-control"placeholder=""aria-label="Example text with two button addons"aria-describedby="button-addon3"></div><divclass="input-group"><inputtype="text"class="form-control"placeholder="Recipient's username"aria-label="Recipient's username with two button addons"aria-describedby="button-addon4"><divclass="input-group-append"id="button-addon4"><buttonclass="btn btn-outline-secondary"type="button">Button</button><buttonclass="btn btn-outline-secondary"type="button">Button</button></div></div>