Writing power

Typography

Use the following tags and classes to write a better documentation.

Headings

All HTML headings, <h1> through <h6>, are available.


<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Create lighter, secondary text in any heading with a generic <small> tag or the .small class.


<h1>Heading 1 <small>Small text</small></h1>
<h2>Heading 2 <small>Small text</small></h2>
<h3>Heading 3 <small>Small text</small></h3>
<h4>Heading 4 <small>Small text</small></h4>
<h5>Heading 5 <small>Small text</small></h5>
<h6>Heading 6 <small>Small text</small></h6>

Heading 1 Small text

Heading 2 Small text

Heading 3 Small text

Heading 4 Small text

Heading 5 Small text

Heading 6 Small text

Text colors

Use follwoing contextual classes to change color of your text.


<p>This is a normal paragraph without any contectual classes.</p>
<p class="txt-purple">A paragraph with .txt-purple class.</p>
<p class="txt-green">A paragraph with .txt-green class.</p>
<p class="txt-blue">A paragraph with .txt-blue class.</p>
<p class="txt-red">A paragraph with .txt-red class.</p>
<p class="txt-orange">A paragraph with .txt-orange class.</p>
<p class="txt-dark">A paragraph with .txt-dark class.</p>
<p class="txt-gray">A paragraph with .txt-gray class.</p>
<p class="txt-white bg-dark">A paragraph with .txt-white and .bg-dark class.</p>

This is a normal paragraph without any contectual classes.

A paragraph with .txt-purple class.

A paragraph with .txt-green class.

A paragraph with .txt-blue class.

A paragraph with .txt-red class.

A paragraph with .txt-orange class.

A paragraph with .txt-dark class.

A paragraph with .txt-gray class.

A paragraph with .txt-white and .bg-dark class.

Background colors

Use follwoing contextual classes to change background color of your text.


<p>This is a normal paragraph without any contectual classes.</p>
<p class="bg-purple">A paragraph with .bg-purple class.</p>
<p class="bg-green">A paragraph with .bg-green class.</p>
<p class="bg-blue">A paragraph with .bg-blue class.</p>
<p class="bg-orange">A paragraph with .bg-orange class.</p>
<p class="bg-red">A paragraph with .bg-red class.</p>
<p class="bg-dark">A paragraph with .bg-dark class.</p>
<p class="bg-dark-light">A paragraph with .bg-dark-light class.</p>
<p class="bg-dark-lighter">A paragraph with .bg-dark-lighter class.</p>
<p class="bg-dark-lightest">A paragraph with .bg-dark-lightest class.</p>
<p class="bg-gray">A paragraph with .bg-gray class.</p>
<p class="bg-gray-light">A paragraph with .bg-gray-light class.</p>
<p class="bg-gray-lighter">A paragraph with .bg-gray-lighter class.</p>
<p class="bg-gray-lightest">A paragraph with .bg-gray-lightest class.</p>
<p class="bg-white">A paragraph with .bg-white class.</p>

This is a normal paragraph without any contectual classes.

A paragraph with .bg-purple class.

A paragraph with .bg-green class.

A paragraph with .bg-blue class.

A paragraph with .bg-orange class.

A paragraph with .bg-red class.

A paragraph with .bg-dark class.

A paragraph with .bg-dark-light class.

A paragraph with .bg-dark-lighter class.

A paragraph with .bg-dark-lightest class.

A paragraph with .bg-gray class.

A paragraph with .bg-gray-light class.

A paragraph with .bg-gray-lighter class.

A paragraph with .bg-gray-lightest class.

A paragraph with .bg-white class.

Mark

Use <mark> tag or .highlight class to highlight a text.


<p>A sample of <mark>marked</mark> text.</p>
<p>A sample of <span class="highlight">highlighted</span> text.</p>

A sample of marked text.

A sample of highlighted text.

Small & lead

Use <small> tag or .small class to make a paragraph smaller, or make a paragraph stand out by adding .lead class.


<p class="lead">A sample lead paragraph.</p>
<p>A normal paragraph.</p>
<p class="small">A sample small paragraph.</p>

A sample lead paragraph.

A normal paragraph.

A sample small paragraph.

Blockquotes

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Naming a source

Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title


<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Text columns

Divide your paragraph to several columns using .text-cols-2, .text-cols-3, and .text-cols-4 classes.


<p class="text-cols-2">...</p>
<p class="text-cols-3">...</p>
<p class="text-cols-4">...</p>

Etiam efficitur bibendum nibh ut ultricies. Nulla luctus erat in risus tincidunt eleifend. Proin ornare mollis quam vitae faucibus. Suspendisse nisi lorem, venenatis vitae ligula et, tempor blandit nunc. Mauris eleifend sodales mauris, at rutrum diam. Duis sed odio molestie felis euismod rutrum placerat vitae risus. Cras lectus massa, ultricies at dui ac, commodo pulvinar velit. Fusce ultrices sem felis, vitae sodales justo tempus in. Etiam et sodales augue, a efficitur nibh. Vestibulum augue purus, rhoncus vitae enim a, ultrices gravida justo. Nunc mollis nibh ac arcu placerat, at sagittis libero sollicitudin. Etiam suscipit, magna non eleifend ornare, dui libero congue dui, id ultricies lacus ante vitae erat. Aliquam sollicitudin sem a est tempor, nec vehicula ipsum tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque ac risus ac arcu laoreet feugiat a sit amet libero. Aenean luctus, nisi ut tincidunt semper, purus sapien fringilla quam, a ultrices arcu dolor sed neque.

Content decoupling

Sections

Split your documentation page to different parts and describe each of those inside a section tag.

Header

You can see sample header almost in every section of this documentation. The header of this section uses following code:


<header class="section-header">
  <span>Content decoupling</span>
  <h2>Sections</h2>
  <p>Split your documentation page to different parts and describe each of those inside a section tag.</p>
</header>

Alignment

By default, the header is center aligned. But you can easily change the text alignment by using .text-left or .text-right with header tag.

Content decoupling

Sections

Split your documentation page to different parts and describe each of those inside a section tag.


<header class="section-header text-left">
  <span>Content decoupling</span>
  <h2>Sections</h2>
  <p>Split your documentation page to different parts and describe each of those inside a section tag.</p>
</header>

Background

You have a plenty of option to modify background of a section.

Color

By default, background-color is white, but you can use following classes with a section tag to modify its background-color.


<section class="bg-gray-light">
  ...
</section>

.bg-purple
.bg-green
.bg-blue
.bg-orange
.bg-red
.bg-dark
.bg-dark-light
.bg-dark-lighter
.bg-dark-lightest
.bg-gray
.bg-gray-light
.bg-gray-lighter
.bg-gray-lightest

Also, you can always change background-color using inline style:


<section style="background-color: #123456">
  ...
</section>

Image

Easily add a background-image to a section using inline style:


<section style="background-image: url(path/to/image.png)">
  ...
</section>

Or take advantage of your assets/css/custom.css file and make a class for each background-image:


.bg-img-sec-about {
  background-image: url(../img/bg-about.png);
}


<section class="bg-img-sec-about">
  ...
</section>

Video

You can easily add a video to background of sections.


<section>
  <video class="bg-video" autoplay loop>
    <source src="assets/img/video.mp4" type="video/mp4">
    <source src="assets/img/video.webm" type="video/webm">
  </video>
</section>

Overlay

It's always a good practice to accompany background images and videos with an overly class to make a better contrast between background and texts. You have .overlay-black and .overlay-white classes to use with sections. Also, you can increase or decrease their opacity by adding .overlay-intense and .overlay-pale respectively.

Helper classes

Here's some helper classes that you can add to any section to make a small change in it.

Class name	Description
`.no-border-bottom`	Sections have an 1px border-bottom. Adding this class would remove the border.
`.section-sm`	By default, each section has 96px padding in top and bottom. This class will change it to 48px.
`.section-lg`	By default, each section has 96px padding in top and bottom. This class will change it to 164px.
`.bg-repeat`	This class can be useful when you're using a pattern-based background image and you'd like to repeat it all over the section.

Also, you can use general helper classes as well.

Arrange data

Tables

Arange your data into rows and columns of cells

Basic tables

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter


<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

More samples

For more samples and documentation, please visit official Bootstrap documentation.

Options table

Options table can be used for describing a function, event, class, etc. Make sure you'll wrap your table indside .table-responsive and your table has classes of .table, .table-options, .table-bordered and .table-striped.

Name	type	default	description
interval	number	5000	The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause	string	"hover"	Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
delay	number \| object	0	Delay showing and hiding the popover (ms) - does not apply to manual trigger type if a number is supplied, delay is applied to both hide/show object structure is: `delay: { "show": 500, "hide": 100 }`
wrap	boolean	true	Whether the carousel should cycle continuously or have hard stops.
keyboard	boolean	true	Whether the carousel should react to keyboard events.


