In this tutorial Inputs sizing and groups are explained.
Example of input sizing
In this example different bootstrap classes are like input-group-sm
is used to make form size small. While inputGroup-sizing-sm class
is used to make input field small. Similarly inputGroup-sizing-default
class is used for defualt size input field and inputGroup-sizing-lg
class is used to make large size input field.
<h4>Fill out the form</h4><divclass="input-group input-group-sm mb-4 mt-4"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroup-sizing-sm">Small size</span></div><inputtype="text"class="form-control"aria-label="Small"aria-describedby="inputGroup-sizing-sm"></div><divclass="input-group mb-4"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroup-sizing-default">Default size</span></div><inputtype="text"class="form-control"aria-label="Default"aria-describedby="inputGroup-sizing-default"></div><divclass="input-group input-group-lg mb-4"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroup-sizing-lg">Large size</span></div><inputtype="text"class="form-control"aria-label="Large"aria-describedby="inputGroup-sizing-lg"></div>
Output of above code
Fill out the form
Small size
Default size
Large size
Example of Checkboxes and radios
In this example input type="checkbox" is used to add check box in the input field and input type="radio" is used.
<h4>Fill out the form</h4><divclass="input-group mb-3"><divclass="input-group-prepend"><divclass="input-group-text"><inputtype="checkbox"></div></div><inputtype="text"placeholder="Write text here"class="form-control"></div><divclass="input-group"><divclass="input-group-prepend"><divclass="input-group-text"><inputtype="radio"></div></div><inputtype="text"placeholder="Write text here"class="form-control"></div>
Output of above code
Fill out the form
Example of Multiple inputs
In this example multiple input are used within a input group.
<h4>Fill out the form</h4><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text">First and last name</span></div><inputtype="text"class="form-control"><inputtype="text"class="form-control"></div>
Output of above code
Fill out the form
First and last name
Example of Segmented buttons
In this example different button are used with the dropdown menus.
<h4>Fill out the form</h4><divclass="input-group mb-3"><divclass="input-group-prepend"><buttontype="button"class="btn btn-outline-secondary">Action</button><buttontype="button"class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"><spanclass="sr-only">Toggle Dropdown</span></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a><divrole="separator"class="dropdown-divider"></div><aclass="dropdown-item"href="#">Separated link</a></div></div><inputtype="text"class="form-control"></div><divclass="input-group"><inputtype="text"class="form-control"><divclass="input-group-append"><buttontype="button"class="btn btn-outline-secondary">Action</button><buttontype="button"class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"><spanclass="sr-only">Toggle Dropdown</span></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a><divrole="separator"class="dropdown-divider"></div><aclass="dropdown-item"href="#">Separated link</a></div></div></div>
Output of above code
Fill out the form
Example of Custom forms
This is the basic example of custom forms with different form's classes.
<h4>Fill out the form</h4><divclass="input-group mb-3"><divclass="input-group-prepend"><labelclass="input-group-text"for="inputGroupSelect01">Options</label></div><selectclass="custom-select"id="inputGroupSelect01"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select></div><divclass="input-group mb-3"><selectclass="custom-select"id="inputGroupSelect02"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><divclass="input-group-append"><labelclass="input-group-text"for="inputGroupSelect02">Options</label></div></div><divclass="input-group mb-3"><divclass="input-group-prepend"><buttonclass="btn btn-outline-secondary"type="button">Button</button></div><selectclass="custom-select"id="inputGroupSelect03"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select></div><divclass="input-group"><selectclass="custom-select"id="inputGroupSelect04"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><divclass="input-group-append"><buttonclass="btn btn-outline-secondary"type="button">Button</button></div></div>
Output of above code
Fill out the form
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
