Josephin Doe

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

Share your thoughts

#### General Elements

##### Input Types

##### Code Explanation For Input Types

    			                      	<note> This Code Write inside <form> tag

    									/* For Email Address */

    									<div class="form-group">
    										<label for="exampleInputEmail1" class="form-control-label">Email address</label>
    										<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    										<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    									</div>

    									/* For Password */

    									<div class="form-group">
    										<label for="exampleInputPassword1" class="form-control-label">Password</label>
    											<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    									</div>

    									/* For Dropdown */

    									<div class="form-group">
    										<label for="exampleSelect1" class="form-control-label">Example select</label>
    											<select class="form-control" id="exampleSelect1">
    												<option>1</option>
    												<option>2</option>
    												<option>3</option>
    												<option>4</option>
    												<option>5</option>
    											</select>
    									</div>

    									/* for multiple select */

    									<div class="form-group">
    										<label for="exampleSelect2" class="form-control-label">Example multiple select</label>
    											<select multiple class="form-control multiple-select" id="exampleSelect2">
    												<option>1</option>
    												<option>2</option>
    												<option>3</option>
    												<option>4</option>
    												<option>5</option>
    											</select>
    									</div>

    									/* for textarea */

    									<div class="form-group">
    										<label for="exampleTextarea" class="form-control-label">Example textarea</label>
    											<textarea class="form-control" id="exampleTextarea" rows="4"></textarea>
    									</div>

    									/* For Radio Button */

    									<fieldset class="form-group">
    										/* Checked Radio Button*/
    										<div class="form-check">
    											<label for="optionsRadios1" class="form-check-label">
    												<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" valu6="option1" checked>
    													Option one is this and that—be sure to include why it's great
    											</label>
    										</div>

    										/* Not Checked Radio Button*/

    										<div class="form-check">
    											<label for="optionsRadios2" class="form-check-label">
    												<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
    													Option two can be something else and selecting it will deselect option one
    												</label>
    										</div>

    										/* Disable Radio Button */

    										<div class="form-check disabled">
    											<label for="optionsRadios3" class="form-check-label">
    												<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    													Option three is disabled
    											</label>
    										</div>
    									</fieldset>

    									/* use for multiple checkbox */

    									<div class="form-check">
    										<label for="chkme" class="form-check-label">
    											<input type="checkbox" class="form-check-input" id="chkme">Check me out
    										</label>
    									</div>
    										<div class="form-check">
    											<label class="form-check-label">
    												<input class="form-check-input" type="checkbox">
    													Option one is this and that—be sure to include why it's great
    											</label>
    										</div>

    									/* use for disable checkbox */

    									<div class="form-check disabled">
    										<label class="form-check-label">
    											<input class="form-check-input" type="checkbox" disabled>
    												Option two is disabled
    											</label>
    										</div>
    									<button type="submit" class="btn btn-success waves-effect waves-light">Submit
    									</button>

Email address We'll never share your email with anyone else.
Password
Example select
Example multiple select
Example textarea
Radio buttons
Option one is this and that—be sure to include why it's great
Option two can be something else and selecting it will deselect option one
Option three is disabled
Check me out
Option one is this and that—be sure to include why it's great
Option two is disabled

##### Textual Inputs

