People Intouch
Styleguide
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.
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.
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.
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.
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
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