<div class="table-responsive">
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>type</th>
        <th>default</th>
        <th>description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>interval</td>
        <td>number</td>
        <td>5000</td>
        <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
      </tr>
      <tr>
        <td>pause</td>
        <td>string</td>
        <td>"hover"</td>
        <td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
      </tr>
      <tr>
        <td>delay</td>
        <td>number | object</td>
        <td>0</td>
        <td>
          <p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
          <p>If a number is supplied, delay is applied to both hide/show</p>
          <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
        </td>
      </tr>
      <tr>
        <td>wrap</td>
        <td>boolean</td>
        <td>true</td>
        <td>Whether the carousel should cycle continuously or have hard stops.</td>
      </tr>
      <tr>
        <td>keyboard</td>
        <td>boolean</td>
        <td>true</td>
        <td>Whether the carousel should react to keyboard events.</td>
      </tr>
    </tbody>
  </table>
</div>

Information table

You can use this type of table to describe several related key-value-paired options. Your table has to include these classes: .table, .table-bordered, .table-striped and .table-info.

Theme name:	theDocs
Description:	A starter theme for developing your next software documentation. It's based on Twitter Bootstrap and has basic elements that you'll fequently use them.
Created:	05 September 2015
Last Update:	05 September 2015
Documentation:	Well documented
Layout:	Responsive


<table class="table table-bordered table-striped table-info">
  <tbody>
    <tr>
      <td>Theme name:</td>
      <td>theDocs</td>
    </tr>
    <tr>
      <td>Description:</td>
      <td>A starter theme for developing your next software documentation. It's based on Twitter Bootstrap and has basic elements that you'll fequently use them.</td>
    </tr>
    <tr>
      <td>Created:</td>
      <td>05 September 2015</td>
    </tr>
    <tr>
      <td>Last Update:</td>
      <td>05 September 2015</td>
    </tr>
    <tr>
      <td>Documentation:</td>
      <td>Well documented</td>
    </tr>
    <tr>
      <td>Layout:</td>
      <td>Responsive</td>
    </tr>
  </tbody>
</table>

Perform action

Buttons

Use any of the available button classes to quickly create a styled button

Types

Use the button classes on an <a>, <button>, or <input> element. You need to start by adding .btn class.

Regular

Use one of the available color modifiers on your .btn.


<a class="btn" href="#">sample button</a>
<a class="btn btn-success" href="#">sample button</a>
<a class="btn btn-info" href="#">sample button</a>
<a class="btn btn-warning" href="#">sample button</a>
<a class="btn btn-danger" href="#">sample button</a>
<a class="btn btn-dark" href="#">sample button</a>
<a class="btn btn-white" href="#">sample button</a>

sample button sample button sample button sample button sample button sample button sample button

Outline

Simply add .btn-outline to the button markup.


<a class="btn btn-outline" href="#">sample button</a>
<a class="btn btn-outline btn-success" href="#">sample button</a>
<a class="btn btn-outline btn-info" href="#">sample button</a>
<a class="btn btn-outline btn-warning" href="#">sample button</a>
<a class="btn btn-outline btn-danger" href="#">sample button</a>
<a class="btn btn-outline btn-dark" href="#">sample button</a>
<a class="btn btn-outline btn-white" href="#">sample button</a>

sample button sample button sample button sample button sample button sample button sample button

Round

Add .btn-round to the button markup.


<a class="btn btn-round" href="#">sample button</a>
<a class="btn btn-round btn-success" href="#">sample button</a>
<a class="btn btn-round btn-info" href="#">sample button</a>
<a class="btn btn-round btn-warning" href="#">sample button</a>
<a class="btn btn-round btn-danger" href="#">sample button</a>
<a class="btn btn-round btn-dark" href="#">sample button</a>
<a class="btn btn-round btn-white" href="#">sample button</a>

sample button sample button sample button sample button sample button sample button sample button

Float

Add .btn-float to the button markup.


<a class="btn btn-float" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-float btn-success" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-float btn-info" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-float btn-warning" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-float btn-danger" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-float btn-dark" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-float btn-white" href="#"><i class="fa fa-pencil"></i></a>

Size

Add .btn-xs, .btn-sm, .btn-lg, or .btn-xl for additional sizes.


<a class="btn btn-xs" href="#">sample button</a>
<a class="btn btn-sm" href="#">sample button</a>
<a class="btn" href="#">sample button</a>
<a class="btn btn-lg" href="#">sample button</a>
<a class="btn btn-xl" href="#">sample button</a>

<br><br>

<a class="btn btn-outline btn-xs" href="#">sample button</a>
<a class="btn btn-outline btn-sm" href="#">sample button</a>
<a class="btn btn-outline" href="#">sample button</a>
<a class="btn btn-outline btn-lg" href="#">sample button</a>
<a class="btn btn-outline btn-xl" href="#">sample button</a>

<br><br>