##### Code Explanation For Textual Input Types

                          	<note> This Code Write inside <form> tag

    						/* use for text textual input */

    						<div class="form-group row">
    							<label for="example-text-input" class="col-xs-2 col-form-label form-control-label">Text<label>
    								<div class="col-sm-10">
    									<input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
    								</div>
    						</div>

    						/* use for search textual input */

    						<div class="form-group row">
    							<label for="example-search-input" class="col-xs-2 col-form-label form-control-label">Search</label>
    							<div class="col-sm-10">
    								<input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
    							</div>
    						</div>

    						/* use for email textual input */

    						<div class="form-group row">
    							<label for="example-email-input" class="col-xs-2 col-form-label form-control-label">Email</label>
    							<div class="col-sm-10">
    								<input class="form-control" type="email" value="[email protected]" id="example-email-input">
    							</div>
    						</div>

    						/* use for Url textual input */

    						<div class="form-group row">
    							<label for="example-url-input" class="col-xs-2 col-form-label form-control-label">URL</label>
    							<div class="col-sm-10">
    								<input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
    							</div>
    						</div>

    						/* use for Telephone textual input */

    						<div class="form-group row">
    							<label for="example-tel-input" class="col-xs-2 col-form-label form-control-label">Telephone</label>
    							<div class="col-sm-10">
    								<input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
    							</div>
    						</div>

    						/* use for Password textual input */

    						<div class="form-group row">
    							<label for="example-password-input" class="col-xs-2 col-form-label form-control-label">Password</label>
    							<div class="col-sm-10">
    								<input class="form-control" type="password" value="hunter2" id="example-password-input">
    							</div>
    						</div>

    						/* use for Static Control textual input */

    						<div class="form-group row">
    							<label class="col-sm-2 col-form-label form-control-label">Static Control</label>
    							<div class="col-sm-10">
    								<p class="form-control-static">[email protected]</p>
    							</div>
    						</div>

    						/* use for Number textual input */

    						<div class="form-group row">
    							<label for="example-number-input" class="col-xs-2 col-form-label form-control-label">Number</label>
    							<div class="col-sm-10">
    								<input class="form-control" type="number" value="42" id="example-number-input">
    							</div>
    						</div>

    						/* use for Date and Time textual input */

    						<div class="form-group row">
    							<label for="example-datetime-local-input" class="col-xs-2 col-form-label form-control-label">Date and time</label>
    							<div class="col-sm-10">
    								<input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
    							</div>
    						</div>

    						/* use for Date textual input */

    						<div class="form-group row">
    							<label for="example-date-input" class="col-xs-2 col-form-label form-control-label">Date</label>
    							<div class="col-sm-10">
    								<input class="form-control" type="date" value="2011-08-19" id="example-date-input">
    							</div>
    						</div>

    						/* use for Month textual input */

    						<div class="form-group row">
    							<label for="example-month-input" class="col-xs-2 col-form-label form-control-label">Month</label>
    							<div class="col-sm-10">
    								<input class="form-control" type="month" value="2011-08" id="example-month-input">
    							</div>
    						</div>

    						/* use for Week textual input */

    						<div class="form-group row">
    							<label for="example-week-input" class="col-xs-2 col-form-label form-control-label">Week</label>
    							<div class="col-sm-10">
    								<input class="form-control" type="week" value="2011-W33" id="example-week-input">
    							</div>
    						</div>

    						/* use for Time textual input */

    						<div class="form-group row">
    							<label for="example-time-input" class="col-xs-2 col-form-label form-control-label">Time</label>
    							<div class="col-sm-10">
    								<input class="form-control" type="time" value="13:45:00" id="example-time-input">
    							</div>
    						</div>

    						/* use for Color textual input */

    						<div class="form-group row">
    							<label for="example-color-input" class="col-xs-2 col-form-label form-control-label">Color</label>
    							<div class="col-sm-10">
    								<input type="color" class="" name="favcolor" value="#1b8bf9" id="example-color-input">
    							</div>
    						</div>

    						/* use for File Upload Textual */

    						<div class="form-group row">
    							<label for="file" class="col-md-2 col-form-label form-control-label">File input</label>
    							<div class="col-md-9">
    								<label for="file" class="custom-file">
    									<input type="file" id="file" class="custom-file-input">
    									<span class="custom-file-control"></span>
    								</label>
    							</div>
    						</div>

Text
Search
Email
URL
Telephone
Password
Static Control

[email protected]

Number
Date and time
Date
Month
Week
Time
Color

note : `color` Attribute Not working in safari

File input

##### Validation with Helper

