All Bootstrap Patterns
Typography
Example Heading h1 small
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam nesciunt molestias architecto beatae doloremque dolore, dolor veniam odio earum rem distinctio ipsam voluptatum facere provident accusamus alias eum atque natus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam nesciunt molestias architecto beatae doloremque dolore, dolor veniam odio earum rem distinctio ipsam voluptatum facere provident accusamus alias eum atque natus?
Example Heading h3 small
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam nesciunt molestias architecto beatae doloremque dolore, dolor veniam odio earum rem distinctio ipsam voluptatum facere provident accusamus alias eum atque natus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam nesciunt molestias architecto beatae doloremque dolore, dolor veniam odio earum rem distinctio ipsam voluptatum facere provident accusamus alias eum atque natus?
Example Heading h5 small
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam nesciunt molestias architecto beatae doloremque dolore, dolor veniam odio earum rem distinctio ipsam voluptatum facere provident accusamus alias eum atque natus?
Badge
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example body text
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
This line of text is meant to be treated as fine print.
The following is rendered as bold text.
The following is rendered as italicized text.
An abbreviation of the word attribute is attr.
Untruncated - This is a really long sentence, and can break the layout of the page so it can be helpful to truncate it as long as there is some way for the user to see it in full form such as on a details page.
Truncated - This is a really long sentence, and can break the layout of the page so it can be helpful to truncate it as long as there is some way for the user to see it in full form such as on a details page.
Emphasis classes
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Breadcrumb
Buttons
Cards
Mayor Announces Bridges to Business Vendor Certification
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
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.
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.
Accordion
FAQ Pattern
Frequently Asked Questions
An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner.
While accordions sound ideal for presenting complex content, like with many other widgets and implementations, they are not a one-size-fits-all solution. There are major downsides to accordions.
- Forcing people to click on headings one at a time to display full content can be cumbersome.
- Accordions increase interaction cost.
- Hiding content behind navigation diminishes people’s awareness of it.
- Accessibility is an important consideration.
- Printing problems
- Myth #1: Users don’t scroll long pages
- Myth #2: Customers don’t read information at the bottom of the page
- Myth #3: People avoid pages with a lot of content
Accordions should be avoided when your audience needs most or all of the content on the page to answer their questions. Better to show all page content at once when the use case supports it. In such cases, don’t worry too much about page length. Relevance trumps page length.
Pagination
Buttons
Typography
Colors
Blockquotes
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.
Tables
| Type | Column heading | Column heading | Column heading |
|---|---|---|---|
| Active | Column content | Column content | Column content |
| Default | Column content | Column content | Column content |
| Primary | Column content | Column content | Column content |
| Secondary | Column content | Column content | Column content |
| Success | Column content | Column content | Column content |
| Danger | Column content | Column content | Column content |
| Warning | Column content | Column content | Column content |
| Info | Column content | Column content | Column content |
| Light | Column content | Column content | Column content |
| Dark | Column content | Column content | Column content |
Forms
Navs
Tabs
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.
Pills
Indicators
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Alerts
Warning!
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Badges
Containers
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1