Approach
Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors.
Additional styling is done only with classes. For example, we reboot some <table> styles for a simpler baseline and later provide .table, .table-bordered, and more.
Headings
All heading elements—<h1>—<h6> have their margin-top removed, margin-bottom: .5rem set, and line-height tightened. While headings inherit their color by default, you can also override it via optional CSS variable, --bs-heading-color.
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
<template>
<h1>
h1. Bootstrap heading
</h1>
<h2>
h2. Bootstrap heading
</h2>
<h3>
h3. Bootstrap heading
</h3>
<h4>
h4. Bootstrap heading
</h4>
<h5>
h5. Bootstrap heading
</h5>
<h6>
h6. Bootstrap heading
</h6>
</template>
<template>
<b-h level="1">
h1. Bootstrap heading
</b-h>
<b-h level="2">
h2. Bootstrap heading
</b-h>
<b-h level="3">
h3. Bootstrap heading
</b-h>
<b-h level="4">
h4. Bootstrap heading
</b-h>
<b-h level="5">
h5. Bootstrap heading
</b-h>
<b-h level="6">
h6. Bootstrap heading
</b-h>
</template>
Paragraphs
All <p> elements have their margin-top removed and margin-bottom: 1rem set for easy spacing.
This is an example paragraph.
This is an example paragraph.
<template>
<p>This is an example paragraph.</p>
<b-p>This is an example paragraph.</b-p>
</template>
Links
Links have a default color and underline applied. While links change on :hover, they don’t change based on whether someone :visited the link. They also receive no special :focus styles.
<template>
<a to="/">This is an example link</a>
<hr />
<Anchor to="#">
This is an example link
</Anchor>
</template>
As of v5.3.x, link color is set using rgba() and new -rgb CSS variables, allowing for easy customization of link color opacity. Change the link color opacity with the --bs-link-opacity CSS variable:
<template>
<a
to="/"
style="--bs-link-opacity: .5"
>This is an example link</a>
<hr />
<Anchor
to="/"
style="--bs-link-opacity: .5"
>
This is an example link
</Anchor>
</template>
Placeholder links—those without an href—are targeted with a more specific selector and have their color and text-decoration reset to their default values.
<template>
<a>This is an example link</a>
<hr />
<Anchor>This is an example link</Anchor>
</template>
Horizontal rules
The <hr> element has been simplified. Similar to browser defaults, <hr> s are styled via border-top, have a default opacity: .25, and automatically inherit their border-color via color, including when color is set via the parent. They can be modified with text, border, and opacity utilities.
<template>
<hr />
<div class="text-success">
<hr />
</div>
<hr class="border border-danger border-2 opacity-50" />
<hr class="border border-primary border-3 opacity-75" />
<div margin="y-5">
・
</div>
<b-hr />
<b-div text-color="success">
<b-hr />
</b-div>
<b-hr
border
border-color="danger"
border-width="2"
opacity="50"
/>
<b-hr
border
border-color="primary"
border-width="3"
opacity="75"
/>
</template>
Lists
All lists— <ul>, <ol>, and <dl> —have their margin-top removed and a margin-bottom: 1rem. Nested lists have no margin-bottom. We’ve also reset the padding-left on <ul> and <ol> elements.
- All lists have their top margin removed
- And their bottom margin normalized
- Nested lists have no bottom margin
- This way they have a more even appearance
- Particularly when followed by more list items
- The left padding has also been reset
- Here’s an ordered list
- With a few list items
- It has the same overall look
- As the previous unordered list
- All lists have their top margin removed
- And their bottom margin normalized
- Nested lists have no bottom margin
- This way they have a more even appearance
- Particularly when followed by more list items
- The left padding has also been reset
- Here’s an ordered list
- With a few list items
- It has the same overall look
- As the previous unordered list
<template>
<ul>
<li>All lists have their top margin removed</li>
<li>And their bottom margin normalized</li>
<li>
Nested lists have no bottom margin
<ul>
<li>This way they have a more even appearance</li>
<li>Particularly when followed by more list items</li>
</ul>
</li>
<li>The left padding has also been reset</li>
</ul>
<ol>
<li>Here’s an ordered list</li>
<li>With a few list items</li>
<li>
It has the same overall look
</li>
<li>As the previous unordered list</li>
</ol>
<hr />
<b-ul>
<b-li>All lists have their top margin removed</b-li>
<b-li>And their bottom margin normalized</b-li>
<b-li>
Nested lists have no bottom margin
<b-ul>
<b-li>This way they have a more even appearance</b-li>
<b-li>Particularly when followed by more list items</b-li>
</b-ul>
</b-li>
<b-li>The left padding has also been reset</b-li>
</b-ul>
<b-ol>
<b-li>Here’s an ordered list</b-li>
<b-li>With a few list items</b-li>
<b-li>
It has the same overall look
</b-li>
<b-li>As the previous unordered list</b-li>
</b-ol>
</template>
For simpler styling, clear hierarchy, and better spacing, description lists have updated margins. <dd>s reset margin-left to 0 and add margin-bottom: .5rem. <dt>s are bolded.
- Description lists
- A description list is perfect for defining terms.
- Term
- Definition for the term.
- A second definition for the same term.
- Another term
- Definition for this other term.
- Description lists
- A description list is perfect for defining terms.
- Term
- Definition for the term.
- A second definition for the same term.
- Another term
- Definition for this other term.
<template>
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Term</dt>
<dd>Definition for the term.</dd>
<dd>A second definition for the same term.</dd>
<dt>Another term</dt>
<dd>Definition for this other term.</dd>
</dl>
<hr />
<b-dl>
<b-dt>Description lists</b-dt>
<b-dd>A description list is perfect for defining terms.</b-dd>
<b-dt>Term</b-dt>
<b-dd>Definition for the term.</b-dd>
<b-dd>A second definition for the same term.</b-dd>
<b-dt>Another term</b-dt>
<b-dd>Definition for this other term.</b-dd>
</b-dl>
</template>
Inline code
Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.
<section> should be wrapped as inline. Code blocks
Use <pre>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. The <pre> element is reset to remove its margin-top and use rem units for its margin-bottom.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<template>
<pre><code style="color:black;"><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
</template>
Variables
For indicating variables use the <var> tag.
<template>
<var>y</var>
=
<var>m</var>
<var>x</var>
+
<var>b</var>
</template>
User input
Use the <kbd> to indicate input that is typically entered via keyboard.
To edit settings, press ctrl + ,
Sample output
For indicating sample output from a program use the <samp> tag.
<template>
<samp>
This text is meant to be treated as sample output from a computer program.
</samp>
</template>
Forms
Pointers on buttons
Reboot includes an enhancement for role="button" to change the default cursor to pointer. Add this attribute to elements to help indicate elements are interactive. This role isn’t necessary for <button> elements, which get their own cursor change.
<template>
<span
role="button"
>Non-button element button</span>
</template>
Misc elements
Address
The <address> element is updated to reset the browser default font-style from italic to normal. line-height is also now inherited, and margin-bottom: 1rem has been added. <address>s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <br>.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Full Name
first.last@example.com
<template>
<address>
<strong>Twitter, Inc.</strong>
<br />
1355 Market St, Suite 900
<br />
San Francisco, CA 94103
<br />
<abbr title="Phone">P:</abbr>
(123) 456-7890
</address>
<address>
<strong>Full Name</strong>
<br />
<a href="mailto:first.last@example.com">first.last@example.com</a>
</address>
</template>
Blockquote
The default margin on blockquotes is 1em 40px, so we reset that to 0 0 1rem for something more consistent with other elements.
A well-known quote, contained in a blockquote element.
Someone famous in Source Title
<template>
<BBlockquote>
<b-p>A well-known quote, contained in a blockquote element.</b-p>
</BBlockquote>
<b-p>
Someone famous in
<cite title="Source Title">Source Title</cite>
</b-p>
</template>
Inline elements
The <abbr> element receives basic styling to make it stand out amongst paragraph text.
<template>
The
<abbr title="HyperText Markup Language">HTML</abbr>
abbreviation element.
</template>