##### Code Explanation for Validation with helper

    				                      /* for input with success */

    										<div class="form-group has-success">
    										    <label class="form-control-label" for="inputSuccess1">Input with success</label>
    										        <input type="text" class="form-control form-control-success" id="inputSuccess1">
    										            <div class="form-control-feedback">Success! You've done it.</div>
    										                <small class="form-text text-muted">Example help text that remains unchanged.</small>
    										</div>

    										/* for input with warning */

    										<div class="form-group has-warning">
    										    <label class="form-control-label" for="inputWarning1">Input with warning</label>
    										        <input type="text" class="form-control form-control-warning" id="inputWarning1">
    										            <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
    										                <small class="form-text text-muted">Example help text that remains unchanged.</small>
    										</div>

    										/* for input with danger */

    										<div class="form-group has-danger">
    										    <label class="form-control-label" for="inputDanger1">Input with danger</label>
    										        <input type="text" class="form-control form-control-danger" id="inputDanger1">
    										            <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
    										                <small class="form-text text-muted">Example help text that remains unchanged.</small>
    										</div>

    										/* for checkbox */

    										<div class="form-group">
    											<div class="checkbox-color checkbox-primary">
    												<input id="checkbox1" type="checkbox" checked="checked">
    													<label for="checkbox1" class="text-primary">primary</label>
    											</div>
    											<div class="checkbox-color checkbox-success">
    												<input id="checkbox2" type="checkbox" checked="checked">
    													<label for="checkbox2" class="text-success">Success</label>
    											</div>
    											<div class="checkbox-color checkbox-danger">
    												<input id="checkbox3" type="checkbox" checked="checked">
    													<label for="checkbox3" class="text-danger">Danger</label>
    											</div>
    										</div>

Input with success
Success! You've done it.
Example help text that remains unchanged.
Input with warning
Shucks, check the formatting of that and try again.
Example help text that remains unchanged.
Input with danger
Sorry, that username's taken. Try another?
Example help text that remains unchanged.
primary
Success
Danger

##### Validation

##### Code Explanation for Validation

    	                      	/* for input success */

    							<div class="form-group row">
    							    <div class="col-md-2 txt-success">
    							    	<label for="InputSuccess" class="form-control-label">Success</label>
    							    </div>
    							    <div class="col-md-10">
    							    	<input type="text" class="form-control input-success" id="InputSuccess">
    							    </div>
    							</div>

    							/* for input Warning */

    							<div class="form-group row">
    							    <div class="col-md-2 txt-warning">
    							    	<label for="InputWarning" class="form-control-label">Warning</label>
    							    </div>
    							    <div class="col-md-10">
    							    	<input type="text" class="form-control input-warning" id="InputWarning" ></div>
    							</div>

    							/* for input Danger */

    							<div class="form-group row">
    							    <div class="col-md-2 txt-danger">
    							    	<label for="InputDanger" class="form-control-label">Danger</label>
    							    </div>
    							    <div class="col-md-10">
    							    	<input type="text" class="form-control input-danger" id="InputDanger"></div>
    							</div>

    							/* for input with success */

    							<div class="form-group row">
    							    <div class="col-md-2 txt-success">
    							    	<label class="form-control-label">Input with success</label>
    							    </div>
    							    <div class="col-md-10">
    							        <input type="text" class="form-control input-success" id="inputWithSuccess">
    							            <i class="fa fa-check input-icon txt-success"></i>
    							    </div>
    							</div>

    							/* for input with warning */

    							<div class="form-group row">
    							    <div class="col-md-2 txt-warning">
    							    	<label class="form-control-label">Input with warning</label>
    							    </div>
    							    <div class="col-md-10">
    									<input type="text" class="form-control input-warning" id="inputWithWarning">
    									<i class="fa fa-exclamation-triangle input-icon txt-warning"></i>
    								</div>
    							</div>

    							/* for input with danger */

    							<div class="form-group row">
    							    <div class="col-md-2 txt-danger">
    							    	<label class="form-control-label">Input with Danger</label>
    							    </div>
    							    <div class="col-md-10">
    									<input type="text" class="form-control input-danger" id="inputWithDanger">
    									<i class="fa fa-times input-icon txt-danger"></i>
    								</div>
    							</div>

    							/* for input By Checkbox */

    							<div class="form-group row">
    								<div class="col-md-2">
    									<label for="chkcustom" class="form-control-label">Checkbox</label>
    								</div>
    								<div class="col-md-10 has-success">
    									<label class="custom-control custom-checkbox">
    										<input type="checkbox" class="custom-control-input">
    										<span class="custom-control-indicator"></span>
    										<span class="custom-control-description">Check this custom checkbox</span>
    									</label>
    								</div>
    							</div>

    							/* for input By Radio */

    							<div class="form-group row">
    								<div class="col-md-2">
    									<label for="radio1" class="form-control-label">Radio Button</label>
    								</div>
    								<div class="col-md-10 has-danger">
    									<label class="custom-control custom-radio">
    										<input id="radio1" name="radio" type="radio" class="custom-control-input">
    										<span class="custom-control-indicator"></span>
    										<span class="custom-control-description">Toggle this custom radio</span>
    									</label>
    								</div>
    							</div>

