Colors
primary
900
600
300
100
50
secondary
900
600
300
100
50
dark
900
600
300
100
50
light
900
600
300
100
50
info
900
600
300
100
50
success
900
600
300
100
50
warning
900
600
300
100
50
danger
900
600
300
100
50
Icon Tests
None
h2
p
icon-add-sm
h2
p
icon-add
h2
p
icon-alert
h2
p
icon-arrow-left
h2
p
icon-arrow-right
h2
p
icon-battery
h2
p
icon-brand-ba
h2
p
icon-brand-linkedin
h2
p
icon-building-lg
h2
p
icon-building
h2
p
icon-calendar-range
h2
p
icon-calendar-start
h2
p
icon-calendar-x2
h2
p
icon-calendar
h2
p
icon-channel-2
h2
p
icon-channel
h2
p
icon-check-sm
h2
p
icon-check
h2
p
icon-checkbox-checked-filled
h2
p
icon-checkbox-checked-partial-reverse
h2
p
icon-checkbox-checked-reverse
h2
p
icon-checkbox-checked
h2
p
icon-checkbox
h2
p
icon-chevron-down
h2
p
icon-chevron-left
h2
p
icon-chevron-lg-down
h2
p
icon-chevron-right
h2
p
icon-chevron-up
h2
p
icon-clock-2
h2
p
icon-clock
h2
p
icon-close-lg
h2
p
icon-close
h2
p
icon-code
h2
p
icon-collection-add
h2
p
icon-collection
h2
p
icon-credit-card
h2
p
icon-dashboard-2
h2
p
icon-dashboard-3
h2
p
icon-dashboard-4
h2
p
icon-dashboard
h2
p
icon-delete
h2
p
icon-design
h2
p
icon-diploma
h2
p
icon-directions
h2
p
icon-dots-h
h2
p
icon-dots-v
h2
p
icon-download
h2
p
icon-edit
h2
p
icon-email
h2
p
icon-english-2
h2
p
icon-english
h2
p
icon-exchange
h2
p
icon-eye-no
h2
p
icon-eye
h2
p
icon-facebook-filled
h2
p
icon-facebook
h2
p
icon-filter-lg
h2
p
icon-filter
h2
p
icon-folder-open
h2
p
icon-folder
h2
p
icon-full-screen
h2
p
icon-graph-2
h2
p
icon-graph-3
h2
p
icon-graph
h2
p
icon-grid
h2
p
icon-help-2
h2
p
icon-help
h2
p
icon-home
h2
p
icon-info
h2
p
icon-instagram-filled
h2
p
icon-instagram
h2
p
icon-key-2
h2
p
icon-key
h2
p
icon-language
h2
p
icon-less
h2
p
icon-link-external
h2
p
icon-link
h2
p
icon-list
h2
p
icon-lock-open
h2
p
icon-lock
h2
p
icon-login
h2
p
icon-map-compass
h2
p
icon-map-location
h2
p
icon-map-marker-2
h2
p
icon-map-marker
h2
p
icon-map
h2
p
icon-menu
h2
p
icon-more
h2
p
icon-pause
h2
p
icon-phone
h2
p
icon-pipe
h2
p
icon-play-circle-filled
h2
p
icon-play-filled-reverse
h2
p
icon-play-filled
h2
p
icon-play
h2
p
icon-playlist-add
h2
p
icon-playlist
h2
p
icon-queue-2
h2
p
icon-queue
h2
p
icon-range
h2
p
icon-refresh-2
h2
p
icon-refresh
h2
p
icon-save
h2
p
icon-school
h2
p
icon-search
h2
p
icon-send
h2
p
icon-settings-2
h2
p
icon-settings
h2
p
icon-slash-lg
h2
p
icon-slash
h2
p
icon-sort-down
h2
p
icon-sort-up
h2
p
icon-sort
h2
p
icon-stack
h2
p
icon-tag
h2
p
icon-twitter-filled
h2
p
icon-twitter
h2
p
icon-user
h2
p
icon-volume
h2
p
icon-youtube-filled copy
h2
p
icon-youtube-filled
h2
p
icon-youtube
h2
p
Tester Icon
h2
p
This is heading h1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel quam vel nibh maximus facilisis ut varius nunc. Aliquam erat volutpat. Integer suscipit purus blandit lacinia interdum. Praesent nec mi a lectus tincidunt accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce a dignissim purus. Suspendisse semper quam non pretium ultrices. Duis non bibendum ex. Donec ac ante sed quam vulputate fringilla. Sed luctus vitae lacus ut rutrum. Proin tempor malesuada metus a suscipit. Mauris ac neque vehicula, rutrum tortor ac, commodo mi.
This is heading h2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel quam vel nibh maximus facilisis ut varius nunc. Aliquam erat volutpat. Integer suscipit purus blandit lacinia interdum. Praesent nec mi a lectus tincidunt accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce a dignissim purus. Suspendisse semper quam non pretium ultrices. Duis non bibendum ex. Donec ac ante sed quam vulputate fringilla. Sed luctus vitae lacus ut rutrum. Proin tempor malesuada metus a suscipit. Mauris ac neque vehicula, rutrum tortor ac, commodo mi.
This is heading h3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel quam vel nibh maximus facilisis ut varius nunc. Aliquam erat volutpat. Integer suscipit purus blandit lacinia interdum. Praesent nec mi a lectus tincidunt accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce a dignissim purus. Suspendisse semper quam non pretium ultrices. Duis non bibendum ex. Donec ac ante sed quam vulputate fringilla. Sed luctus vitae lacus ut rutrum. Proin tempor malesuada metus a suscipit. Mauris ac neque vehicula, rutrum tortor ac, commodo mi.
This is heading h4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel quam vel nibh maximus facilisis ut varius nunc. Aliquam erat volutpat. Integer suscipit purus blandit lacinia interdum. Praesent nec mi a lectus tincidunt accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce a dignissim purus. Suspendisse semper quam non pretium ultrices. Duis non bibendum ex. Donec ac ante sed quam vulputate fringilla. Sed luctus vitae lacus ut rutrum. Proin tempor malesuada metus a suscipit. Mauris ac neque vehicula, rutrum tortor ac, commodo mi.
This is heading h5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel quam vel nibh maximus facilisis ut varius nunc. Aliquam erat volutpat. Integer suscipit purus blandit lacinia interdum. Praesent nec mi a lectus tincidunt accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce a dignissim purus. Suspendisse semper quam non pretium ultrices. Duis non bibendum ex. Donec ac ante sed quam vulputate fringilla. Sed luctus vitae lacus ut rutrum. Proin tempor malesuada metus a suscipit. Mauris ac neque vehicula, rutrum tortor ac, commodo mi.
This is heading h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel quam vel nibh maximus facilisis ut varius nunc. Aliquam erat volutpat. Integer suscipit purus blandit lacinia interdum. Praesent nec mi a lectus tincidunt accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce a dignissim purus. Suspendisse semper quam non pretium ultrices. Duis non bibendum ex. Donec ac ante sed quam vulputate fringilla. Sed luctus vitae lacus ut rutrum. Proin tempor malesuada metus a suscipit. Mauris ac neque vehicula, rutrum tortor ac, commodo mi.
Display Styles
This is display-1
This is display-2
This is display-3
This is display-4
Heading Classes
.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
h1. Bootstrap heading class .h1
h2. Bootstrap heading class .h2
h3. Bootstrap heading class .h3
h4. Bootstrap heading class .h4
h5. Bootstrap heading class .h5
h6. Bootstrap heading class .h6
Bootstrap para
Customized Headings
h3 Heading With faded secondary text that uses text-muted
Inline Text Elements
You can use the mark tag to highlight text.
Use the del tag to show a text as deleted.
This line of text will render as underlined. It uses the u tag.
Use the small tag for fine or small print.
Use the strong tag for bold text.
Use the em tag for italicized text.
Text alignment
This paragraph uses the text-justify class. Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi.Cras mattis iudicium purus sit amet fermentum.
Use text-left for Left aligned text on all viewport sizes.
Use text-center for Center aligned text on all viewport sizes.
Use text-right for Right aligned text on all viewport sizes.
Use text-sm-right for right aligned text on viewports sized SM. (small) or wider.
Use text-md-right for right aligned text on viewports sized MD (medium) or wider.
Use text-lg-right for right aligned text on viewports sized LG (large) or wider.
Use text-xl-left for Left aligned text on viewports sized XL (extra-large) or wider.
Text transform
Transform text in components with text capitalization classes.
Use text-lowercase for Lowercased text.
Use text-uppercase for Uppercased text.
Use text-capitalize to capitalize the first letter in each word.
Containers
This paragraph is not inside a container. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque molestiae incidunt obcaecati placeat, beatae iure dolores vero earum accusamus ipsum soluta magni ut quasi cumque debitis, ducimus voluptatem architecto est!
This paragraph is inside a container. It resizes based on the responsive breakpoints. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio omnis minima vitae. Accusamus reprehenderit aspernatur nihil tempora atque voluptas magni, consequatur nostrum odit iste eaque mollitia esse cumque tenetur ad.
This paragraph is inside a container-fluid. Use .container-fluid for a full width container, spanning the entire width of the viewport. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi odit cum assumenda possimus, non, doloribus. Nam odio ut totam repellat, facilis sequi repudiandae ea provident debitis explicabo quibusdam veniam molestias!
Min Width Media Queries
-xs Extra small devices (portrait phones, less than 576px) No media query since this is the default in Bootstrap
-sm Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... }
-md Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... }
-lg Large devices (desktops, 992px and up) @media (min-width: 992px) { ... }
-xl Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }
Max Width Media Queries
-xs Extra small devices (portrait phones, less than 576px) @media (max-width: 575px) { ... }
-sm Small devices (landscape phones, less than 768px) @media (max-width: 767px) { ... }
-md Medium devices (tablets, less than 992px) @media (max-width: 991px) { ... }
-lg Large devices (desktops, less than 1200px) @media (max-width: 1199px) { ... }
-xl Extra large devices (large desktops) No media query since the extra-large breakpoint has no upper bound on its width
Grid System
Auto-layout columns
Column 1 of 2: The column class col applies to every device and viewport, from xs to xl and every column will be the same width.
Column 2 of 2: The column class col applies to every device and viewport, from xs to xl and every column will be the same width.
Column 1 of 3: The column class col applies to every device and viewport, from xs to xl and every column will be the same width.
Column 2 of 3: The column class col applies to every device and viewport, from xs to xl and every column will be the same width.
Column 3 of 3: The column class col applies to every device and viewport, from xs to xl and every column will be the same width.
Variable width content
Column 1 of 3: Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. This column class is just col.
Column 2 of 3: Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column. This column class is col-6
Column 3 of 3: This column class is just col. Note that the other columns will resize no matter the width of the center column.
Setting one column width
Column 1 of 3: Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. This column class is just col.
Column 2 of 3: Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column. This column class is col-6
Column 3 of 3: This column class is just col. Note that the other columns will resize no matter the width of the center column.
Variable width columns
Column 1 of 3
This column is using "col col-xl-2" Using the col-{breakpoint}-auto classes, columns can size itself based on the natural width of its content.
Column 2 of 3 is Using "col-12 col-md-auto"
Column3 of 3 is using "col col-xl-2"
This is super handy with single line content like inputs, numbers, etc. This, in conjunction with horizontal alignment classes, is very useful for centering layouts with uneven column sizes as viewport width changes.
Column 1 of 3
This column is using "col" only. Fugiat qui nostrum beatae, quod officiis animi nulla incidunt magni, delectus repellendus tempora saepe consectetur illum ullam facilis voluptates impedit quisquam nesciunt!
Column 2 of 3. This column is using "col-12 col-md-auto"
Column 3 of 3. This column is using "col col-xl-2"
Equal-width multi-row
This column uses just "col"
Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.
This column uses just "col"
Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.
This column uses "w-100"
Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.
This column uses just "col"
Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.
This column uses just "col"
Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.
All Breakpoints
Stacked to horizontal
Mix and Match Columns
Column Alignment
Vertical alignment
Horizontal Alignment
No Gutters
Column Wrapping
Column Resets How to use clearfix to fix uneven columns
With the handful of grid tiers available, you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes. This column uses "col-6 col-md-3"
With the handful of grid tiers available, you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes. This column uses "col-6 col-md-3"
Added the extra clearfix for only the required viewport. To do this, we created an empty div with the class of "clearfix d-sm-none-up".
This column uses "col-6 col-md-3"
With the handful of grid tiers available, you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes. This column uses "col-6 col-md-3"
Column Offsets
Reordering
Nesting
More Nesting
Level 1: This column uses "col-md-12". To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. The background color is "bg-danger"
This is still part of level 1.
Images
Responsive Images (img-fluid)
Responsive images in Bootstrap are made responsive with img-fluid. The attributes max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
This 200x200px image has "img-fluid" class applied. This image will scale with the parent element, col-md-3.
This 400x300px image has "img-fluid" class applied. This image will scale with the parent element, col-md-4.
This 800x400px image has "img-fluid" class applied. This image will scale with the parent element, col-md-2.
Image Thumbnails
200x200px image has "img-fluid" class and the parent element is col-md-2.
200x200px image has "img-fluid" class and the parent element is col-md-4. In addition to the border-radius utilities, you can use img-thumbnail to give an image a rounded 1px border appearance.
This 400x400px image has "img-fluid" class and the parent element is col-md-4.
Aligning Images
Floats
Align images with the helper float classes or text alignment classes. block-level images can be centered using the .mx-auto margin utility class.
This image has "img-fluid rounded float-left" and it also has the class "mr-2" to add some space to the right of the image.
This image has "rounded float-right". Resize your screen and notice how the image is not responsive and jumps out of the containing element. To make it responsive, you will also need to add the class "img-fluid".
Centering Images
This 300x300px image is centered inside the parent element col-md-6. The classes "img-fluid rounded mx-auto d-block"
This 300x300px image is centered inside the parent element col-md-6 using " text-center" on the containing div. The classes " img-fluid rounded" has been applied.
Image Shapes
This 300x300px image is centered inside the parent element "col-md-6 text-center". The classes "img-fluid rounded-circle" have been applied.
This 400x300px image is centered inside the parent element "col-md-6 text-center". The classes "img-fluid rounded-circle" has been applied. Since the image is rectangle, it appears oval when rounded-circle is applied.
Image Shapes with Borders
This 300x300px image is centered inside the parent element "col-md-6 text-center". The classes "img-fluid rounded-circle mx-auto d-block" have been applied.
This 400x300px image is centered inside the parent element "col-md-6 text-center". The classes "img-fluid rounded-circle mx-auto d-block" has been applied. Since the image is rectangle, it appears oval when rounded-circle is applied.
Tables
Bootstrap Default Tables
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Table Inverse
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Table Head Options
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Striped Rows
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Bordered Tables
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Mark | Otto | @TwBootstrap |
3 | Jacob | Thornton | @fat |
4 | Larry the Bird |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Mark | Otto | @TwBootstrap |
3 | Jacob | Thornton | @fat |
4 | Larry the Bird |
Hoverable Rows
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Small Tables
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Breadcrumbs
Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through ::before and content.
Breadcrumbs Using List Markup
Breadcrumbs Without List Markup
Cards
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Cards replace our old panels, wells, and thumbnails from Bootstrap 3. Similar functionality to those components is available as modifier classes for cards.
Cards assume no specific width to start, so they'll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.
Using the grid, wrap cards in columns and rows as needed. The following cards are wrapped in rows and columns:
Basic card with mixed content and a fixed width
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard with Image
Some quick example text to build on the card title and make up the bulk of the card's content.
Titles, text and links
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkCards with List Groups
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Kitchen Sink Card
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Cards with Headers and Footers
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCards Using the Sizing Utilities
Card with w-75
This card is using the sizing utility w-75 which means its 75%. Resize your screen to see it in action.
ButtonCards styled with inline css
Cards using Text-Alignment Elements
Cards with Image Caps
If your images get distorted, wrap your cards in grids.
Card title
This card is wrapped within a row and column. This content is a little bit longer.
This is small text-muted.
Card title
This card is wrapped within a row and column. This content is a little bit longer.
This is small text-muted.
Image Overlays
Outline Cards
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card Groups
In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive. Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Card Decks
Card decks are a set of equal width and height cards that aren't attached to one another.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This is a footer
Card title
This card has supporting text below as a natural lead-in to additional content.
This is a footer
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
This is a footer
Accordions
Media Object Nesting
Media objects can be infinitely nested, though we suggest you stop at some point. Place nested .media within the .media-body of a parent media object.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.- Item One
- Item Two
- Item Three
No Bullet List
- list item one
- list item two
- list item three
Ordered List
- list item one
- list item two
- list item three
Unordered List
Spacing
Margin-Tops
Margin-Bottoms
Margin-Left
Padding-Right
Padding all around
Combined Spacing
= Padding Left/Right 2rem
= Padding Top/Bottom 4rem
= Margin Top/Bottom 3rem
= Margin Top/Bottom 2rem; Padding Left/Right 2rem
Modals
Vertically Centered Modal
Vertically centered Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
Modal with Tooltip and Popover
Tooltip and Popover Within a Modal
Modal with Grid
Modal with Grid Inside
Abbreviations and Blockquotes
Abbreviations
attr
How to use
HTML