Typography

Typography sets default styles for headings, paragraphs, semantic text, blockquote, lists and code elements.

Headings

H1 Title 5rem

H2 Title 4rem

H3 Title 3rem

H4 Title 2.4rem

H5 Title 2rem
H6 Title 1.6rem
<h1>H1 Title</h1>
<h2>H2 Title <small class="label">4rem</small></h2>

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <a href="#">dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>

Semantic text elements

I18N <abbr>
Bold <strong> <b>
Citation <cite>
Hello World! <code>
Deleted <del>
Emphasis <em>
Italic <i>
Inserted <ins>
Ctrl + S <kbd>
Highlighted <mark>
漢 kan 字 ji <ruby>
Strikethrough <s>
Sample <samp>
Text Subscripted <sub>
Text Superscripted <sup>
<time>
Underline <u>
x = y + 2 <var>

Optimized for east asian fonts

你好, こんにちは, 안녕하세요

Chinese (Simplified)

革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。

Chinese (Tranditional)

山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」

Japanese

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。

Korean

나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.

Use the attribute lang or add the class cjk to the container element to have better Asian CJK (Chinese, Japanese and Korean) support.

<p class="cjk">祇園精舎の鐘の声、諸行無常の響きあり。……</p>
<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり。……</p>

Blockquote

The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.

- Bill Gates 
<blockquote>
  <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
  <cite>- Bill Gates</cite>
</blockquote>

Lists

  • list item 1
  • list item 2
    • list item 2.1
    • list item 2.2
    • list item 2.3
  • list item 3
  1. list item 1
  2. list item 2
    1. list item 2.1
    2. list item 2.2
    3. list item 2.3
  3. list item 3
description list term 1
description list description 1
description list term 2
description list description 2
description list term 3
description list description 3
<!-- unordered list -->
<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2.1</li>
      <li>list item 2.2</li>
      <li>list item 2.3</li>
    </ul>
  </li>
  <li>list item 3</li>
</ul>

<!-- description list -->
<dl>
  <dt>description list term</dt>
  <dd>description list description</dd>
</dl>

Tables

Tables include default styles for tables and data sets.

name genre release date
The Shawshank Redemption Crime, Drama 14 October 1994
The Godfather Crime, Drama 24 March 1972
Schindler's List Biography, Drama, History 4 February 1994
Se7en Crime, Drama, Mystery 22 September 1995

Add the class table to any <table> element. The class will add padding, border and emphasized table header. Use table-striped to <table> to add zebra striped style. For hoverable table rows, you can add the class table-hover to enable hover style.

Use the class active to make <tr> element highlighted. 

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>name</th>
      <th>genre</th>
      <th>release date</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>The Shawshank Redemption</td>
      <td>Crime, Drama</td>
      <td>14 October 1994</td>
    </tr>
  </tbody>
</table>

Buttons

Buttons include simple button styles for actions in different types and sizes.

Add the class btn to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons. A button with the class loading can show loading indicator. 

<button class="btn">default button</button>
<button class="btn btn-primary">primary button</button>
<button class="btn btn-link">link button</button>

<!-- a button with loading state -->
<button class="btn loading">button</button>

Add the class disabled or the attribute disabled for a disabled button.

Button sizes

Add the class btn-sm or btn-lg for small or large button size. Also, you can add the class btn-block for a full-width button.

Please note that you could use the class btn-action for a square button, or add another class circle for a round button, which is often used as a Float Action Button (FAB).

<button class="btn btn-lg">large button</button>
<button class="btn btn-sm">small button</button>

<button class="btn btn-block">block button</button>

<button class="btn btn-action"><i class="icon icon-markunread"></i></button>
<button class="btn btn-action circle"><i class="icon icon-markunread"></i></button>

Icons with the class icon can be correctly rendered in each button size. 

<button class="btn btn-primary btn-lg"><i class="icon icon-markunread"></i> large</button>
<button class="btn btn-primary"><i class="icon icon-markunread"></i> normal</button>
<button class="btn btn-primary btn-sm"><i class="icon icon-markunread"></i> small</button>

Button groups

If you want to use buttons as a group, add the class btn-group to the container. You can add the class btn-group-block for a full-width button group.

<div class="btn-group btn-group-block">
  <button class="btn">first button</button>
  <button class="btn">second button</button>
  <button class="btn">third button</button>
</div>

Forms

Forms provide the most common control styles used in forms, including label, input, textarea, select, checkbox, radio and switch. 

