CCS Drupal Guide
  • Introduction
  • Drupal Platform Introduction
  • Drupal User Roles & Responsibilities
  • Workbench Moderation
  • Drupal Websites: Getting Started
    • Drupal Text (WYSIWYG) Editor
    • Taxonomies
  • Managing Menus
    • Sidebar Menus
  • Best Practice Tips
  • UG Drupal Content Types
    • Banners
    • Book
    • Course Outlines
    • Events
    • FAQ
    • Featured Item
    • News
    • Page
    • People Profiles
    • Service
    • Social Media Account
      • Live Feeds
    • Webform
  • Accessible Content Guide
    • Accessibility Basics
      • Accessibility First Content Development
      • HALT: Accessibility with the Drupal Text Editor
      • Accessible Design Intro
    • Content Titles & Headings
    • Links
    • Colour
    • Documents
    • Images
    • Tables
    • Lists
    • Audio & Video
    • Other Accessible Content
  • Advanced Topics on Drupal Websites
    • Blocks
    • Collapsible Sections / Accordions
    • Categorizing and Displaying Profiles
    • Headings that Expand and Collapse
    • Tabs
    • Customizing Content Layout
    • Mini Panel
    • Google Maps
    • Google reCAPTCHA
    • Bootstrap: Typography
  • SiteImprove
  • Google Analytics
  • Style Guide Code Snippets
  • Home Page Layout Options
  • Home Page Layout Tutorials
  • Content Type View Panes
    • Course Outline Panes
    • Event Panes
    • FAQ Panes
    • Feature Panes
    • News Panes
    • Social Media/Feeds
    • Service Panes
    • People profiles
  • Customizing Site Search
  • Client FAQ
Powered by GitBook
On this page
  • Options for Text Sizes
  • Lead
  • .h1 - .h6 Classes

Was this helpful?

  1. Advanced Topics on Drupal Websites

Bootstrap: Typography

Bootstrap is an open-source front-end framework that is used to create responsive webpages.

The Typography classes allow you to style your content beyond default settings. Bootstrap has a global default font size of 14px.

Example classes and elements include:

  • .lead: creates larger, emphasized text

  • .h1 - .h6: creates text that mimics the appearance of headings

  • .small and <small>: creates lighter, secondary text

  • <mark>: creates highligted text

  • <del> and <s>: creates text with a strikethrough

  • <ins> and <u>: creates underlined text

  • <strong>: creates bold text

  • <em>: creates italicized text

Options for Text Sizes

Lead

Lead is a class that can increase the size of text. This is very useful when you would like to draw the user's attention to a piece of text that is not a heading. To ensure content is accessible, avoid using heading tags solely to make text appear larger. Heading tags should also be used in logical order.

To implement Lead, add class="lead" to an HTML element:

<div class="lead">Example text.</div>

What Lead looks like, compared to unstyled text and an <h2> heading:

.h1 - .h6 Classes

Bootstrap heading classes (.h1 - .h6) create text that has the same visual effect as heading tags. Note that these are not the same as HTML headings and should not be used as such. Like Lead, use these classes for inline text that is not a heading, but needs to be emphasized.

Headings are semantic, while classes are visual.

To implement heading classes, add class=h[numeral between 1 and 6] to an HTML element:

<div class="h1">Example h1 class text</div>

<div class="h2">Example h2 class text</div>

<div class="h3">Example h3 class text</div>

<div class="h4">Example h4 class text</div>

<div class="h5">Example h5 class text</div>

<div class="h6">Example h6 class text</div>

What heading classes look like:

PreviousGoogle reCAPTCHANextSiteImprove

Last updated 6 years ago

Was this helpful?

example text with h1-h6 bootstrap heading classes
text with lead class compared with unstyled paragraph text and an h2 heading