<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>
<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>
/* 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>
/* 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>
/* 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>
<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.
<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
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*/ <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>
/* 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>
/* 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>
/* 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
.