In Bootstrap 5.3, there are various classes available to style and customize input boxes or form inputs. These classes allow you to apply predefined styles to your input elements, making them consistent and visually appealing. Here's an explanation of how to use input box classes in Bootstrap 5.3.
By default, Bootstrap applies basic styles to input elements without any additional classes. However, you can add the "form-control" class to enhance the styling and ensure consistency across browsers. For example
<input type="text" id="firstName" placeholder="Enter First Name" class="form-control" />
Bootstrap provides different sizing options for input boxes using classes like "form-control-sm" for small inputs and "form-control-lg" for large inputs. For example
<input type="text" placeholder="small" class="form-control form-control-sm" /> <input type="text" placeholder="medium" class="form-control form-control-lg" />
Bootstrap also provides various utility classes to customize form inputs further. These classes can be used to add borders, change colors, apply validation states, and more. Refer to the Bootstrap documentation for the complete list of available classes and their usage.
By utilizing these input box classes in Bootstrap 5.3, you can easily style and customize your form inputs, ensuring a consistent and visually appealing appearance throughout your web application. Remember to include the necessary Bootstrap CSS and JavaScript files in your project to ensure that the Bootstrap styles and functionalities are properly applied to the input boxes and other elements.
After the form control element, include a <small> element with the "form-text" class. Inside the <small> element, provide the desired text that you want to display alongside the form control. For example:
<label for="username" class="form-label">User Name</label> <input type="text" class="form-control" id="username" placeholder="Enter User Name" /> <div id="usernameHelpBlock" class="form-text">Username must be 15 character [A-Z]</div>
By following these steps, you can use the "form-text" class to add informative text or instructions related to a form control. The text will be displayed below or alongside the form control, depending on the layout and structure of your form. The "form-text" class provides basic styling to the text, such as a smaller font size and lighter color, to visually differentiate it from the form control. You can further customize the appearance of the text by adding additional CSS rules or overriding the default styles of the "form-text" class. Remember to include the necessary Bootstrap CSS and JavaScript files in your project to ensure that the Bootstrap styles and functionalities, including the "form-text" class, are properly applied to your form elements.
In Bootstrap 5.3, you can use the "disabled" and "readonly" attributes to control the behavior and appearance of form controls. Here's an explanation of how they work.
Disabled attribute: The "disabled" attribute is used to disable a form control, preventing user interaction and indicating that the field is not editable. When an input element has the "disabled" attribute, its value cannot be changed, and it appears visually different to indicate its disabled state. For example
<input type="text" placeholder="Disabled Input" class="form-control" disabled />
Readonly attribute: The "readonly" attribute is used to make a form control read-only, meaning the user can see the value but cannot modify it. The field appears as normal, but the user cannot edit the value directly. For example
<input type="text" placeholder="Readonly Input" class="form-control" readonly />
In Bootstrap 5.3, you can use the "form-control-plaintext" class to display plain text that resembles a form control, but without the interactive features and styling of a typical form input. This class allows you to style plain text in a consistent and visually appealing manner. Here's an explanation of how to use plain text in Bootstrap 5.3.
<input type="text" placeholder="Plain Text" class="form-control-plaintext" />
In Bootstrap 5.3, you can use the "form-file" class to style and enhance the appearance of HTML file input elements. This class allows you to customize the look and feel of the file input and provide a better user experience. Here's an explanation of how to use HTML file input in Bootstrap 5.3
Create a file input element: Start by creating an HTML file input element using the <input> tag with the "file" type attribute. For example:
<input type="file" />
Add the "form-control" class to the file input element to apply the appropriate styling. This class ensures that the file input resembles a Bootstrap form control, with a visually appealing button and file name display.
<input type="file" class="form-control" />
In Bootstrap 5.3, you can create a multiple file input field using the "form-control" classes. This allows users to select and upload multiple files at once. Here's an example of how to create a multiple file input field in Bootstrap 5.3
<input type="file" class="form-control" multiple />
Choose a sizing class: Bootstrap provides sizing classes such as "form-control-sm" for small, "form-control-lg" for large for custom width. You can choose the appropriate class based on your desired size.
<input type="file" class="form-control form-control-sm" /> <input type="file" class="form-control" /> <input type="file" class="form-control form-control-lg" />
The HTML Color Input is an input type introduced in HTML5 that allows users to select a color using a color picker. It provides a convenient way for users to choose a specific color value for various purposes, such as styling elements or specifying color preferences. Here's an explanation of how to use the HTML Color Input.
<input type="color" value="#563d7c" title="Choose your color" />
Start by creating an HTML color input element using the <input> tag with the "color" type attribute. For example
<input type="color" class="form-control form-control-color" value="#563d7c" title="Choose your color" />
In Bootstrap 5.3, the <datalist> element is a native HTML element that can be used to provide a predefined list of options for an <input> element. It allows you to create an autocomplete feature, where users can select options from a list as they type into an input field. Here's an explanation of how to use the <datalist> element in Bootstrap 5.3
Define the datalist options: Start by creating a <datalist> element and provide the list of options within it. Each option is defined using the <option> tag. For example
<label for="datalist" class="form-label">Datalist example</label> <input class="form-control" list="datalistOptions" id="datalist" placeholder="Type to search..." /> <datalist id="datalistOptions"> <option value="C Program"></option> <option value="Python"></option> <option value="Java"></option> <option value="Node.js"></option> <option value="MongoDB"></option> </datalist>
Note that the styling of the dropdown list and the behavior of the datalist may vary across different browsers. Bootstrap does not provide specific styles or components for the datalist element itself, but you can use Bootstrap's form control classes to style the associated input element.
By using the <datalist> element, you can enhance user experience by providing autocomplete functionality and predefined options for text input fields in your Bootstrap 5.3 projects.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Form Controls in Bootstrap</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="css/base.css" /> </head> <body> <div class="container my-5"> <h5 class="text-danger mb-3">Form Controls in Bootstrap</h5> <div class="row"> <div class="col-lg-6 col-md-8"> <!-- Textbox --> <p class="fw-semibold text-primary border-bottom border-primary py-3">Form Control</p> <div class="mb-3"> <label for="firstName" class="form-label">First Name</label> <input type="text" id="firstName" placeholder="Enter First Name" class="form-control" /> </div> <div class="mb-3"> <label for="lastName" class="form-label">Last Name</label> <input type="text" id="lastName" placeholder="Enter Last Name" class="form-control" /> </div> <p class="fw-semibold text-primary border-bottom border-primary py-3">Sizing</p> <div class="mb-3"> <input type="text" placeholder="small" class="form-control form-control-sm" /> </div> <div class="mb-3"> <input type="text" placeholder="medium" class="form-control" /> </div> <div class="mb-3"> <input type="text" placeholder="medium" class="form-control form-control-lg" /> </div> <p class="fw-semibold text-primary border-bottom border-primary py-3">Form text</p> <div class="mb-3"> <label for="username" class="form-label">User Name</label> <input type="text" class="form-control" id="username" placeholder="Enter User Name" /> <div id="usernameHelpBlock" class="form-text">Username must be 15 character [A-Z]</div> </div> <p class="fw-semibold text-primary border-bottom border-primary py-3">Disabled & Readonly</p> <div class="mb-3"> <input type="text" placeholder="Disabled Input" class="form-control" disabled /> </div> <div class="mb-3"> <input type="text" placeholder="Readonly Input" class="form-control" readonly /> </div> <p class="fw-semibold text-primary border-bottom border-primary py-3">Plain Text</p> <div class="mb-3"> <input type="text" placeholder="Plain Text" class="form-control-plaintext" /> </div> <!-- Input File --> <p class="fw-semibold text-primary border-bottom border-primary py-3">HTML File Input</p> <div class="mb-3"> <input type="file" /> </div> <p class="fw-semibold text-primary border-bottom border-primary py-3">Bootstrap File Input</p> <div class="mb-3"> <input type="file" class="form-control" /> </div> <p class="fw-semibold text-primary border-bottom border-primary py-3">Bootstrap Multiple File Input</p> <div class="mb-3"> <input type="file" class="form-control" multiple /> </div> <p class="fw-semibold text-primary border-bottom border-primary py-3">Bootstrap Disabled File Input</p> <div class="mb-3"> <input type="file" class="form-control" disabled /> </div> <p class="fw-semibold text-primary border-bottom border-primary py-3">Bootstrap File Input Sizing</p> <div class="mb-3"> <input type="file" class="form-control form-control-sm" /> </div> <div class="mb-3"> <input type="file" class="form-control" /> </div> <div class="mb-3"> <input type="file" class="form-control form-control-lg" /> </div> <!-- Input Color --> <p class="fw-semibold text-primary border-bottom border-primary py-3">HTML Color Input</p> <div class="mb-3"> <input type="color" value="#563d7c" title="Choose your color" /> </div> <p class="fw-semibold text-primary border-bottom border-primary py-3">Bootstrap Color Input</p> <div class="mb-3"> <input type="color" class="form-control form-control-color" value="#563d7c" title="Choose your color" /> </div> <!-- Datalists --> <p class="fw-semibold text-primary border-bottom border-primary py-3">Datalist</p> <div class="mb-3"> <label for="datalist" class="form-label">Datalist example</label> <input class="form-control" list="datalistOptions" id="datalist" placeholder="Type to search..." /> <datalist id="datalistOptions"> <option value="C Program"></option> <option value="Python"></option> <option value="Java"></option> <option value="Node.js"></option> <option value="MongoDB"></option> </datalist> </div> <!--col end --> </div> <!--row end --> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>Live Preview
Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions