size : 'small'|'default'|'large'Default: 'default'

The size of the timepicker input.

Examples

Bootstrap 5

    
 <p><label for="timepicker-small">Small Size:</label> <input id="timepicker-small" width="220" value="15:20" /></p>
 <p><label for="timepicker-default">Default Size:</label> <input id="timepicker-default" width="220" value="15:20" /></p>
 <p><label for="timepicker-large">Large Size:</label> <input id="timepicker-large" width="220" value="15:20" /></p>
 <script>
     $('#timepicker-small').timepicker({ uiLibrary: 'bootstrap5', size: 'small' });
     $('#timepicker-default').timepicker({ uiLibrary: 'bootstrap5', size: 'default' });
     $('#timepicker-large').timepicker({ uiLibrary: 'bootstrap5', size: 'large' });
 </script>

  

Bootstrap 4

    
 <p><label for="timepicker-small">Small Size:</label> <input id="timepicker-small" width="220" value="15:20" /></p>
 <p><label for="timepicker-default">Default Size:</label> <input id="timepicker-default" width="220" value="15:20" /></p>
 <p><label for="timepicker-large">Large Size:</label> <input id="timepicker-large" width="220" value="15:20" /></p>
 <script>
     $('#timepicker-small').timepicker({ uiLibrary: 'bootstrap4', size: 'small' });
     $('#timepicker-default').timepicker({ uiLibrary: 'bootstrap4', size: 'default' });
     $('#timepicker-large').timepicker({ uiLibrary: 'bootstrap4', size: 'large' });
 </script>

  

Bootstrap 3

    
 <p><label for="timepicker-small">Small Size:</label> <input id="timepicker-small" width="220" value="15:20" /></p>
 <p><label for="timepicker-default">Default Size:</label> <input id="timepicker-default" width="220" value="15:20" /></p>
 <p><label for="timepicker-large">Large Size:</label> <input id="timepicker-large" width="220" value="15:20" /></p>
 <script>
     $('#timepicker-small').timepicker({ uiLibrary: 'bootstrap', size: 'small' });
     $('#timepicker-default').timepicker({ uiLibrary: 'bootstrap', size: 'default' });
     $('#timepicker-large').timepicker({ uiLibrary: 'bootstrap', size: 'large' });
 </script>

  

Material Design

    
 <p><label for="timepicker-small">Small Size:</label> <input id="timepicker-small" width="220" value="15:20" /></p>
 <p><label for="timepicker-default">Default Size:</label> <input id="timepicker-default" width="220" value="15:20" /></p>
 <p><label for="timepicker-large">Large Size:</label> <input id="timepicker-large" width="220" value="15:20" /></p>
 <script>
     $('#timepicker-small').timepicker({ size: 'small' });
     $('#timepicker-default').timepicker({ size: 'default' });
     $('#timepicker-large').timepicker({ size: 'large' });
 </script>