Success
Warning
Danger
Input with success
Input with warning
Input with Danger
Checkbox
Check this custom checkbox
Radio Button
Toggle this custom radio

##### Input Sizes

##### Code Explanation for Input Sizes

    				                      /* use for small input size */

    										<div class="form-group row">
    										    <label for="InputSmall" class="col-md-2 form-control-label">Small</label>
    										        <div class="col-md-10">
    										        	<input type="text" class="form-control form-control-sm" id="InputSmall" placeholder="form-control-sm">
    										        </div>
    										</div>

    										/* use for Normal input size */

    										<div class="form-group row">
    											<div class="col-md-2">
    												<label for="InputNormal" class="form-control-label">Normal</label>
    											</div>
    											<div class="col-md-10">
    												<input type="text" class="form-control" id="InputNormal"  placeholder="Normal">
    											</div>
    										</div>

    										/* use for Large input size */

    										<div class="form-group row">
    											<div class="col-md-2">
    												<label for="InputLarge" class="form-control-label col-form-label-lg">Large</label>
    											</div>
    											<div class="col-md-10">
    												<input type="text" class="form-control form-control-lg" id="InputLarge"  placeholder="form-control-lg">
    											</div>
    										</div>

    										/* Grid Sizes */

    										/* use for col-xs-3 */

    										<div class="form-group row">
    											<div class="col-md-2">
    												<label for="InputLarge" class="form-control-label">Grid</label>
    											</div>
    											<div class="col-xs-3">
    												<input type="text" class="form-control" placeholder=".col-xs-3">
    											</div>
    										</div>

    										/* use for col-xs-6 */

    										<div class="form-group row">
    											<div class="col-md-2"></div>
    											<div class="col-xs-6">
    												<input type="text" class="form-control" placeholder=".col-xs-6">
    											</div>
    										</div>

    										/* use for col-xs-9 */

    										<div class="form-group row">
    											<div class="col-md-2"></div>
    											<div class="col-xs-9">
    												<input type="text" class="form-control" placeholder=".col-xs-9">
    											</div>
    										</div>

Small
Normal
Large
Grid

##### Basic Form

##### Code Explanation for Basic Form

    			                      <note>Write this code inside <form> tag

    									/* For Email Address*/

    									<div class="form-group">
    									    <label for="exampleInputEmail" class="form-control-label">Email address</label>
    									        <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email">
    									</div>

    									/* For Password*/

    									<div class="form-group">
    									    <label for="exampleInputPassword" class="form-control-label">Password</label>
    									        <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
    									</div>

    									/* For checkbox */

    									<div class="form-group">
    									    <div class="checkbox checkbox-primary" id="chkremember">
    									            <input type="checkbox">
    									                <label>Remember me</label>
    									    </div>
    									</div>

    									/* for submit button */

    									<button type="submit" class="btn btn-success waves-effect waves-light">Sign in
    									</button>

Individual form controls automatically receive some global styling. All textual `<input>`, `<textarea>`, and `<select>` elements with `.form-control` are `width: 100%;` by default.Labels and controls in `.form-group` for optimum spacing.

Email address
Password
Remember me

##### Horizontal Form

