Advanced Bootstrap Form Inputs

Static Control

If you need to display plain text instead of an input field use:

<p class="form-control-static">Static text</p>

Bootstrap Input Groups

An input can be enhanced by adding an icon, text, or button in front of or behind it as “help text” using the .input-group class.

Example:

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

Result:

The .input-group-btn attaches a button next to an input. This is frequently used together with a search bar.

Example:

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search">
  <div class="input-group-btn">
    <button class="btn btn-default" type="submit">
      <i class="glyphicon glyphicon-search"></i>
    </button>
  </div>
</div>

Result:

Note:

The .input-group-addon class adds an icon or helpful text, next to the input field.

Bootstrap Form Control States

ICONS: The .has-feedback class and an icon can be used to add feedback icons.
VALIDATION STATES: The error, warning, and success message validation styles are part of Bootstrap. Add .has-warning, .has-error, or .has-success to the parent element to make it usable.
HIDDEN LABELS: Give non-visible labels a .sr-only class.

Conclusion

In this blog, we have covered Navigation Bars, Forms, and Inputs with examples to help you implement them in your projects. These components enhance navigation, user interaction, and layout design, making websites more user-friendly and visually appealing.

In our next blog, we will dive deeper into Bootstrap Inputs sizing, Media Objects, Carousel Plugin Modal, Tooltip, Popover, and more to add interactive elements and enhance user experience. Stay tuned for more insights!

Request more information

Advanced Bootstrap Form Inputs