Medical Information
 

In order to provide you with relevant and meaningful content we need to know more about you.

Please choose the category that best describes you.

This content is intended for U.S. Healthcare Professionals. Would you like to proceed?

Styleguide

Colors

 
 
 
 
 
 
 
 
 
@blue:              #006da3;
@blue-dark:         #001d39;
@blue-light:        #64cbed;
@blue-lighter:      #c5ecf9;
@brown:             #b85600;
@purple:            #371c49;
@blue-gradient:     #001d39 - #005583;
@red:               #ff0000;
@green:             #6ea831;

Grid system

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options.

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-sm-4 are available for quickly making grid layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-sm-4.
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-sm-* class to an element will not only affect its styling on small devices but also on medium devices if a .col-md-* class is not present.

Look to the examples for applying these principles to your code.

Media queries

We use the following media queries to create the key breakpoints in our grid system.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1130px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~94px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Example: Stacked-to-horizontal

Using a single set of .col-sm-* grid classes, you can create a basic grid system that starts out stacked on mobile devices before becoming horizontal on tablet (small) devices. Place grid columns in any .row.

.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-6
.col-sm-6
.col-sm-4
.col-sm-8
.col-sm-8
.col-sm-4
.col-sm-3
.col-sm-9
.col-sm-9
.col-sm-3
<div class="row">
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
</div>
<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>
<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm-6">.col-sm-6</div>
  <div class="col-sm-6">.col-sm-6</div>
</div>
<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>
<div class="row">
  <div class="col-sm-8">.col-sm-8</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-9">.col-sm-9</div>
</div>
<div class="row">
  <div class="col-sm-9">.col-sm-9</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

Typography

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1. Heading

44px regular -1px letter spacing

h2. Heading

40px regular -1px letter spacing

h3. Heading

30px regular -0.5px letter spacing

h4. Heading

26px bold
h5. Heading
18px regular
h6. Heading
16px regular
            <h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
          

Body copy

Global default font-size is 18px, with a line-height of 1.445 (26px). This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (13px by default).

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Default link

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.

<a href="#">Link</a>

Buttons Styles

<a class="btn btn-primary" href="#">Primary</a>
<a class="btn btn-secondary" href="#">Secondary</a>
<a class="btn btn-info" href="#">Info</a>
<a class="btn-arrow" href="#">Arrow</a>
<a class="btn-arrow-light" href="#">Arrow light</a>

Lists

Unordered

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

Tables

Header Header
Content Content
Content Content
<table>
  <tr>
    <th>
      Header
    </th>
    <th>
      Header
    </th>
  </tr>
  <tr>
    <td>
      Content
    </td>
    <td>
      Content
    </td>
  </tr>
  <tr>
    <td>
      Content
    </td>
    <td>
      Content
    </td>
  </tr>
</table>

Available icons

  • icon-arrow-circle-left
  • icon-arrow-circle-right
  • icon-arrow-circle-down
  • icon-arrow-right
  • icon-phone
  • icon-chat
  • icon-email
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-view
  • icon-download
  • icon-notification
  • icon-resources
  • icon-clinical-trials
  • icon-patient-assist
  • icon-search
  • icon-url
  • icon-medical-shield
  • icon-medical-snake
  • icon-stethoscope

How to use

All icons require individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

Don't mix with other components

Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.

Only for use on empty elements

Icon classes should only be used on elements that contain no text content and have no child elements.

Accessible icons

Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-hidden="true" attribute.

If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the .sr-only class.

If you're creating controls with no other text (such as a <button> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an aria-label attribute on the control itself.

<span class="icon-arrow-circle-left" aria-hidden="true"></span>

Form controls

Text input

<input type="text" class="form-control" placeholder="Input Text">

Textarea

<textarea class="form-control" rows="3"></textarea>

Select

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Radios

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    <span></span>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    <span></span>
    Option two can be something else and selecting it will deselect other options
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
    <span></span>
    Option three
  </label>
</div>

Checkboxes

<div class="checkbox">
  <label>
    <input type="checkbox" value="" checked="checked">
    <span></span>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="">
    <span></span>
    Option two
  </label>
</div>
Didn’t find what you were looking for? Contact us.
Didn’t find what you were looking for? Contact us.
Pfizer Medical Information Call Icon
Call 800-438-1985*
*9AM-5PM ET Monday to Friday; excluding holidays

Connect with Pfizer Medical Information regarding your medical question.

Pfizer Medical Information Chat Icon

Chat online with Pfizer Medical Information regarding your enquiry on a Pfizer medicine.

Pfizer Medical Information Medical Inquiry Icon
Submit a medical question on a Pfizer prescription product*
The submission will be reviewed during our standard business hours.

Click Here