Bootstrap Reboot
Bootstrap Reboot is used to reboot all the styles of some specific elements. It normalizes HTML elements with opinionated styles, sets better defaults for <html> and <body> elements, optimizes text rendering with native font stacks, and resets margins, paddings, and other styles for consistency across devices and browsers.
Bootstrap 5 Reboot:
| Feature | Description |
|---|---|
| Reboot | Normalize HTML elements with opinionated styles using only element selectors. |
| Page defaults | Set better page-wide defaults for <html> and <body> elements. |
| Native font stack | Use the “native font stack” or “system font stack” for optimal text rendering on all devices. |
| Headings and paragraphs | Remove the default margin for HTML header tags (margin-bottom: .5rem) and paragraphs (margin-bottom: 1rem). |
| Lists | Reset padding-left on <ul> and <ol> elements. |
| Inline code | Wrap code in <code> tags. |
| Code blocks | Place code inside <pre> tags, avoiding angle brackets. |
| Variables | Reboot var tag elements. |
| User input | Style input typically entered via keyboard. |
| Sample output | Indicate sample output from a program using <samp> tag. |
| Tables | Reboot table borders, padding, and more. |
| Forms | Reset form elements to base styles, removing inherited styles. |
| Misc elements | Reset browser defaults for various tags. |
| HTML5 [hidden] attribute | Use [hidden] attribute to hide sections from rendering on the webpage. |
Examples of Bootstrap Reboot
Example 1: In this example, we Bootstrap 5 to create a container with centered text. It includes headings, an address, and a blockquote, styled with Bootstrap classes for text color and alignment.
<!DOCTYPE html>
<html>
<head>
<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 class="m-3">
<center>
<h1 class="text-success">
w3wiki
</h1>
<strong>
BootStrap5 Reboot inline code
</strong>
</center>
<code>
#include>stdio.h>
int main() {
printf("Hello Beginner");
}
</code>
</body>
</html>
Output:
Bootstrap Reboot Example Output
Example 2: In this example, we showcases various Bootstrap 5 Reboot miscellaneous elements within a centered container. It includes headings, an address, and a blockquote, styled with Bootstrap classes for text color and alignment.
<!DOCTYPE html>
<html>
<head>
<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 text-center">
<h1 class="text-success">
w3wiki
</h1>
<h2>
BootStrap5 Reboot Misc elements
</h2>
<p class="text-danger">
Address
</p>
<address>
<Strong>w3wiki</Strong> <br>
A-143, 9th Floor, Sovereign Corporate Tower,<br>
Sector- 136, Noida, Uttar Pradesh (201305)<br>
+91-7838223507 (Course related Queries)<br>
</address>
<p class="text-danger">
Blockquote
</p>
<blockquote title="www.w3wiki.net" class="blockquote">
w3wiki
</blockquote>
<p>
is best computer science portal
</p>
</div>
</body>
</html>
Output:
Bootstrap Reboot Example output
Reference: https://getbootstrap.com/docs/5.0/content/reboot/