Bootstrap 5.3 Reboot Element Examples

Inline Code

Use <code> for inline code snippets.

For example, use <section> to define sections and <article> for independent content.

The CSS property display: flex; enables flexbox layout.

Code Blocks

Use <pre><code> for multi-line code:

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

Variables

Use <var> for mathematical or programming variables:

The quadratic formula: x = (-b ± √(b² - 4ac)) / 2a

Calculate: y = mx + b

User Input (kbd)

Use <kbd> for keyboard input:

Press Ctrl + C to copy selected text.

Press Ctrl + V to paste from clipboard.

Save your work with Ctrl + S.

Nested kbd for Combinations

Open command palette: Ctrl + Shift + P

Quick switch: Alt + Tab

Terminal Commands

Type cd to change directory.

Use ls -la to list all files with details.

Run npm install to install dependencies.

Sample Output (samp)

Use <samp> for sample output from programs:

The command returned: Hello, World!

Error message: Error: File not found at /path/to/file.txt

Build status: Build completed successfully in 2.3s

Address Elements

Horizontal Rules

Basic Horizontal Rule

Content above the rule.

Content below the rule.

Styled with Border Utilities

Danger style (red, thicker, semi-transparent):

Primary style (blue, thick, more opaque):

Success style (green):

With Spacing

Large vertical margins:

Content after large spacing.

Abbreviations

Use <abbr> with a title attribute for abbreviations:

HTML is the standard markup language for web pages.

CSS is used for styling HTML documents.

The W3C maintains web standards.

Initialisms

Use .initialism for slightly smaller text:

API - A set of protocols for building software.

REST - An architectural style for web services.

JSON - A lightweight data interchange format.

Combined Example: Documentation Style

npm install bootstrap@5.3.8

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';