Bootstrap 5 Reboot User input
Bootstrap 5 Reboot is a collection of element-specific CSS that changes in a single file, kickstart Bootstrap provides an elegant, consistent, and simple baseline to build upon. Reboot user input is used to indicate the input that is typically entered via the keyboard.
Reboot User Input used Tag:
- <kbd>: This tag is used to define the keyboard input. The text enclosed within the <kbd> tag is typically displayed in the browser’s default monospace font.
Syntax:
<kbd>Content</kbd>
Example 1: In this example, we will see how to use Reboot user input.
HTML
<!DOCTYPE html> <html> <head> <title> Bootstrap 5 Reboot User Input </title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <div class="container"> <h1 class="text-success"> w3wiki </h1> <h3>Reboot User input</h3> <p> For Selecting all the content of the page Use <kbd>Ctrl + A</kbd> </p> </div> </body> </html> |
Output:
Example 2: In this example, we will learn how can style <kbd> and use enter symbol with <kbd>.
HTML
<!DOCTYPE html> <html> <head> <title> Bootstrap 5 Reboot User Input </title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <div class="container"> <h1 class="text-success"> w3wiki </h1> <h3>Reboot User input</h3> <p> Press <kbd style="background: green; color: white;">Enter ⏎</kbd> </p> </div> </body> </html> |
Output:
Reference: https://getbootstrap.com/docs/5.0/content/reboot/#user-input
Contact Us