This chapter discusses about the colored link feature of helper classes. The Bootstrap 5 colored links are used to add colors to the link elements.
In order to make the links colored, use .link-* classes. These classes have :hover and :focus states, unlike the .text-* classes.
In order to make the links legible, that have relatively light foreground color, use them on a dark background.
.link-body-emphasis is the only colored link that is unique and high contrast link color. It comes with :hover and :focus styles.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Helper - Colored link</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container p-2"><h4>Colored links</h4><br><p><a href="#" class="link-primary">Primary Color Link</a></p><p><a href="#" class="link-secondary">Secondary Color Link</a></p><p><a href="#" class="link-info">Info Color Link</a></p><p><a href="#" class="link-success">Success Color Link</a></p><p><a href="#" class="link-light bg-dark">Light Color Link on dark background</a></p><p><a href="#" class="link-dark">Dark Color Link</a></p><p><a href="#" class="link-warning">Warning Color Link</a></p><p><a href="#" class="link-danger">Danger Color Link</a></p><p><a href="#" class="link-body-emphasis">Custom Emphasis Link</a></p></div></body></html>
Accessibility tip: Use of color just provides a visual indication, and this will not be helpful to users of assistive technologies like screen readers. Make sure that the meaning is clear from the content itself.
Use alternative means to add clarity to the content using the .visually-hidden class.
Link utilities
Bootstrap provides a range of link utilities such as link opacity, link offset, underline color, underline opacity, and so on.
Similarly colored links can also be modified using the link utilities. Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/colored_link_utilities.php
Example
You can edit and try running this code using the Edit & Run option.
This chapter discusses about setting the background color with appropriate contrasting foreground or text color.
These color and background helper classes combine the .text-* utilities and .bg-* utilities in one common class, namely .text-bg-*.
In order to make the links legible, that have relatively light foreground color, use on a dark background.https://www.tutorialspoint.com/bootstrap/examples/color_background.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Helper</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Color and background utilities</h4><br><div class="text-bg-primary p-3">Primary background with contrasting text color</div><div class="text-bg-secondary p-3">Secondary background with contrasting text color</div><div class="text-bg-success p-3">Success background with contrasting text color</div><div class="text-bg-danger p-3">Danger background with contrasting text color</div><div class="text-bg-warning p-3">Warning background with contrasting text color</div><div class="text-bg-info p-3">Info background with contrasting text color</div><div class="text-bg-light p-3">Light background with contrasting text color</div><div class="text-bg-dark p-3">Dark background with contrasting text color</div></body></html>
Accessibility tip: Use of color to the progress bars just provides a visual indication, and this will not be helpful to users of assistive technologies like screen readers. Make sure that the meaning is clear from the content itself.
Use alternative means to add clarity to the content using the .visually-hidden class.
With components
The color and background helper classes can be used in place of combined .text-* and .bg-* classes, such as on badges.
In order to make the links legible, that have relatively light foreground color, use on a dark background.https://www.tutorialspoint.com/bootstrap/examples/color_background_badges.php
Example
You can edit and try running this code using the Edit & Run option.
The color and background helper classes can be used in place of combined .text-* and .bg-* classes, such as on cards.
In order to make the links legible, that have relatively light foreground color, use on a dark background.https://www.tutorialspoint.com/bootstrap/examples/color_background_cards.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Helper</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Color and background utilities - cards</h4><br><div class="card text-bg-info mb-3" style="max-width: 18rem;"><div class="card-header fw-bold">Card Header</div><div class="card-body"><p class="card-text">Card showing the text and background color classes used together.</p></div></div><div class="card text-bg-warning mb-3" style="max-width: 18rem;"><div class="card-header fw-bold">Card Header</div><div class="card-body"><p class="card-text">Card showing the text and background color classes used together.</p>s
This chapter discusses the clearfix feature of helper classes. The clearfix feature in Bootstrap is used to clear floated elements within a container. When elements within a container are floated, the container’s height can sometimes be collapsed, causing issues with the layout.
Here’s an example of how to use the .clearfix class in Bootstrap:https://www.tutorialspoint.com/bootstrap/examples/clearfix_create.php
Example
The example below shows the usage of clearfix. Without the clearfix, the wrapping div would not span around the buttons which would cause a broken layout.
You can edit and try running this code using the Edit & Run option.
This chapter will discuss about Bootstrap validation. Bootstrap 5 Validation enhances HTML5 form validation by offering useful feedback to users, supporting default browser behavior, custom styles, and JavaScript.
The client-side custom validation styles and tooltips are inaccessible because they are not visible to assistive technology. It is recommended to use either the server-side option or the default browser validation technique, while we work on the solution.
How form validation works in Bootstrap
The two pseudo-classes :invalid and :valid in CSS are used to provide HTML form validation. It applies to the <textarea>, <select>, and <input> elements.
Bootstrap applies the :invalid and :valid styles to the parent .was-validated class. Fields without a value show as invalid when the page loads. You choose when to activate them (usually after a form submission).
To restore the original appearance of the form after dynamic submissions using Ajax, the class .was-validated should be removed from the <form> to reset its appearance.
The pseudo-classes can be replaced with the .is-invalid and .is-valid classes for server-side validation as a fallback, without the need for a .was-validated parent class.
Currently, CSS limitations prevent us from directly applying styles to a <label> element that precedes a form control in the DOM without the help of custom JavaScript.
The constraint validation API, which consists of various JavaScript methods for validating form controls, is supported by all contemporary web browsers.
Use browser default styles or create custom feedback styles using HTML/CSS.
Use setCustomValidity method in JavaScript for unique validity messages.
Let’s look at some examples of custom form validation styles, optional server-side classes and browser defaults.
Custom styles
Add novalidate boolean attribute to the <form> to receive custom validation messages from Bootstrap.
Browser default feedback tooltips are disabled with above boolean attribute but JavaScript validation APIs still work. Submitting this form will trigger JavaScript to provide feedback, displaying :invalid and :valid styles on form controls.
Custom feedback styles improve feedback communication by adding colors, borders, focus styles, and backdrop icons. Backdrop icons for <select> are only available for .form-select, and not .form-control.
This example demonstrates a Bootstrap form with validation features, to ensure that the required fields are filled out correctly before the form can be submitted.https://www.tutorialspoint.com/bootstrap/examples/custom_style.php
Example
You can edit and try running this code using Edit & Run option.
Correct input!
</div></div><div class="col-md-4"><label for="validationCustomEmail" class="form-label">Email Id</label><div class="input-group has-validation"><input type="text" class="form-control" id="validationCustomEmail" aria-describedby="inputGroupPrepend" required><span class="input-group-text" id="inputGroupPrepend">@tutorialspoint.com</span><div class="invalid-feedback">
Please enter correct mail id.
</div></div></div><div class="col-md-4"><label for="validationCustomPhone" class="form-label">Mobile no</label><input type="text" class="form-control" id="validationCustomPhone" required><div class="invalid-feedback">
please enter correct mobile no.
</div></div><div class="col-md-6"><label for="validationAddress" class="form-label">Address</label><input type="text" class="form-control" id="validationAddress" value="XYZ - 123" required><div class="valid-feedback">
Correct input!
</div></div></div><div class="col-md-3"><label for="validationCustom" class="form-label">Gender</label><select class="form-select" id="validationCustom" required><option selected disabled value="">Choose...</option><option>Male</option><option>Female</option><option>Others</option></select><div class="invalid-feedback">
Please select gender.
</div></div><div class="col-12"><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="invalidCheck" required><label class="form-check-label" for="invalidCheck">
I have reviewed and agree to Terms of Services and Privacy Policy.
</label><div class="invalid-feedback">
You must agree before submitting.
</div></div></div><div class="col-12"><button class="btn btn-primary" type="submit">Submit</button></div></form><script>
(() => {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script></body></html>
The following JavaScript code snippet disables form submissions if there are invalid fields. It achieves this by adding event listeners to the forms and preventing the default form submission behavior if the form is not valid.
// Example JavaScript starter for disabling form submissions if there are invalid fields
(() => {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
We can also use browser default messages instead of custom validation message. Depending on your browser and OS, feedback style varies slightly.
Although CSS cannot be used to style these feedback styles, JavaScript can still be used to alter the feedback text.
Try submitting the form in the following example to how default browser validation messages show up.https://www.tutorialspoint.com/bootstrap/examples/validation_browser_default.php
Example
You can edit and try running this code using Edit & Run option.
I have reviewed and agree to Terms of Services and Privacy Policy.
</label></div></div><div class="col-12"><button class="btn btn-primary" type="submit">Submit</button></div></form></body></html></pre>
Server-side
Client-side validation is recommended, but in case of server-side validation, use .is-invalid and .is-valid directives to indicate form field status. Also consider using .invalid-feedback with these classes.
Use aria-describedby attribute to link invalid feedback/error message to the form field in the case of invalid fields. (Allows more than one id to be referenced if field connects to other form text.)
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
This chapter will discuss about Bootstrap form layout. Add structure to your forms with form layout options, from inline to horizontal to implementing custom grids.
Form layout
Bootstrap gives no default styling for the <form> element, but there are a few capable browser highlights that are given by default. Each group of form fields must be inside a <form> element.
Ensure to be specify and include a type attribute for <button>s within a <form> as they default to type=”submit”.
Forms are stacked vertically by default. Bootstrap uses display: block and width: 100% to nearly all form controls. To change layout of each form, use additional classes.
Utilities
To add some structure to forms should be use margin utilities. Use basic grouping of labels, controls, optional form text, and form validation messages.
For consistency, sticking to margin-bottom utilities and employing a single direction all through the form is recommended.
Use grid classes for building the more complex forms. Form a grid for form layouts that require multiple columns, varied widths, and additional alignment options. You need to enable Sass variable using $enable-grid-classes.https://www.tutorialspoint.com/bootstrap/examples/layout_form_grid.php
Example
You can edit and try running this code using Edit & Run option.
To control over the gutter width in the inline as block direction use the gutter modifier classes. By using $enable-grid-classes you can enable Sass variable.https://www.tutorialspoint.com/bootstrap/examples/layout_gutters.php
Example
You can edit and try running this code using Edit & Run option.
I agree to terms and conditions
</label></div></div><div class="col-12"><button type="submit" class="btn btn-primary">Submit</button></div></form></body></html></pre>
Horizontal form
Use the class .row to form groups to create horizontal forms with the grid. Use the class .col-*-* to define the width of the labels and controls.
To make a form vertically centered with their associated form controls, use the class .col-form-label to <label>.
Use the classes .col-form-label-sm or .col-form-label-lg to your <label> or <legend> to follow the size of .form-control-sm and .form-control-lg respectively.https://www.tutorialspoint.com/bootstrap/examples/layout_horizontal_form_label_sizing.php
Example
You can edit and try running this code using Edit & Run option.
As mentioned in the previous example, the grid system allows any number of .cols within a .row. Divide the available width evenly between them. You can also use a specific column class like .col-sm-7 to select a subset of columns to occupy more or less space while the remaining .col divides the rest evenly.https://www.tutorialspoint.com/bootstrap/examples/layout_column_sizing.php
Example
You can edit and try running this code using Edit & Run option.
In the below example, use flexbox utility to center the content vertically and change .col to .col-auto. So that the column only takes up as much space as it needs. In other words, the column size depends on the content.https://www.tutorialspoint.com/bootstrap/examples/layout_auto_sizing.php
Example
You can edit and try running this code using Edit & Run option.
This chapter will discuss about Bootstrap floating labels. Floating labels refer to form labels that float over the input fields.
Basic example
To allow floating labels with Bootstrap’s textual form fields, include a pair of <input class=”form-control”> and <label> elements in .form-floating.
Each <input> must have a placeholder since the technique for CSS-only floating labels employs the :placeholder-shown pseudo-element. The <input> needs to be placed first to make use of a sibling selector like (~).
When a value is already assigned, <label> elements will automatically align their position to float over the input field.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_floated_location.php
Example
You can edit and try running this code using Edit & Run option.
By using form validation styles like is-invalid, you can provide visual feedback to users when they submit incorrect data.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_floated_location.php
Example
You can edit and try running this code using Edit & Run option.
The height of <textarea> with the class .form-control is automatically set to have the same height as <input>.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_textareas.php
Example
You can edit and try running this code using Edit & Run option.
Don’t use the rows attribute if you want to customize the height of your <textarea>. Instead, specify a height explicitly (either inline or using customized CSS). In the below example we have used inline styling.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_customize_textareas.php
Example
You can edit and try running this code using Edit & Run option.
Floating labels are only accessible on .form-selects, in addition to .form-control.
The same concepts apply to them, except unlike <input>s, they always display the <label> in its floated state. Size-based and multiple selects are not supported.
Add the disabled boolean attribute on an input. This gives grayed-out appearance to an input, textarea, or select. It also removes pointer events, and prevents focusing.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_disabled.php
Example
You can edit and try running this code using Edit & Run option.
When switching from an editable <input> to a plaintext value without changing the page layout, .form-control-plaintext can be useful.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_readonly_plaintext.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Floating Labels</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="form-floating mb-3 mt-2"><input type="text" readonly class="form-control" id="floatingEmptyPlaintextInput" style="height: 80px" placeholder="Block the comment" value="Block the comment"><label for="floatingEmptyPlaintextInput">Block the comment</label></div><div class="form-floating mb-3"><input type="text" readonly class="form-control" id="floatingPlaintextInput" style="height: 80px" placeholder="Add a comment" value="Add a comment"><label for="floatingPlaintextInput">Add a comment</label></div></body></html>
Input groups
Similarly, floating labels support .input-group.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_input_groups.php
Example
You can edit and try running this code using Edit & Run option.
The -feedback (it is a validation class to provide valuable feedback to users before submitting the form.) should be positioned outside of the .form-floating but inside of the .input-group when using .input-group and .form-floating along with form validation.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_has_validation.php
Example
You can edit and try running this code using Edit & Run option.
When using a grid system, the implementation of floating labels layout becomes beneficial as it enables the placement of form elements within column classes.
There is no pre-defined classes in bootstrap, so we must utilize form classes and position them according to our requirement.
This chapter will discuss about bootstrap input groups component. A bootstrap input group component is a an extremely versatile and effective form controls for building appealing and visually appealing form controls, however it is only compatible with text input, select, and textarea.
Users may quickly add text, buttons, or button groups to the sides of text inputs, custom selections, and custom file inputs to extend form controls.
Input groups
The sections that follow will show users how to add text, icons, and buttons before, after, or on either side of form controls to make the form appear more professional.
An icon, sampletext, or a button can be added in front of or behind the input field using the .input-group class, which is a container to enhance inputs.
By default, input groups wrap uses the flex-wrap: wrap class to allow for custom form field validation inside the input group. Users can disable this using .flex-nowrap class.https://www.tutorialspoint.com/bootstrap/examples/input_groups_with_wrapping.php
Example
You can edit and try running this code using Edit & Run option.
For small and large input groups, respectively, use the .input-group-sm and .input-group-lg classes.https://www.tutorialspoint.com/bootstrap/examples/input_groups_sizing.php
Example
You can edit and try running this code using Edit & Run option.
Insert the text inside the input group’s addon using any checkbox or radio button. If there is no text next to the input, we suggest to add .mt-0 to the .form-check-input.https://www.tutorialspoint.com/bootstrap/examples/input_groups_checkboxes_radios.php
Example
You can edit and try running this code using Edit & Run option.
Although more than one <input> tags can be displayed visually, validation styles are only offered for input groups with a single <input> tag.https://www.tutorialspoint.com/bootstrap/examples/input_groups_with_multiple_inputs.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Input Groups </title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><div class="input-group"><span class="input-group-text">Student email id and password </span><input type="text" aria-label=" email id " class="form-control"><input type="text" aria-label="password" class="form-control"></div></div></body></html>
Multiple addons
Users have the option to combine multiple addons into a single input group. Additionally, you can mix both the checkbox and radio inputs, as demonstrated in the example below.https://www.tutorialspoint.com/bootstrap/examples/input_groups_with_multiple_addons.php
Example
You can edit and try running this code using Edit & Run option.
Users can add or remove buttons from form controls like text. Easily add any number of buttons that you want to the .input-group, as shown in the example below.https://www.tutorialspoint.com/bootstrap/examples/input_groups_with_button_addons.php
Example
You can edit and try running this code using Edit & Run option.
Users have the option to combine multiple addons into a single input group. Additionally, you can mix both the checkbox and radio inputs, as demonstrated in the example below.https://www.tutorialspoint.com/bootstrap/examples/input_groups_buttons_with_dropdowns.php
Example
You can edit and try running this code using Edit & Run option.
The same common style that defines a dropdown button is used by segmented buttons to segment dropdowns in input groups. The .btn class is used to create buttons, and the .dropdown-menu class is used to create dropdown menus.https://www.tutorialspoint.com/bootstrap/examples/input_groups_segmented_buttons_with_dropdowns.php
Example
You can edit and try running this code using Edit & Run option.
Custom forms are expanded form controls used to gather certain data from website visitors. There are restrictions on the number of different forms you can create using custom forms. There are two types of custom forms:
Custom select
Custom file input
Users can select or pick from a predefined option using the custom select menu, which is a dropdown menu.https://www.tutorialspoint.com/bootstrap/examples/input_groups_with_custom_select_form.php
Example
You can edit and try running this code using Edit & Run option.
This chapter will discuss about Bootstrap form range. Range is an interactive component. The user can quickly scroll and slide through possible values spread across the required range.
Basic example
Use class .form-range to create unique controls for <input type=”range”>. Both track and thumb have the same appearance across all browsers.
Bootstrap doesn’t support “filling” their range’s track from left to right of the thumb as a means to visually indicate progress. This is only supported on firefox.
Default range input for min is 0 and max is 100. If you are using min and max attributes, new values can be specified.https://www.tutorialspoint.com/bootstrap/examples/range_min_and_max.php
Example
You can edit and try running this code using Edit & Run option.
Range step determines how much the range input value will increase or decrease in one step. Number of steps is doubled when step=”0.5″ is used.https://www.tutorialspoint.com/bootstrap/examples/range_steps.php
Example
You can edit and try running this code using Edit & Run option.
This chapter will discuss about checkbox and radios utilities provided by Bootstrap. Checkboxes allow you to select one or more alternatives from a list, whereas radio buttons allow you to choose only one.
Approach
Bootstrap provides wrapper class .form-check for improved layout and behavior of browser default checkboxes and radios elements. It also allows greater customization and cross browser consistency.
.form-check-label class is used to show checkbox labels.
.form-check-input class is used for input type checkbox.
Structurally, the input and label act as siblings.
Bootstrap’s custom icons are used to display checked or indeterminate states.
Checkbox
Checkboxes select one or several options from a list.https://www.tutorialspoint.com/bootstrap/examples/checkbox.php
You can edit and try running this code using Edit & Run option.
var x = document.getElementById("indeterminateCheckbox").indeterminate = true;;
</script></body></html>
Disabled checkbox
To indicate disabled state use disabled attribute. This makes the associated <label> lighter color indicating disabled state.https://www.tutorialspoint.com/bootstrap/examples/checkbox_disabled.php
You can edit and try running this code using Edit & Run option.
To indicate disabled state use disabled attribute and the associated <label>'s are styled with a lighter color.https://www.tutorialspoint.com/bootstrap/examples/radio_disabled.php
You can edit and try running this code using Edit & Run option.
The switch has the custom checkbox markup, to render the toggle use .form-switch class. Use role="switch" to convey the type of control to assistive technologies.
The switches supports the disabled attribute. The older assistive technologies just announced it as a normal checkbox as a fallback.
The radios and checkboxes can be stacked vertically using the .form-check class.https://www.tutorialspoint.com/bootstrap/examples/radio_checkbox_default_stacked.php
You can edit and try running this code using Edit & Run option.
To put checkboxes and radios next to each other, use the class .form-check-inline with any .form-check.https://www.tutorialspoint.com/bootstrap/examples/checkbox_radios_inline.php
Example
You can edit and try running this code using Edit & Run option.
Place checkboxes, radios and switches on opposite sides using .form-check-reverse modifier class.https://www.tutorialspoint.com/bootstrap/examples/checkbox_radios_reverse.php
Example
You can edit and try running this code using Edit & Run option.
Skip the wrapping class .form-check for checkboxes and radio that have no label text.
Provide an accessible name for assistive technologies (for instance, using aria-label). For information, refer accessibility section of the Forms overview section.
Use .btn class on the <label> element rather than .form-check-label to create button-like checkboxes and radio buttons. These toggle buttons may also be placed together in a button group.
Use .btn-check class which indicate that the input is of a button-type checkbox.
Example
You can edit and try running this code using Edit & Run option.
Different variants of .btn are supported, including different outline styles as demonstrated in below example.https://www.tutorialspoint.com/bootstrap/examples/checkbox_radio_outlined_styles.php
Example
You can edit and try running this code using Edit & Run option.
In order to match the similar sized text inputs, you may also select from small and large custom selects.https://www.tutorialspoint.com/bootstrap/examples/select_menu_sizing.php
Example
You can edit and try running this code using Edit & Run option.
You can give multiple options in drop-down list using multiple attribute.https://www.tutorialspoint.com/bootstrap/examples/select_menu_sizing_multiple_attributes.php
Example
You can edit and try running this code using Edit & Run option.
A size attribute restricts the number of options in a drop-down list.https://www.tutorialspoint.com/bootstrap/examples/select_menu_sizing_size_attributes.php
Example
You can edit and try running this code using Edit & Run option.
In order to make a select appear greyed out and eliminate pointer events, add the disabled boolean attribute to it.https://www.tutorialspoint.com/bootstrap/examples/select_menu_disabled.php
Example
You can edit and try running this code using Edit & Run option.