Titles

H1 Title

H2 Title

H3 Title

H4 Title

H5 Title

H6 Title

Links

Primary link

Secondary link

Danger link

Success link

Warning link

Info link

White link

Black link

Paragraphs

This is a lead paragraph. It stands out from regular paragraphs.

You can use the mark tag to highlight text.

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

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

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

This line of text will render as underlined.

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

This line rendered as bold text.

This line rendered as italicized text.

This text contains _subscript text.

This text contains ^superscript text.

This text contains abbr

Blockquote

Address

List

• This is a list.
• When you put .list-unstyled class to ul tag:
• It appears completely unstyled.
• Structurally, it's still a list.
• However, this style only applies to immediate child elements.
• Nested lists:
  • are unaffected by this style
  • will still show a bullet
  • and have appropriate left margin
• This may still come in handy in some situations.

• 1.This is a list item.
• 2.When you put .list-inline class to ul tag:
• 3.They're displayed inline.

Preformatted text

				Text in a pre element
				is displayed in a fixed-width
				font, and it preserves
				both      spaces and
				line breaks
			

Code/ Keyboard Input / Samp

The CSS background-color property defines the background color of an element.

Press Ctrl + C to copy text (Windows).

This a samp text: File not found.
Press F1 to continue

Link

Figure / Image / Figcaption

To make responsive images, use the .img-fluid class.

Table

You can put the table in a wrapper and use .table-responsive for this wrapper to make the table scrollable on smaller screen sizes.

To make a table row active, you can simply add the .active class to the tr tag. This will apply the desired styling to the row.

To make a table rows striped, you can simply add the .table-striped class to the table tag. This will apply the desired styling to the row.

For bordered table add the .table-bordered class to the table tag.

For borderless table add the .table-borderless class to the table tag.

Form Elements

Buttons

The button styles for submit, reset, and button are all the same. By default they are styled in primary colors.

You can use the classes: .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info to create more variants.

Details

The default details are styled as separate, but you can create accordion-like details by using .stacked-details in a wrapper.

To make details automatically collapsible, use: .auto-collapse in a wrapper.