BootAMP by

Headings

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

Heading Example

<h1></h1>

h1. Bootstrap heading

<h2></h2>

h2. Bootstrap heading

<h3></h3>

h3. Bootstrap heading

<h4></h4>

h4. Bootstrap heading

<h5></h5>

h5. Bootstrap heading

<h6></h6>

h6. Bootstrap heading

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
            

.h1 through .h6 classes are also available

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading


<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
      

Typography Classes

Large Title

Title Text

Small Title

Subtitle text

Caption text

Hint text
Smaller text for copyrights and disclaimers.

<h3 class="ampstart-title-lg">Large Title</h3>
<h3 class="ampstart-title-md">Title Text</h3>
<h3 class="ampstart-title-sm">Small Title</h3>
<h3 class="ampstart-subtitle">Subtitle text</label>
<label class="ampstart-label">Label Text</h3>
<h4 class="ampstart-caption">Caption text</h4>
<div class="ampstart-hint">Hint text</div>
<small class="ampstart-small-text">Smaller text for copyrights and disclaimers.</small>
              

Inline text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.


<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
            

Abbreviations

attr

HTML


<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="ampstart-small-text">HTML</abbr></p>
                    

Blockquotes

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

<blockquote class="ampstart-pullquote" cite="http://example.org">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</blockquote>
              

Naming a source

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Someone famous in Source Title

<blockquote class="ampstart-pullquote flex flex-column">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  <small class="ampstart-small-text">Someone famous in Source Title</small>
</blockquote>
                    

Alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Someone famous in Source Title

<blockquote class="ampstart-pullquote center flex flex-column">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  <small class="ampstart-small-text">Someone famous in Source Title</small>
</blockquote>
              

Lists

Unstyled

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

<ul class="list-reset">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>
         

Inline

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

<ul class="list-reset">
  <li class="inline-block pr2">Lorem ipsum</li>
  <li class="inline-block pr2">Phasellus iaculis</li>
  <li class="inline-block pr2">Nulla volutpat</li>
</ul>
              

Description list alignment

Description lists
A description list is perfect for defining terms.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<div class="flex flex-wrap">
   <div class="col-12 sm-col-3 bold pr2">Description lists</div>
   <div class="col-12 sm-col-9 pr2">A description list is perfect for defining terms.</div>
   <div class="col-12 sm-col-3 bold pr2">Euismod</div>
   <div class="col-12 sm-col-9 pr2">
     <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
     <p>Donec id elit non mi porta gravida at eget metus.</p>
   </div>
   <div class="col-12 sm-col-3 bold pr2">Malesuada porta</div>
   <div class="col-12 sm-col-9 pr2">Etiam porta sem malesuada magna mollis euismod.</div>
   <div class="col-12 sm-col-3 bold truncate pr2">Truncated term is truncated</div>
   <div class="col-12 sm-col-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
    sit amet risus.</div>
   <div class="col-12 sm-col-3 bold pr2">Nesting</div>
   <div class="col-12 sm-col-9 pr2">
     <div class="flex flex-wrap">
       <div class="col-12 sm-col-3 bold">Nested definition list</div>
       <div class="col-12 sm-col-9">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</div>
     </div>
   </div>
</div>
            

Text Utilities

Text alignment

Left aligned text.


Center aligned text.

Right aligned text.


<p class="left">Left aligned text.</p>
<p class="center">Center aligned text.</p>
<p class="right">Right aligned text.</p>
            

Text Overflow

For longer content, you can add a .truncate class to truncate the text with an ellipsis.

Praeterea iter est quasdam res quas ex communi.

Sed leo sapien, molestie sit amet lorem eu,suscipit imperdiet tortor.Mauris maximusnon sodales metus auctor nec.


<div class="flex">
  <div class="col-2 truncate">
   Praeterea iter est quasdam res quas ex communi.
  </div>
</div>
<p class="truncate">Sed leo sapien, molestie sit amet lorem eu,suscipit imperdiet tortor.Mauris maximus magna quam,non sodales metus auctor nec. Aenean tristique massa enim, non dictum mauris eleifend tristique.</p>

Text transform

Donec porta orci eu tortor finibus,id facilisis metus aliquam. Pellentesque lobortis viverra odio ut eleifend.

Uppercased text.

Donec porta orci eu tortor finibus,id facilisis metus aliquam. Pellentesque lobortis viverra odio ut eleifend..


<p class="ampstart-dropcap">Donec porta orci eu tortor finibus,id facilisis metus aliquam.Pellentesque lobortis viverra odio ut eleifend.</p>
<p class="text-caps">Uppercased text.</p>
<p class="ampstart-initialcap">Donec porta orci eu tortor finibus,id facilisis metus aliquam.Pellentesque lobortis viverra odio ut eleifend..</p>
                

Font weight

This is a bold text

This sets font-weight to 500.

Italic text.


<p class="bold">This is a bold text</p>
<p class="font-500">This sets font-weight to 500.</p>
<p class="italic">Italic text.</p>
                    

Text decoration

Remove a text decoration with a .text-decoration-none class.

Non-underlined link

<a href="#" class="text-decoration-none">Non-underlined link</a>
                    

Text color

.text-primary

.text-secondary


<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>