<form>
  <!-- form input control -->
  <div class="form-group">
    <label class="form-label" for="input-example-1">Name</label>
    <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
  </div>
  <!-- form radio control -->
  <div class="form-group">
    <label class="form-label">Gender</label>
    <label class="form-radio">
      <input type="radio" name="gender" />
      <i class="form-icon"></i> Male
    </label>
    <label class="form-radio">
      <input type="radio" name="gender" checked />
      <i class="form-icon"></i> Female
    </label>
  </div>
  <!-- form select control -->
  <div class="form-group">
    <select class="form-select">
      <option>Choose an option</option>
      <option>Slack</option>
      <option>Skype</option>
      <option>Hipchat</option>
    </select>
  </div>
  <!-- form switch control -->
  <div class="form-group">
    <label class="form-switch">
      <input type="checkbox" />
      <i class="form-icon"></i> Send me emails with news and tips
    </label>
  </div>
  <!-- form textarea control -->
  <div class="form-group">
    <label class="form-label" for="input-example-3">Message</label>
    <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
  </div>
  <!-- form checkbox control -->
  <div class="form-group">
    <label class="form-checkbox">
      <input type="checkbox" />
      <i class="form-icon"></i> Remember me
    </label>
  </div>
</form>

You can use :indeterminate pseudo class for indeterminate state of checkboxes.

If you want to have a horizontal form, add the class form-horizontal to the <form> container. And add the class col-[1-12] to the child elements for form row layout. 

<form class="form-horizontal">
  <div class="form-group">
    <div class="col-3">
      <label class="form-label" for="input-example-1">Name</label>
    </div>
    <div class="col-9">
      <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
    </div>
  </div>
  <!-- form structure -->
</form>

To use form validation styles, add is-success and is-danger to the controls or add has-success and has-danger to parent elements. You can use the class form-input-hint to provide form validation success and error messages.

The name is invaild.

The email is available.

The option is invaild.

The option is available.

<form>
  <!-- form validation class: has-success -->
  <div class="form-group has-success">
    <label class="form-label" for="input-example-1">Name</label>
    <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
    <p class="form-input-hint">The name is invaild.</p>
  </div>

  <!-- form validation class: is-success -->
  <div class="form-group">
    <label class="form-label" for="input-example-1">Name</label>
    <input class="form-input is-success" type="text" id="input-example-1" placeholder="Name" />
    <p class="form-input-hint">The name is invaild.</p>
  </div>
</form>

For smaller or larger input and select controls, you could add input-sm/input-lg and select-sm/select-lg to the elements.

Input groups

@slack.com
slack.com/
@slack.com
slack.com/
@slack.com
slack.com/

If you want to attach text and button along with an input, add the class input-group to the input container. And add the class input-group-addon to the text element and input-group-btn to the button element.

<!-- normal input group -->
<div class="input-group">
  <span class="input-group-addon">slack.com/</span>
  <input type="text" class="form-input" placeholder="site name" />
</div>

<!-- large input group -->
<div class="input-group">
  <span class="input-group-addon addon-lg">slack.com/</span>
  <input type="text" class="form-input input-lg" placeholder="site name" />
</div>

<!-- normal input group with button -->
<div class="input-group">
  <span class="input-group-addon">slack.com/</span>
  <input type="text" class="form-input" placeholder="site name" />
  <button class="btn btn-primary input-group-btn">Submit</button>
</div>

Labels

Labels are formatted text tags for highlighted, informative information.

default label primary label success label warning label danger label

Add the class label to <span> or <small> elements. You can add another class label-primary, label-success, label-warning and label-danger for a primary colored label.

<span class="label">default label</span>
<span class="label label-primary">primary label</span>

Codes

Codes are inline and multiline code snippets.

For inline code, you can use the element <code>.

For multiline code snippet blocks, you can use <pre> with the class code as a container, and add <code> inside it. The attribute data-lang is rendered as the language name in the top right.

<pre class="code" data-lang="HTML"><code><!-- code snippets -->
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
  Submit
&lt;<span class="tag">/button</span>&gt;
</code></pre>

Media

Media includes responsive images, figures and video classes.

Add the class img-responsive to <img> elements. The images will scale with the parent sizes.

macOS El Capitan Wallpaper 
<img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper" />

You can use the element <figure> for an image with a caption. Add the class figure to <figure> element. The images with the class img-responsive will be responsive. And the included class figure-caption will provide basic style for caption. Also, you can use text-left, text-center and text-right for caption alignment.

macOS Yosemite Wallpaper
macOS Yosemite wallpaper
<figure class="figure">
  <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
  <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
</figure>

For responsive video, add a container with the class video-responsive. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.

<div class="video-responsive">
  <iframe src="https://www.youtube.com/embed/BzMLA8YIgG0" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>