On this page

Elements

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu quam lacinia, tincidunt tortor non, vulputate diam. Donec a cursus dui. Suspendisse scelerisque.

Typography

Typography

Textblocks

1. Lorem Ipsum

1.1 Why do we use it?

1.1.1 Variations of passages New

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

  • List item 1
  • List item 2
  • List item 3
1.1.1 Lorem Ipsum generators

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

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

1.1.2 Model sentence structures

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title
1.1.4 Distribution of letters

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

A well-known quote, contained in a blockquote element.

html 
								
···
Typography

Headings

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading
html 
								
···

								
···

								
···

								
···

								
···

								
···
Typography

Displays

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

html 
								
···

								
···

								
···

								
···

								
···

								
···
Typography

Lists

Unordered

  • Item 1;
  • Item 2;
  • Item 3;
  • Item 4;
    • Item 4.1;
    • Item 4.2;
      • Item 4.2.1;
      • Item 4.2.2;
        • Item 4.2.2.1;
        • Item 4.2.2.2;
    • Item 4.3;
    • Item 4.4;
  • Item 5
  • Item 6

Ordered

  1. Item;
  2. Item;
  3. Item;
  4. Item;
    1. Item;
    2. Item;
      1. Item;
      2. Item;
        1. Item;
        2. Item;
    3. Item;
    4. Item;
  5. Item
  6. Item
html 
								
								
    
									
  • ···
    • 
								

								

								
								
    
									
  1. ···
    2.
Typography

Leads

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

html 
								
								
···
Typography

Blockquotes

A well-known quote, contained in a blockquote element.

html 

								
								

									
···
Typography

Figures

A well-known quote, contained in a blockquote element.

Someone famous in Source Title
html 
								
								

									

										
···

									

									

										Author name Source Title
Typography

Styling

You can use the mark tag to highlight text.

You can use the code tag to distinguish code.

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.

html 
								
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.

Pictures

Pictures

Figures

Placeholder 400x300
A default caption for the above image.
Placeholder 400x300
A right caption for the above image.
html 
								
								

									...
									
···

								

								

								
								

									...
									
···

Code snippets

Code Snippets

HTML

html 
								
								

									html
									

								

								
···
Code Snippets

PHP

php 
								
								

									php
									

								

								
···
Code Snippets

Javascript

javascript 
								
								

									javascript
									

								

								
···
Code Snippets

CSS

css 
								
								

									css
									

								

								
···

Icons

html

Tables

Tables

Default

Column 1 Column 2 Column 3 Column 4
Cell 1.1 Cell 2.1 Cell 3.1 Cell 4.1
Cell 1.2 Cell 2.2 Cell 3.2 Cell 4.2
Cell 1.3 Cell 2.3 Cell 3.3 Cell 4.3
Cell 1.4 Cell 2.4 Cell 3.4 Cell 4.4
html 
								
								<table class="table">
									<thead>
										<tr>
											<th>Column</th>
											<th>···</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>Cell</td>
											<td>···</td>
										</tr>
									</tbody>
								</table>
Tables

Hoverable

Column 1 Column 2 Column 3 Column 4
Cell 1.1 Cell 2.1 Cell 3.1 Cell 4.1
Cell 1.2 Cell 2.2 Cell 3.2 Cell 4.2
Cell 1.3 Cell 2.3 Cell 3.3 Cell 4.3
Cell 1.4 Cell 2.4 Cell 3.4 Cell 4.4
html 
								
								<table class="table table-hover">
									···
								</table>
Tables

Striped rows

Column 1 Column 2 Column 3 Column 4
Cell 1.1 Cell 2.1 Cell 3.1 Cell 4.1
Cell 1.2 Cell 2.2 Cell 3.2 Cell 4.2
Cell 1.3 Cell 2.3 Cell 3.3 Cell 4.3
Cell 1.4 Cell 2.4 Cell 3.4 Cell 4.4
html 
								
								<table class="table table-striped">
									···
								</table>
Tables

Striped columns

