Bootstrap 4 Time picker

Bootstrap 4 Time picker form component

Bootstrap time picker is a jQuery plugin which allows the user to select a time in the Bootstrap form without the necessity of using custom JavaScript code.

Basic Bootstrap 4 version

Edit in sandbox 
        
            
      <div class="row">
        <div class="col-md-6">
          <div class="md-form md-outline input-with-post-icon timepicker" twelvehour="true">
            <input type="text" id="light-version-examples" class="form-control" placeholder="Select time">
            <label for="light-version-examples">Light version, 12hours</label>
            <i class="fas fa-envelope input-prefix"></i>
          </div>
        </div>
      
        <div class="col-md-6">
          <div class="md-form md-outline input-with-post-icon timepicker" darktheme="true">
            <input type="text" id="dark-version-example" class="form-control" placeholder="Select time">
            <label for="dark-version-example">Dark version, 24 hours</label>
            <i class="fas fa-envelope  input-prefix"></i>
          </div>
        </div>
      </div>

Above is an example template for a Time picker in the Bootstrap 4 version based on jQuery. V4 is an older version of Bootstrap and we discourage implementing it in new projects.

Below you will find the same component but in the latest, more modern Bootstrap 5. We encourage you to use the v5 version instead, the v5 is more lightweight, more reliable and based on pure JavaScript instead of jQuery.

This page only compares the two version, you can find full documentation - with multiple options & API details via one of the links below:
Bootstrap v5 - full documentation Bootstrap v4 - full documentation

Basic Bootstrap 5 version

Edit in sandbox 
        
            
      <div data-mdb-input-init class="form-outline timepicker">
        <input type="text" class="form-control" id="form11" />
        <label class="form-label" for="form11">Select a time</label>
      </div>