Talk to our experts

Want to learn more, discuss ideas or share opinions?

Get in touch

Topography

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Display headings

Display 1

Display 2

Display 3

Display 4

Lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc odio, aliquam eu felis quis, condimentum dignissim enim. Nam molestie, lacus eu ullamcorper aliquam, magna nulla varius sem, a mattis mi ante ac enim. Etiam elementum sodales ultricies. Cras gravida finibus arcu, at euismod velit. Nam sit amet accumsan ligula. In hac habitasse platea dictumst. Curabitur quis dui finibus, pharetra nunc vitae, dictum arcu. Suspendisse ac metus blandit, vestibulum lacus eu, tempus lectus. Aliquam ultrices rutrum turpis vel pharetra.

Inline text elements

Styling for common inline HTML5 elements.

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.

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lists

Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Inline

Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Alerts

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin.

Badges

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Badges can be used as part of links or buttons to provide a counter.

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Buttons

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.









Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.








Sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.



Forms

Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.

We’ll never share your email with anyone else.

Form controls

Textual form controls—like inputs, selects, and textareas are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.





Form validation

Please enter a message in the textarea.

Example invalid feedback text

More example invalid feedback text

Example invalid custom select feedback

Example invalid custom file feedback

Custom form controls

For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.

Checkboxes

Radios

Switches

Select menu

Modals

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

Live demo

Pagination

We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping

Custom content block

Richtext with quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget dui purus. Praesent diam nunc, rhoncus at sapien et, laoreet viverra lacus. Ut venenatis sem vitae elementum tincidunt. Fusce hendrerit vestibulum lacinia. Fusce eu euismod felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Call to Action

“People Intouch has proven itself as a true partner for over 8 years. Their support and knowledge is insightful, quick & pragmatic.”

Klaus Schweda Former Compliance Lead

Hero

Custom content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget dui purus. Praesent diam nunc, rhoncus at sapien et, laoreet viverra lacus. Ut venenatis sem vitae elementum tincidunt. Fusce hendrerit vestibulum lacinia. Fusce eu euismod felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Call to Action

Custom content block

Quote with visual

Call to Action

Anonymous dialogue between reporter and organisation
Multilanguage
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non ex erat.

Learn more

Annual penetration tests & high level encryption
Assurances: ISAE3000 Type II & European Privacy Seal