Basic Input
Basic Input Text
The Basic Input Text example display how to use the .form-control class to create a well-styled, responsive text input field for seamless user interaction.
Disabled Text Input
The Disabled Text Input example shows how to use the disabled attribute with the .form-control class to create a non-editable input field.
Label Input
The Label Input example demonstrates how to associate a <label> with an input field for better accessibility and user experience.
Label Input Required
The Label Input Required example shows how to use the required attribute with a <label> to indicate a mandatory input field for better form validation.
Read Only
The Read-Only Input example demonstrates how to use the readonly attribute to create an input field that cannot be edited but remains selectable.
Input With Button
The Input with Button example shows how to combine an input field with a button using Bootstrap’s input group for better functionality and styling.
Input With Helper Text
The Input with Helper Text example demonstrates how to add a small guiding text below an input field using Bootstrap to assist users with input requirements.
With Error Message
The With Error Message example demonstrates the use of the .is-invalid class to highlight an input field with a red border and display an error message below it.
Input With Helper Text
You have the option to include supportive text either below or above the input field.
Input Size and Radius
The Input Size and Radius example showcases how to use .form-control-sm and .form-control-lg for different input sizes, along with .rounded classes to adjust the border radius.
Colors
The Input Color Variant example shows how to style input fields using the .form-control-* class, allowing customization with different color themes for better visual distinction.
Type Variant
The Type Variant example showcases different input types using the .form-control class, including date, time, email, password, and more. These variants help users enter specific data formats with ease.
Basic File Upload
The Basic File Upload example demonstrates how to use the .form-control class with type="file" to create a simple and responsive file input field for uploading files.