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>
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="text-success">
GeeksforGeeks
</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>
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="text-success">
GeeksforGeeks
</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