• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Inputs

← Previous Next →

Inputs are the core elements of any form because they allow users to provide information. They serve as the bridge between the user and your application, collecting data such as names, emails, passwords, numbers, dates, or files. Bootstrap 4 enhances standard HTML input fields with consistent styling, responsive layouts, and optional validation feedback, making them easier to use and visually appealing. Understanding how to work with inputs is essential before combining them into more complex forms or input groups.

Basic Input Types

Bootstrap 4 supports all standard HTML5 input types, including text, email, password, number, date, and more. Using the form-control class ensures that inputs occupy the full width of their parent container, with proper padding and border styles, making them easy to interact with on both desktop and mobile devices.

<input type="text" class="form-control" placeholder="Enter your name">
<input type="email" class="form-control" placeholder="Enter your email">
<input type="password" class="form-control" placeholder="Enter your password">

Key Points:

  • Always use form-control for consistent styling.

  • Use the correct input type for the data expected to provide browser-level validation.

  • Placeholder text should be short, descriptive, and supportive of labels.

Input Sizes

Bootstrap 4 allows you to adjust input sizes for better design consistency across different layouts. You can use form-control-lg for large inputs or form-control-sm for smaller ones. This is particularly useful when you want some fields to stand out, like a main search bar, or when space is limited, like in a compact form in a sidebar.

<input type="text" class="form-control form-control-lg" placeholder="Large input">
<input type="text" class="form-control form-control-sm" placeholder="Small input">

  • Large inputs are ideal for prominent fields that require user attention.

  • Small inputs are useful for inline forms, toolbars, or dense layouts.

Read-Only and Disabled Inputs

Sometimes you need inputs to display information without allowing users to modify it. Bootstrap 4 supports readonly and disabled attributes for this purpose.

<input type="text" class="form-control" value="Read-only value" readonly>
<input type="text" class="form-control" value="Disabled value" disabled>

  • readonly allows users to copy or select the text but prevents editing.

  • disabled makes the input uneditable, grayed out, and non-focusable, signaling that the field is inactive.

Placeholder Text

Placeholders provide users with hints about what information they should enter. While helpful, they should not replace labels entirely because placeholders disappear when the user begins typing, which can cause confusion if the user forgets the expected input.

<input type="text" class="form-control" placeholder="Enter your username">

  • Always pair placeholders with labels to ensure clarity and accessibility.

  • Placeholder text should be short, descriptive, and complementary to the label.

Password Inputs

For sensitive information like passwords, use the password input type. Bootstrap styling remains the same, but the characters are masked to ensure privacy.

<input type="password" class="form-control" placeholder="Enter your password">

  • You can also add a toggle button to show or hide the password, enhancing usability without compromising security.

  • Ensure that passwords are collected and stored securely on the backend.

Number Inputs

Bootstrap 4 supports numeric inputs, which allow users to enter only numbers. You can also define limits using min, max, and step attributes.

<input type="number" class="form-control" placeholder="Enter your age" min="1" max="100">

  • Number inputs are ideal for ages, quantities, prices, or any numeric data.

  • Using step allows for incremental changes, which is useful in e-commerce or forms with precise measurements.

Date and Time Inputs

HTML5 input types like date, time, and datetime-local are supported with Bootstrap styling.

<input type="date" class="form-control">
<input type="time" class="form-control">
<input type="datetime-local" class="form-control">

  • These inputs use browser-native pickers, making it easier for users to select values.

  • Test these inputs across different browsers, as appearance and functionality can vary.

File Inputs

Bootstrap 4 provides custom-file classes for styling file upload inputs, giving a modern look and better usability than default browser file inputs.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

  • The label automatically updates with the selected file name.

  • Useful for profile pictures, resumes, or document uploads.

Input Validation

Bootstrap allows you to apply validation styles directly to inputs. Use is-valid for valid entries and is-invalid for errors, along with valid-feedback or invalid-feedback for helpful messages.

<input type="email" class="form-control is-invalid" placeholder="Enter email">
<div class="invalid-feedback">
  Please provide a valid email.
</div>

  • This gives users instant feedback and helps them correct mistakes immediately.

  • Validation improves form completion rates and reduces backend errors.

Accessibility Considerations

  • Always associate inputs with <label> elements using the for attribute.

  • Use placeholder text sparingly and never as the only label.

  • Ensure color contrast is sufficient for validation states.

  • Test forms with screen readers to ensure usability for all users.

Best Practices for Inputs

  • Choose the correct input type for the data you expect.

  • Pair inputs with descriptive labels for clarity.

  • Provide placeholders as hints, not as the sole description.

  • Apply validation feedback to guide users.

  • Customize input sizes according to layout requirements.

Summary of the Tutorial

This tutorial covered the various input types available in Bootstrap 4 and how to use them effectively. You learned:

  • How to work with text, email, password, number, date, time, and file inputs.

  • Adjusting input sizes with form-control-lg and form-control-sm.

  • Using readonly and disabled attributes for non-editable inputs.

  • Best practices for labels, placeholders, and accessibility.

  • Implementing validation with is-valid, is-invalid, and feedback messages.

By following these techniques, you can create input fields that are visually consistent, user-friendly, accessible, and responsive across all devices. Properly designed inputs are essential for effective data collection and improving the overall user experience.

Practice Questions

  1. Create a form with text, email, and password inputs. Apply form-control to all fields and include a submit button.

  2. Build a registration form demonstrating input sizes: one large input for full name and one small input for username.

  3. Create a form with a read-only field displaying a pre-filled value and a disabled field for another input.

  4. Design a form with numeric inputs for age and quantity. Apply min, max, and step attributes appropriately.

  5. Create a date and time form where users can select their birth date and preferred appointment time using Bootstrap inputs.

  6. Build a file upload form using custom-file classes, allowing users to select a profile picture.

  7. Create a login form with email and password inputs, and apply is-invalid feedback for the email field when it is empty.

  8. Design a contact form where the placeholder text guides users, and each input has a proper label for accessibility.

  9. Create a multi-field form with first name, last name, and phone number in a single row using form-row and col-* classes.

  10. Build an inline form with username and email inputs. Add a submit button and apply is-valid feedback to the username field if it is filled correctly.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top