Reboot

About Reboot (reset CSS introduced by Bootstrap 4). See the official document for detail.

Typography

Headings

Sample headings for h1 , h2 , h3 , h4 , h5 , and h6 .

h1. Sample サンプル

h2. Sample サンプル

h3. Sample サンプル

h4. Sample サンプル

h5. Sample サンプル

h6. Sample サンプル

Use .h(1|2|3|4|5|6) for elements other than heading. Below are examples used with span.

span.h(1|2|3|4|5|6)

span.h1 span.h2 span.h3 span.h4 span.h5 span.h6

Customizing headings

Example using .text-muted for a secondary heading (see Text color)

Fancy display heading With faded secondary text

Display headings

Add .display-(1|2|3|4) to a heading to stand out (examples used in h1 below).

h1.display-1

h1.display-2

h1.display-3

h1.display-4

.display-(1|2|3|4) can be set arbitrary text elements (an example for span below).

span.display-4

Lead

Add .lead to stand out a paragraph.

(Without .lead) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

(Using .lead) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Inline text elements

mark example ⇒ You can use the mark tag to highlight text.

del example ⇒ This line of text is meant to be treated as deleted text.

s example ⇒ This line of text is meant to be treated as no longer accurate.

ins example ⇒ This line of text is meant to be treated as an addition to the document.

u example ⇒ This line of text will render as underlined

small example ⇒ This line of text is meant to be treated as fine print.

strong example ⇒ This line rendered as bold text.

em example ⇒ This line rendered as italicized text.

Abbreviations

abbr is used for abbreviations and acronyms. It shows text with a dotted underline and popups a tooltip on hover.

• abbr
  • Attribute title="{full expression}" (popups a tooltip on hover)
  • (Optional) .initialism displays slightly smaller (for acronyms)

attr examples

attr

HTML

attr.initialism example (a bit smaller)

HTML

Blockquotes

blockquote is used for quoting blocks of content from another source (an example below).

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Structure

• Block quotation blockquote.blockquote
  • Paragraph p.mb-1
    • Text Lorem ipsum ...
  • Footer footer.blockquote-footer
    • Text Someone famous in
      • Citation cite Attribute
        • Attribute title="Source Title"
        • Text Source Title

Alignment

Use .text-(left|center|right) (see Text alignment )

Center/Right aligned variations of above example (Left aligned as default)

.text-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.text-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lists (ul, ol)

Unstyled

(ul|ol).list-unstyled removes default CSS list-style (displays the same as plain text). However, it does not apply to nested (descendant) list items. In the example below, fourth and fifth items are nested items.

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
• Ut enim ad minim veniam,
• Quis nostrud exercitation ullamco
• Laboris nisi ut aliquip ex ea commodo consequat.
• Duis aute irure dolor in

Inline

Use (ul|ol).list-inline to arrange items inline (horizontally)

• Lorem ipsum
• Phasellus iaculis
• Nulla volutpat

Description list alignment

Elements for the description list (dl , dt , and dd) can be arranged responsively using grid. The following example show how to use grid for building a responsive description list (changed breakpoint from sm to md from the official example).

• Description list dl.row
  • Description term dt.col-md-3 (placed on left 3/12 on ≥md)
    • Add .text-truncate to truncate text
  • Description details dd.col-md-9 (placed on right 9/12 on ≥md)
  • (Optional) nested description list dl.row (inside is the same way as above)

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

.text-truncate is applied here

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Nesting

Nested definition list

Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

Code

Inline code

Use code

Example ⇒ Math.sqrt(a*a + b*b)

Code blocks

Use code within pre

function determinant(a, b, c, d) {
  return a*d - b*c;
}

• pre.p-2.border.bg-light
  • code
    • function determinant(...

Variables

Use var (displays italicized)

Example ⇒ D = b² - 4 a c

User input

Use kbd

Example ⇒ npm install --save-dev bootstrap

Sample output

Use samp

Example ⇒ webpack: Compiled successfully.