Tearsheet

Typography

Paragraph

Standard paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere auctor vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. In id facilisis arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas et tristique leo, at sollicitudin ligula. Proin eget vehicula ligula, vel fringilla turpis.

Morbi venenatis odio arcu, quis maximus enim fermentum vitae. Pellentesque gravida laoreet dapibus. Praesent et interdum turpis, vitae congue metus.

Here is an example of highlighted text.

Font Stack

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

Headers

Heading h1

Heading h2

Heading h2 class=”component-title”

Heading h2 class=”component-title-alt”

Heading h3

Heading h4

Heading h5
Heading h6
Blockquote

Standard <blockquote>. Use for pull quotes, emphasis, callouts. Maecenas et tristique leo, at sollicitudin ligula. Proin eget vehicula ligula.

Lists

Unordered base

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five

Unordered no bullets <ul class="list-flat">

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five

Ordered base

  1. Item One
  2. Item Two
  3. Item Three
  4. Item Four
  5. Item Five

List group base

  • Cras justo odio
  • Dapibus ac facil
  • Morbi leo risus

 

Unordered or ordered list with spacing between items

The ul has an added class of “space-li” <ul class="space-li">

  • Item One .space-li li:first-child { margin: 2rem 0 1rem; }
  • Item Two and subsequent .space-li li { margin: 1rem 0; }
  • Item Three
  • Item Four
  • Item Five

Here’s another paragraph of text, preceding an ordered list with a class of “space-li” <ol class="space-li">

  1. Item One .space-li li:first-child { margin: 2rem 0 1rem; }
  2. Item Two and subsequent .space-li li { margin: 1rem 0; }
  3. Item Three
  4. Item Four
  5. Item Five

Complex Ordered

  1. Nest <ol> tags
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in accumsan felis, ut consequat sapien. Phasellus cursus eros semper felis imperdiet mollis
    1. Quisque non massa ullamcorper, pulvinar nisl nec
    2. Nunc elementum eros nec molestie sollicitudin:
      1. Nulla eget tempus dui
      2. Morbi dignissim, sapien id tincidunt rhoncus, erat libero dignissim ligula, vel auctor tellus dolor ac lacus. Fusce vel felis non massa tristique malesuada at ut orci auctor augue nulla, nec aliquam ante gravida vitae
      3. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia

Code Display

inline

For inline code, use the <code> tag

code block

For code blocks, use the <pre> tag. Remove all unnecessary leading spaces/tabs and convert all < to &lt; and all > to &gt;

Sample: Pre

<div class="col-md-4">
  <h4>List group base</h4>
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">This is a long line to demonstrate horizontal scrolling of the containing box. Lorem ipsum dolor</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Forms

More in the Bootstrap 4 documentation


We’ll never share your email with anyone else.





This is some placeholder block-level help text for the above input. It’s a bit lighter and easily wraps to a new line.
Radio buttons

Tables

More in the Bootstrap 4 documentation

Responsive

Table heading Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell

Reflow

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

Text Links

Example of the default text link style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere auctor vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. In id facilisis arcu.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas et tristique leo, at sollicitudin ligula. Proin eget vehicula ligula, vel fringilla turpis.

Colors

$primary-color
$secondary-color
$tertiary-color
$quaternary-color
$highlight-color
$brand-success
$brand-info
$brand-warning
$brand-danger
$text-color
$white-color
$black-color
$gray-xxdk
$gray-xdk
$gray-dk
$gray-md
$gray-xmd
$gray-lt
$gray-xlt
$gray-xxlt
$gray-xxxlt

Buttons


Images

Formats

RASTER: Continuous tone images should generally be jpg format, standard Photoshop compression level 60 recommended. PNG (Portable Network Graphics) format may be occasionally appropriate in specific circumstances and is used by some legacy elements.

A width of about 1200 pixels is ideal. Smaller images will look pixelated and larger ones are overkill.

VECTOR: All non-continuous tone images should be SVG (Scalable Vector Graphics) format. SVG requirements:

  • Convert all fonts to outlines before saving SVGs for Production. An additional Illustrator file with editable fonts may need to be saved by artwork creators for future updates of diagrams. SVGs with editable fonts may not display properly across all devices and platforms.
  • In general, fit artboard to artwork bounds before saving SVG. This allows all padding/margin to be applied via CSS and reduces complexity of maintenance and upgrades. Illustrator (or other vector art creation software) artboards can exceed artwork size where cropping is required.
  • Simplify SVGs where possible: no stray points, line things up, delete unnecessary elements. Contact the DoITT UX Group for assistance if needed.
  • Save SVGs from Illustrator using the SVG 1.1 default settings. We might switch to compressed SVG in the future but we’re not recommending it at this time.

 

Full width

Use class “img-fluid” to make image responsive to fill its container horizontally and give it default top and bottom margin. Brief, descriptive alt tags are required.

<img src="https://opendata.cityofnewyork.us/wp-content/uploads/2016/12/placeholder-1200x400.svg" alt="placeholder-1200x400" class="img-fluid">

placeholder-1200x400

Float left using width-md and bootstrap utility classes

placeholder 1200x400

Use default Bootstrap utility classes for responsive floats at the standard breakpoints (xs, sm, md, lg, xl).

<img src="https://opendata.cityofnewyork.us/wp-content/uploads/2016/12/placeholder-1200x400.svg" alt="placeholder 1200x400" class="img-fluid width-md float-md-left">

Include the class width-sm which will supply default padding. Text will wrap beside and under the floated image.

 

Float left using width-sm and bootstrap utility classes

placeholder 1200x400

Use default Bootstrap utility classes for responsive floats at the standard breakpoints (xs, sm, md, lg, xl).

<img src="https://opendata.cityofnewyork.us/wp-content/uploads/2016/12/placeholder-1200x400.svg" alt="placeholder 1200x400" class="img-fluid width-sm float-md-left">

Include the class width-sm which will supply default padding. Text will wrap beside and under the floated image.

 

Float right using width-md and bootstrap utility classes

placeholder 1200x400

Use default Bootstrap utility classes for responsive floats at the standard breakpoints (xs, sm, md, lg, xl).

<img src="https://opendata.cityofnewyork.us/wp-content/uploads/2016/12/placeholder-1200x400.svg" alt="placeholder 1200x400" class="img-fluid width-md float-md-right">

Include the class width-md which will supply default padding. Text will wrap beside and under the floated image.

 

Float right using width-sm and bootstrap utility classes

placeholder 1200x400

Use default Bootstrap utility classes for responsive floats at the standard breakpoints (xs, sm, md, lg, xl).

<img src="https://opendata.cityofnewyork.us/wp-content/uploads/2016/12/placeholder-1200x400.svg" alt="placeholder 1200x400" class="img-fluid width-sm float-md-right">

Include the class width-sm which will supply default padding. Text will wrap beside and under the floated image.

 

Center image using width-lg center-block, width-md center-block or width-sm center-block

placeholder 1200x400

<img src="https://opendata.cityofnewyork.us/wp-content/uploads/2016/12/placeholder-1200x400.svg" alt="placeholder 1200x400" class="img-fluid width-lg center-block">

placeholder 1200x400

<img src="https://opendata.cityofnewyork.us/wp-content/uploads/2016/12/placeholder-1200x400.svg" alt="placeholder 1200x400" class="img-fluid width-md center-block">

placeholder 1200x400

<img src="https://opendata.cityofnewyork.us/wp-content/uploads/2016/12/placeholder-1200x400.svg" alt="placeholder 1200x400" class="img-fluid width center-block">

Bootstrap 4 Documentation

For components not outlined here, refer to the Bootstrap 4 general documentation

Share