Header Two
Header Three
Has this nifty blue underline feature.
Header Four
. . . is basic blue.
Header Five
. . . is basic black.
WordPress Keyboard Shortcuts
Global Keyboard shortcuts
- Shift+Alt+H — Display these keyboard shortcuts.
- Ctrl+Shift+Alt+M — Switch between visual editor and code editor.
- Ctrl+Shift+Alt+F — Toggle fullscreen mode.
- Shift+Alt+O — Open the block navigation menu.
- Ctrl+Shift+, — Show or hide the settings sidebar.
- Ctrl+ Shift+Alt+N — Navigate to the next part of the editor.
- Ctrl+Shift+Alt+P — Navigate to the previous part of the editor.
- Alt+F10 — Navigate to the nearest toolbar.
Q Block shortcuts
- Ctrl+Shift+D — Duplicate the selected block(s).
- Shift+Alt+Z — Remove the selected block(s).
- Ctrl+Alt+T — Insert a new block before the selected block(s).
- Ctrl+Alt+Y — Insert a new block after the selected block(s).
- Ctrl+Shift+Alt+T — Move the selected block(s) up.
- Ctrl+Shift+Alt+Y — Move the selected block(s) down.
- / — Change the block type after adding a new paragraph.
- backspace — Remove multiple selected blocks.
Text selection/formatting
- Ctrl+A — Select all text when typing. Press again to select all blocks.
- esc — Clear selection.
- Ctrl+B — Make the selected text bold.
- Ctrl+I — Make the selected text italic.
- Ctrl+K — Convert the selected text into a link.
- Ctrl+Shift+K — Remove a link.
- **Ctrl+U Underline the selected text.
- Ctrl+S — Save your changes.
- Ctrl+Z — Undo your last changes.
- Ctrl+Shift+Z — Redo your last undo.
Header Six is Centered, By Default
Basic grid layouts to get you familiar with building within the Bootstrap grid system.
- Link to Bootstrap Components
- Link to Bootstrap Utilities
- Link to Flex Utilities
- Link to List Groups
- Link to Text Utilities
In these examples, we use a simple — <style type=”text/css”> — at the top of the html file to see the col shapes in green.
Five grid tiers
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden, but we use mostly — col-sm-[x] — where [x] is a number between 3 and 9.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa hic adipisci quia explicabo iure? A velit quam sapiente dolorum placeat rerum, quibusdam doloremque dicta neque dignissimos voluptates eum enim pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur mollitia, reiciendis expedita, magni nam inventore consequuntur eveniet quisquam, provident assumenda soluta commodi quod quis magnam voluptatibus fuga necessitatibus deserunt at!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit nihil sequi rerum exercitationem harum quibusdam, dolorum, sapiente maxime deserunt suscipit enim impedit deleniti, repellendus maiores pariatur ad facere repudiandae libero.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique dolorem aspernatur dolore ex quae eos, eligendi odio totam molestias nostrum labore, explicabo sunt adipisci deserunt illum, ipsum quasi, ullam hic.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, tempore, officia. Suscipit recusandae consectetur itaque adipisci ullam. Incidunt quidem placeat, repellat. Quis iusto sed eligendi accusamus repellendus aperiam, impedit iure?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis totam sequi iste possimus sed tempore pariatur dignissimos voluptate itaque et explicabo omnis, tenetur, laudantium deserunt minima veritatis rerum quos cumque?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio unde excepturi odit quas, ut, in voluptatem delectus tenetur, molestias omnis maiores facilis ea non ab cumque, expedita error officiis. Quia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quisquam veritatis eos illo fuga amet quaerat sed, nemo beatae praesentium, ullam iusto molestiae eligendi deserunt expedita officia culpa. Magni, maiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat maxime accusantium delectus, maiores cumque eveniet nesciunt, officia numquam natus eius soluta neque quia enim molestias magnam iusto totam facere optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, laboriosam, deleniti! Quasi porro reprehenderit eligendi sit, molestias obcaecati modi numquam laudantium, eum ex debitis est inventore illum magnam earum nobis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, praesentium rem, repudiandae vero enim minus fuga reiciendis corrupti atque excepturi perspiciatis error libero adipisci repellendus dolorum molestias quis. Ex, quas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure voluptatum qui magni possimus debitis iste, consectetur dolorem cumque, at libero maiores! Nam quidem unde, corporis tempora aut, reiciendis iste doloribus?
Colors and Other Utils
Link Colors
Primary link
Secondary link
Success link
Danger link
Warning link
Info link
Light link
Dark link
Muted link
White link
Background Color
Shadows
Sizing
Flex Box Direction
Flex Box Grow and Shrink
Flex Box Auto Margins
Flex Box Align Self
Use align-self utilities on flexbox items to individually change their alignment on the cross axis
Float
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint commodi praesentium libero, consequatur cum quisquam perferendis totam porro tenetur voluptatum, distinctio, optio exercitationem velit ea non illo error minima! Harum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sint vero odio, natus ducimus in dignissimos incidunt doloremque rem? Accusamus est fugit commodi, eaque excepturi explicabo possimus quasi quo repellat!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint commodi praesentium libero, consequatur cum quisquam perferendis totam porro tenetur voluptatum, distinctio, optio exercitationem velit ea non illo error minima! Harum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sint vero odio, natus ducimus in dignissimos incidunt doloremque rem? Accusamus est fugit commodi, eaque excepturi explicabo possimus quasi quo repellat!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint commodi praesentium libero, consequatur cum quisquam perferendis totam porro tenetur voluptatum, distinctio, optio exercitationem velit ea non illo error minima! Harum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sint vero odio, natus ducimus in dignissimos incidunt doloremque rem? Accusamus est fugit commodi, eaque excepturi explicabo possimus quasi quo repellat!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint commodi praesentium libero, consequatur cum quisquam perferendis totam porro tenetur voluptatum, distinctio, optio exercitationem velit ea non illo error minima! Harum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sint vero odio, natus ducimus in dignissimos incidunt doloremque rem? Accusamus est fugit commodi, eaque excepturi explicabo possimus quasi quo repellat!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint commodi praesentium libero, consequatur cum quisquam perferendis totam porro tenetur voluptatum, distinctio, optio exercitationem velit ea non illo error minima! Harum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sint vero odio, natus ducimus in dignissimos incidunt doloremque rem? Accusamus est fugit commodi, eaque excepturi explicabo possimus quasi quo repellat!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint commodi praesentium libero, consequatur cum quisquam perferendis totam porro tenetur voluptatum, distinctio, optio exercitationem velit ea non illo error minima! Harum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sint vero odio, natus ducimus in dignissimos incidunt doloremque rem? Accusamus est fugit commodi, eaque excepturi explicabo possimus quasi quo repellat!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint commodi praesentium libero, consequatur cum quisquam perferendis totam porro tenetur voluptatum, distinctio, optio exercitationem velit ea non illo error minima! Harum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sint vero odio, natus ducimus in dignissimos incidunt doloremque rem? Accusamus est fugit commodi, eaque excepturi explicabo possimus quasi quo repellat!
Buttons
Solid Buttons
| | | | | | |
|
Outline Buttons
| | | | | | |
Buttons: Other Sizes
| | |
Buttons at Block Level
|
Badges
Badges on Headings
Heading with badge-primaryPrimary
Heading with badge-secondary Secondary
Heading with badge-success Success
Heading with badge-danger Danger
Heading with badge-warning Warning
Heading with badge-info Info
Heading with badge-warning Light
Heading with badge-info Dark
Badges on Buttons
Badges as Pills
Primary | Secondary | Success | Danger | Warning | Info | Light | Dark
Badges as Links
Primary | Secondary | Success | Danger | Warning | Info | Light | Dark |
Button Groups
Button Toolbar
Button Toolbar
Button Nesting
Alerts
A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.
Cards
Starter Card
Card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Card Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card Markup
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Card Text Alignment
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Cards and Navigation
Special title treatment
With supporting text below as a natural lead-in to additional content.
Cards with Image Caps
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.
Last updated 3 mins ago
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.
Last updated 3 mins ago
Horizontal
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.
Last updated 3 mins ago
Card Background and Color
Primary card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Card Groups
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 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.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
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.
Last updated 3 mins ago
Grid Cards
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.
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.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
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.
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.
Card title
This is a short card.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
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.
Card Columns
Card title that wraps to a new line
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Card title
This card has a regular title and short paragraphy of text below it.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.
Last updated 3 mins ago
List Groups
Flush
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Horizontal
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
Contextual Classes
A simple primary list group item
A simple secondary list group item
A simple success list group item
A simple danger list group item
A simple warning list group item
A simple info list group item
A simple light list group item
A simple dark list group item
Custom List Goups
List group item heading
3 days ago
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days ago
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
3 days ago
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Javacript Behavior
Other Stuff
Two columns with two nested columns
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
At mobile device sizes, tablets and down, these columns and their nested columns will stack.
Mixed: mobile and desktop
The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.
Mixed: mobile, tablet, and desktop
Containers
Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.