Column 1 Column 2 Column 3 Column 4
Cell 1.1 Cell 2.1 Cell 3.1 Cell 4.1
Cell 1.2 Cell 2.2 Cell 3.2 Cell 4.2
Cell 1.3 Cell 2.3 Cell 3.3 Cell 4.3
Cell 1.4 Cell 2.4 Cell 3.4 Cell 4.4
html 
								
								<table class="table table-striped-columns">
									···
								</table>
Tables

Bordered

Column 1 Column 2 Column 3 Column 4
Cell 1.1 Cell 2.1 Cell 3.1 Cell 4.1
Cell 1.2 Cell 2.2 Cell 3.2 Cell 4.2
Cell 1.3 Cell 2.3 Cell 3.3 Cell 4.3
Cell 1.4 Cell 2.4 Cell 3.4 Cell 4.4
html 
								
								<table class="table table-bordered border-primary">
									<thead>
										<tr>
											<th>···</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>···</td>
										</tr>
									</tbody>
								</table>
								

								
								<table class="table table-bordered border-primary">···</table>
								<table class="table table-bordered border-secondary">···</table>
								<table class="table table-bordered border-success">···</table>
								<table class="table table-bordered border-danger">···</table>
								<table class="table table-bordered border-warning">···</table>
								<table class="table table-bordered border-info">···</table>
								<table class="table table-bordered border-light">···</table>
Tables

Borderless

Column 1 Column 2 Column 3 Column 4
Cell 1.1 Cell 2.1 Cell 3.1 Cell 4.1
Cell 1.2 Cell 2.2 Cell 3.2 Cell 4.2
Cell 1.3 Cell 2.3 Cell 3.3 Cell 4.3
Cell 1.4 Cell 2.4 Cell 3.4 Cell 4.4
html 
								
								<table class="table table-borderless">
									···
								</table>

Panels

Panels

Examples

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu quam lacinia, tincidunt tortor non, vulputate diam. Donec a cursus dui. Suspendisse scelerisque, sapien a tincidunt blandit, turpis nisi lacinia sem, at egestas felis diam sed nunc.

html 
								
								

									
···
Panels

Highlights

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu quam lacinia, tincidunt tortor non, vulputate diam. Donec a cursus dui. Suspendisse scelerisque, sapien a tincidunt blandit, turpis nisi lacinia sem, at egestas felis diam sed nunc.

html 
								
								

									
···
Panels

Callouts

Info

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu quam lacinia, tincidunt tortor non, vulputate diam. Donec a cursus dui. Suspendisse scelerisque, sapien a tincidunt blandit, turpis nisi lacinia sem, at egestas felis diam sed nunc.

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu quam lacinia, tincidunt tortor non, vulputate diam. Donec a cursus dui. Suspendisse scelerisque, sapien a tincidunt blandit, turpis nisi lacinia sem, at egestas felis diam sed nunc.

Danger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu quam lacinia, tincidunt tortor non, vulputate diam. Donec a cursus dui. Suspendisse scelerisque, sapien a tincidunt blandit, turpis nisi lacinia sem, at egestas felis diam sed nunc.

html 

								
								

									
title

									
content

								

								

								
								
···

								
···

								
···
Panels

Alerts

html

Carousels

Carousels

Default

html

Badges

Badges

Default

Primary Secondary Success Danger Warning Info Light Dark
html 
								Primary
								Secondary
								Success
								Danger
								Warning
								Info
								Light
								Dark
Badges

Rounded Pill

Primary Secondary Success Danger Warning Info Light Dark
html 
								Primary
								Secondary
								Success
								Danger
								Warning
								Info
								Light
								Dark
Badges

Inline

Heading 1 New

Heading 2 New

Heading 3 New

Heading 4 New

Heading 5 New
Heading 6 New

Paragraph New

html 
								
······

								
······

								
······

								
······

								
······

								
······

								
······

Buttons

Buttons

Default

html 
								
								
								
								
								
								
								
								
								
								

								
								Primary
								Secondary
								Success
								Danger
								Warning
								Info
								Light
								Dark
								Link
Buttons

Outline

html