<a class="btn btn-round btn-xs" href="#">sample button</a>
<a class="btn btn-round btn-sm" href="#">sample button</a>
<a class="btn btn-round" href="#">sample button</a>
<a class="btn btn-round btn-lg" href="#">sample button</a>
<a class="btn btn-round btn-xl" href="#">sample button</a>

<br><br>

<a class="btn btn-float btn-xs" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-float btn-sm" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-float" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-float btn-lg" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-float btn-xl" href="#"><i class="fa fa-pencil"></i></a>

Blocklevel

Create block level buttons—those that span the full width of a parent— by adding .btn-block.


<button type="button" class="btn btn-block btn-success">sample button</button>
<button type="button" class="btn btn-block btn-info">sample button</button>
<br>
<div class="row">
  <div class="col-md-6">
    <button type="button" class="btn btn-block">sample button</button>
    <button type="button" class="btn btn-block btn-danger">sample button</button>
  <lt;/div>

  <div class="col-md-6">
    <button type="button" class="btn btn-block btn-black">sample button</button>
    <button type="button" class="btn btn-block btn-warning">sample button</button>
  </div>
</div>

Input, select, checkbox, etc.

Form elements

Use any of the available form elements to create your forms to receive input from users.

Inputs

Here's different variation of text inputs, textarea, and select to use.

Text input


<div class="form-group">
  <input type="text" class="form-control">
</div>

<div class="form-group">
  <input type="text" class="form-control">
  <span class="help-block">A block of help text...</span>
</div>

<div class="form-group">
  <input type="text" class="form-control" placeholder="Placeholder">
</div>

<div class="form-group">
  <label for="input1">Label text</label>
  <input type="text" id="input1" class="form-control">
</div>

A block of help text that breaks onto a new line and may extend beyond one line.

Label text

Sizes


<div class="form-group">
  <input type="text" class="form-control input-sm" placeholder="Small">
</div>
<div class="form-group">
  <input type="text" class="form-control" placeholder="Normal">
</div>
<div class="form-group">
  <input type="text" class="form-control input-lg" placeholder="Big">
</div>

Textarea


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

Select


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

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

Input group


<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" placeholder="Username">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Recipient's username">
    <span class="input-group-addon">@example.com</span>
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    <span class="input-group-addon">.00</span>
  </div>
</div>

<div class="form-group">
  <label for="basic-url">Your vanity URL</label>
  <div class="input-group">
    <span class="input-group-addon">https://example.com/users/</span>
    <input type="text" class="form-control" id="basic-url">
  </div>
</div>

@example.com

$ .00

Your vanity URL

https://example.com/users/

Checkbox & Radiobox


<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Option one

Option two is disabled

Option one

Option two

Option three is disabled

Inline


<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

1 2 3

Sample contact form


<form>
  <div class="row">
    <div class="form-group col-sm-12 col-md-6">
      <input type="text" class="form-control" placeholder="Name">                 
    </div>

    <div class="form-group col-sm-12 col-md-6">
      <input type="email" class="form-control" placeholder="Email">
    </div>
  </div>

  <div class="form-group">
    <textarea class="form-control" rows="5" placeholder="Message"></textarea>
  </div>
  
  <button type="submit" class="btn btn-primary">Send</button>
</form>

Sample horizontal form


<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Outstand

Labels

Highlight part of your text by placing it inside a .label class

Variations

Add any of the below mentioned modifier classes to change the appearance of a label.


<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<span class="label label-dark">Dark</span>

Primary Success Info Warning Danger Dark

Text spirit

Images

Bold, graphic, and intentional imagery helps to engage the user

Shapes

Add classes to an <img> element to easily style images in any project.


<img class="img-rounded" src="assets/img/placeholder.png" alt="image">
<img class="img-circle" src="assets/img/placeholder.png" alt="image">
<img class="img-thumbnail" src="assets/img/placeholder.png" alt="image">

Shadow

Add a small shadow usign .img-shadow class.


<img class="img-shadow" src="assets/img/placeholder.png" alt="image">

Image title


<figure>
  <img src="assets/img/placeholder.png" alt="image">
  <figcaption>some description about the image</figcaption>
</figure>

Project-wide use

Helper Classes

Some other helper classes in addition to Bootstrap's helper classes

Class name	Description
`.no-padding`	Equals to `padding: 0;`
`.no-padding-x`	Equals to `padding-left: 0; padding-right: 0;`
`.no-padding-y`	Equals to `padding-top: 0; padding-bottom: 0;`
`.no-padding-top`	Equals to `padding-top: 0;`
`.no-padding-bottom`	Equals to `padding-bottom: 0;`