##### Code Explanation for Horizontal Form

    			                      	<note>Write this code inside <form> tag

    									/* For Email Address*/

    									<div class="form-group row">
    										<label for="h-email" class="col-md-2 col-form-label form-control-label">Email</label>
    										<div class="col-md-10">
    											<input type="email" id="h-email" class="form-control" placeholder="Email">
    										</div>
    									</div>

    									/* For Password*/

    									<div class="form-group row">
    										<label for="h-pwd" class="col-md-2 col-form-label form-control-label">Password</label>
    										<div class="col-md-10">
    											<input id="h-pwd" type="password" class="form-control" placeholder="Password">
    										</div>
    									</div>

    									/* For Confirm Password*/

    									<div class="form-group row">
    										<label for="h-re-pwd" class="col-md-2 col-form-label form-control-label">Confirm Password</label>
    										<div class="col-md-10">
    											<input id="h-re-pwd" type="password" class="form-control" placeholder="Re Enter Password">
    										</div>
    									</div>

    									/* For checkbox */

    									<div class="form-group row">
    										<div class="checkbox checkbox-primary">
    											<div class="col-md-10">
    												<input type="checkbox" id="chkremeberme">
    												<label for="chkremeberme">Remember me</label>
    											</div>
    										</div>
    									</div>

    									/* for submit button */

    									<div class="form-group row">
    										<div class="col-md-9">
    											<button type="submit" class="btn btn-primary waves-effect waves-light">
    												Sign in
    											</button>
    										</div>
    									</div>

Bootstrap4 dropped the `.form-horizontal` class requirement.so we not need to add `.form-horizontal`class ..form-group no longer applies styles from the .row via mixin, so .row is now required for horizontal grid layouts

Email
Password
Confirm Pwd
Remember me

##### Inline Form

Add `.form-inline` to your form (which doesn't have to be a `<form>`) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

##### Hidden labels

##### Code Explanation for Hidden Labels

    					                      	/* Hidden Labels*/

    												<form class="form-inline">
    													<div class="form-group">
    														<label class="sr-only form-control-label" for="exampleInputEmail3">Email address</label>
    															<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
    													</div>
    													<div class="form-group">
    														<label class="sr-only form-control-label" for="exampleInputPassword3">Password</label>
    															<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
    													</div>
    													<div class="form-check">
    														<label class="form-check-label" for="exampleremember">
    																<input class="form-check-input" type="checkbox" id="exampleremember">Remember me
    														</label>
    													</div>
    													<button type="submit" class="btn btn-primary waves-effect waves-light">Sign in</button>
    												</form>

Email address
Password
Remember me

##### Inline labels

##### Code Explanation for Inline Labels

    					                      	/* Inline Labels*/

    											<form class="form-inline">

    												<div class="form-group">
    													<label for="inline2mail" class="form-control-label">Email address</label>
    														<input id="inline2mail" type="email" class="form-control"  placeholder="Enter email">
    												</div>
    												<div class="form-group">
    													<label for="inline2pwd" class="form-control-label">Password</label>
    														<input id="inline2pwd" type="password" class="form-control" placeholder="Password">
    												</div>
    												<div class="form-check">
    													<label for="inline2chk" class="form-check-label">
    														<input id="inline2chk" class="form-check-input" type="checkbox"> Remember me
    													</label>
    												</div>
    												<button type="submit" class="btn btn-success waves-effect waves-light">Sign in</button>
    											</form>

Email address
Password
Remember me

##### Form groups

##### Code Explanation for form groups

    					                      	/* Form Groups*/

    												<form class="form-inline">
    													<div class="form-group">
    														<label for="inline3mail" class="block form-control-label">Email address</label>
    															<input id="inline3mail" type="email" class="form-control"  placeholder="Enter email">
    													</div>
    													<div class="form-group">
    														<label for="inline3pwd" class="block form-control-label">Password</label>
    															<input id="inline3pwd" type="password" class="form-control" placeholder="Password">
    													</div>
    													<div class="form-check">
    														<label for="inline3chk" class="form-check-label">
    															<input id="inline3chk" class="form-check-input" type="checkbox"> Remember me
    														</label>
    														<button type="submit" class="btn btn-danger waves-effect waves-light">Sign in</button>
    													</div>
    												</form>

Email address
Password
Remember me

##### Input Groups & Addon

##### Code Explanation for input groups & addons

    			                      		/* For Left Alignment */

    										<div class="form-group row">
    											<div class="col-md-2">
    												<label class="col-form-label" for="alighaddon2">Align</label>
    											</div>
    											<div class="col-md-10">
    												<div class="input-group">
    													<span class="input-group-addon" id="alighaddon1">@</span>
    														<input type="text" class="form-control" placeholder="Username">
    												</div>
    											</div>
    										</div>

    										/* For Right Alignment */

    										<div class="form-group row">
    											<div class="col-md-2">
    												<label class="sr-only" for="alighaddon2">Align addon</label>
    											</div>
    											<div class="col-md-10">
    												<div class="input-group">
    													<input type="number" id="alighaddon2" class="form-control" placeholder="Percentage" aria-describedby="basic-addon2">
    														<span class="input-group-addon" id="basic-addon2">%</span>
    												</div>
    											</div>
    										</div>

    										/* For Group Alignment */

    										<div class="form-group row">
    											<div class="col-md-2">
    												<label class="sr-only" for="alighaddon3">Align addon</label>
    											</div>
    											<div class="col-md-10">
    												<div class="input-group">
    													<span class="input-group-addon" id="basic-addon3.1">$</span>
    													<input type="text" class="form-control" id="alighaddon3" placeholder="Amount">
    													<span class="input-group-addon" id="basic-addon3.2">.00</span>
    												</div>
    											</div>
    										</div>

    										/* For Left Icon Alignment */

    										<div class="form-group row">
    											<div class="col-md-2">
    												<label for="iconaddon1" class="col-form-label">Icon</label>
    											</div>
    											<div class="col-md-10">
    												<div class="input-group">
    													<span class="input-group-addon">
    														<i class="icofont icofont-email"></i>
    													</span>
    													<input type="email" class="form-control" id="iconaddon1" placeholder="Email">
    												</div>
    											</div>
    										</div>

    										/* For Right Icon Alignment */

    										<div class="form-group row">
    											<div class="col-md-2">
    												<label class="sr-only">Icon addon</label>
    											</div>
    											<div class="col-md-10">
    												<div class="input-group">
    													<input type="text" id="iconaddon12" class="form-control" placeholder="Username">
    													<span class="input-group-addon">
    														<i class="icofont icofont-ui-user"></i>
    													</span>
    												</div>
    											</div>
    										</div>

    										/* For Group Icon Alignment */

    										<div class="form-group row">
    											<div class="col-md-2">
    												<label for="iconaddon3" class="sr-only">Icon addon</label>
    											</div>
    											<div class="col-md-10">
    												<div class="input-group">
    													<span class="input-group-addon" id="icon-addon3.1">
    														<i class="icofont icofont-thumbs-up"></i>
    													</span>
    													<input type="text" id="iconaddon3" class="form-control" placeholder="Details" aria-describedby="icon-addon3.1">
    													<span class="input-group-addon" id="icon-addon3.2">
    														<i class="icofont icofont-thumbs-down"></i>
    													</span>
    												</div>
    											</div>
    										</div>

    										/* For Left Side Dropdown */

    										<div class="form-group row">
    											<div class="col-md-2">
    												<label class="col-form-label">Dropdown</label>
    											</div>
    											<div class="col-md-10">
    												<div class="input-group" id="dropdown1">
    													<div class="input-group-btn">
    														<button type="button" class="btn btn-danger addon-btn waves-effect waves-light dropdown-toggle addon-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    															Action
    														</button>
    														<div class="dropdown-menu">
    															<a class="dropdown-item" href="#">Action</a>
    															<a class="dropdown-item" href="#">Another action</a>
    															<a class="dropdown-item" href="#">Something else here</a>
    															<div role="separator" class="dropdown-divider"></div>
    															<a class="dropdown-item" href="#">Separated link</a>
    														</div>
    													</div>
    													<input type="text" class="form-control" placeholder="Username">
    												</div>
    											</div>
    										</div>

    										/* For Right Side Dropdown */

    										<div class="form-group row">
    											<div class="col-md-2">
    												<label class="sr-only">Dropdown</label>
    											</div>
    											<div class="col-md-10">
    												<div class="input-group" id="dropdown2">
    													<input type="text" class="form-control" placeholder="Username">
    													<div class="input-group-btn">
    														<button type="button" class="btn btn-info addon-btn waves-effect waves-light dropdown-toggle addon-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    															Action
    														</button>
    														<div class="dropdown-menu dropdown-menu-right">
    															<a class="dropdown-item" href="#">Action</a>
    															<a class="dropdown-item" href="#">Another action</a>
    															<a class="dropdown-item" href="#">Something else here</a>
    															<div role="separator" class="dropdown-divider"></div>
    															<a class="dropdown-item" href="#">Separated link</a>
    														</div>
    													</div>
    												</div>
    											</div>
    										</div>

    										/* For Group Dropdown */

    										<div class="form-group row">
    											<div class="col-md-2">
    												<label class="sr-only">Dropdown addon</label>
    											</div>
    											<div class="col-md-10">
    												<div class="input-group" id="dropdown3">
    													<div class="input-group-btn">
    														<button type="button" class="btn btn-success addon-btn waves-effect waves-light dropdown-toggle addon-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    															Action
    														</button>
    														<div class="dropdown-menu dropdown-menu-right">
    															<a class="dropdown-item" href="#">Action</a>
    															<a class="dropdown-item" href="#">Another action</a>
    															<a class="dropdown-item" href="#">Something else here</a>
    															<div role="separator" class="dropdown-divider"></div>
    															<a class="dropdown-item" href="#">Separated link</a>
    														</div>
    													</div>
    													<input type="text" class="form-control" placeholder="Username" >
    													<div class="input-group-btn">
    														<button type="button" class="btn btn-primary addon-btn waves-effect waves-light dropdown-toggle addon-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    														</button>
    														<div class="dropdown-menu dropdown-menu-right">
    															<a class="dropdown-item" href="#">Action</a>
    															<a class="dropdown-item" href="#">Another action</a>
    															<a class="dropdown-item" href="#">Something else here</a>
    															<div role="separator" class="dropdown-divider"></div>
    															<a class="dropdown-item" href="#">Separated link</a>
    														</div>
    													</div>
    												</div>
    											</div>
    										</div>

    										/* For Left Button */

    										<div class="form-group row">
    											<div class="col-md-2">
    												<label for="btnaddon1" class="col-form-label">Button</label>
    											</div>
    											<div class="col-md-10">
    												<div class="input-group">
    													<span class="input-group-btn" id="btn-addon1">
    														<button type="submit" class="btn btn-info addon-btn waves-effect waves-light">
    														Go!
    														</button>
    													</span>
    												<input type="text" id="btnaddon1" class="form-control" placeholder="Username" aria-describedby="btn-addon1">
    												</div>
    											</div>
    										</div>

    										/* For Right Button */

    										<div class="form-group row">
    											<div class="col-md-2">
    												<label for="btnaddon2" class="sr-only">Button addon</label>
    											</div>
    											<div class="col-md-10">
    												<div class="input-group">
    													<input id="btnaddon2" type="text" class="form-control" placeholder="Username" aria-describedby="btn-addon2">
    														<span class="input-group-btn" id="btn-addon2">
    															<button type="submit" class="btn btn-warning addon-btn waves-effect waves-light">
    																Go!
    															</button>
    														</span>
    												</div>
    											</div>
    										</div>

    										/* For Group Button */

    										<div class="form-group row">
    											<div class="col-md-2">
    												<label for="btnaddon3" class="sr-only">Button addon</label>
    											</div>
    											<div class="col-md-10">
    												<div class="input-group">
    													<span class="input-group-btn" id="btn-addon3.1">
    														<button type="submit" class="btn btn-primary addon-btn waves-effect waves-light">
    														Search!
    														</button>
    													</span>
    														<input id="btnaddon3" type="text" class="form-control" placeholder="Username" aria-describedby="btn-addon3.1">
    															<span class="input-group-btn" id="btn-addon3.2">
    																<button type="submit" class="btn btn-success addon-btn waves-effect waves-light">
    																Go!
    																</button>
    															</span>
    												</div>
    											</div>
    										</div>

Extend form controls by adding text or buttons before, after, or on both sides of any text-based `<input>`. Use `.input-group` with an `.input-group-addon` or `.input-group-btn` to prepend or append elements to a single `.form-control`.

Align
@
Align addon
%
Align addon
$ .00
Icon
Icon addon
Icon addon
Dropdown
Dropdown
Dropdown addon
Button
Button addon
Button addon