BootAMP by

Bootstrap

BootAMP

Headings

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


<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>
            

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.


<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>
        

.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>
      

Display headings


<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
              

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


<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>
              

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


<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></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

            
<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
              

Blockquotes

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

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

Naming a source


<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</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


<blockquote class="blockquote text-center flex flex-column">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</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


<ul class="list-unstyled">
  <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
    <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>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>
              

Lists

Unstyled


<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


<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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


<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">
    <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>
  </dd>
  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa
   justo sit amet risus.</dd>
  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>
              

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


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

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 .text-truncate class to truncate the text with an ellipsis.


<div class="row">
  <div class="col-2 text-truncate">
   Praeterea iter est quasdam res quas ex communi.
  </div>
</div>
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</span>
              

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 maximus magna quam, non sodales metus auctor nec. Aenean tristique massa enim, non dictum mauris eleifend tristique.


<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


<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</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


<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</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.


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

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


<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
              

Text color

.text-primary

.text-secondary


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

Buttons


<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
            

Buttons

The .ampstart-btn class are designed to use within <button>tag.


<button class="ampstart-btn">Primary</button>  
<button class="ampstart-btn ampstart-btn-secondary">Secondary</button>
                

Button tags


<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
                            

Getting Started

Link

<a class="ampstart-btn" href="#" role="button">Link</a>
<button class="ampstart-btn" type="submit">Button</button>
<input class="ampstart-btn" type="submit" value="Submit">
<input class="ampstart-btn" type="reset" value="Reset">
          

Outline button

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the.btn-outline-*


<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
            

Outline button

Use the.ampstart-btn ampstart-btn-secondary class within <button>tag for outline button.

 
<button class="ampstart-btn ampstart-btn-secondary">Secondary</button>
                  

Sizes


<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
              

Sizes


<div class="flex flex-column py2">
  <button type="button" class="ampstart-btn my1">Primary button</button>
  <button type="button" class="ampstart-btn ampstart-btn-secondary my1">Secondary button</button>
</div>
              

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.


<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
            

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.


<button class="ampstart-btn" disabled>SUBMIT</button>  
<button class="ampstart-btn ampstart-btn-secondary" disabled>SUBMIT</button>
                      

Card


<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
              

Card

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.


<div class="flex flex-column">
  <div class="ampstart-card col-12 sm-col-4 md-col-6 lg-col-4">
    <amp-img src="/img/bootstrap-amp/rectangle1.png" width="230" height="140" layout="responsive" alt="Card"></amp-img>
    <div class="p2">
      <h4 class="my1">Card title</h4>
      <p class="my1">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <button href="#" class="ampstart-btn">Go somewhere</button>
    </div>
  </div>
</div>
                

Carousel

To use Carousel the following "amp-carousel" extension must be included.

Carousel with previous and next controls


<amp-carousel width="1280" height="853" layout="responsive" type="slides" class="mb4" autoplay delay="4000" >
  <figure class="ampstart-image-with-heading  m0 relative mb4">
    <amp-img src="/img/bootstrap-amp/nasa-45074.jpg" width="1280" height="853" layout="responsive" alt="Beautiful Image of a nasa-45074"></amp-img>
  </figure>
  <figure class="ampstart-image-with-heading  m0 relative mb4">
    <amp-img src="/img/bootstrap-amp/nasa-45068.jpg" width="1280" height="853" layout="responsive" alt="Beautiful Image of a nasa-45068"></amp-img>
  </figure>
  <figure class="ampstart-image-with-heading  m0 relative mb4">
    <amp-img src="/img/bootstrap-amp/nasa-45076.jpg" width="1280" height="853" layout="responsive" alt="Beautiful Image of a nasa-45076"></amp-img>
  </figure>
</amp-carousel>
              

With captions

Add captions to your slides easily with the .carousel-caption element within any .carousel-item.


<div class="bd-example">
  <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Second slide label</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Third slide label</h5>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
              

With captions

Add captions to your slides easily with the <figcaption> Tag within any <amp-carousel> Tag.

Slide 1

Duis nec dolor et quam vulputate sagittis. Nam arcu ex, suscipit nec cursus a, volutpat sit amet felis.

Taken by L. Fischer

Slide 2

Duis nec dolor et quam vulputate sagittis. Nam arcu ex, suscipit nec cursus a, volutpat sit amet felis.

Taken by Mali D.

Slide 3

Duis nec dolor et quam vulputate sagittis. Nam arcu ex, suscipit nec cursus a, volutpat sit amet felis.

Taken by J.T. Lee

<amp-carousel width="1280" height="853" layout="responsive" type="slides" class="mb4" autoplay delay="4000">
  <figure class="ampstart-image-with-heading  m0 relative mb4">
    <amp-img src="/img/bootstrap-amp/nasa-45076.jpg" width="1280" height="853" layout="responsive"
      alt="Beautiful Image of a nasa"></amp-img>
    <figcaption class="absolute right-0 bottom-0 left-0 center text-white">
      <header class="ampstart-image-heading px2 py2 line-height-4">
        <h3 class="h1">Slide 1</h3>
      </header>
      <p class="xs-hide">
      Duis nec dolor et quam vulputate sagittis. Nam arcu ex, suscipit nec cursus a, volutpat sit amet felis.
      </p>
      <span class="ampstart-image-credit block bold">
       Taken by
        <a href="#" role="author">L. Fischer</a>
      </span>
    </figcaption>
  </figure>
  <figure class="ampstart-image-with-heading  m0 relative mb4">
    <amp-img src="/img/bootstrap-amp/nasa-45074.jpg" width="1280" height="853" layout="responsive"
      alt="Beautiful Image of a nasa"></amp-img>
    <figcaption class="absolute right-0 bottom-0 left-0 center text-white">
      <header class="ampstart-image-heading px2 py2 line-height-4">
        <h3 class="h1">Slide 2</h3>
      </header>
      <p class="xs-hide">
      Duis nec dolor et quam vulputate sagittis. Nam arcu ex, suscipit nec cursus a, volutpat sit amet felis.
      </p>
      <span class="ampstart-image-credit block bold">
       Taken by
        <a href="#" role="author">Mali D.</a>
      </span>
    </figcaption>
  </figure>
  <figure class="ampstart-image-with-heading  m0 relative mb4">
    <amp-img src="/img/bootstrap-amp/nasa-45068.jpg" width="1280" height="853" layout="responsive"
      alt="Beautiful Image of a nasa"></amp-img>
    <figcaption class="absolute right-0 bottom-0 left-0 center text-white">
      <header class="ampstart-image-heading px2 py2 line-height-4">
        <h3 class="h1">Slide 3</h3>
      </header>
      <p class="xs-hide">
      Duis nec dolor et quam vulputate sagittis. Nam arcu ex, suscipit nec cursus a, volutpat sit amet felis.
      </p>
      <span class="ampstart-image-credit block bold">
       Taken by
        <a href="#" role="author">J.T. Lee</a>
      </span>
    </figcaption>
  </figure>
</amp-carousel>
              

Collapse

Accordion example

Using the card component, you can extend the default collapse behavior to create an accordion. Be sure to use .accordion as a wrapper.


<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls          ="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
      <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false"                aria-controls="collapseTwo">
        Collapsible Group Item #2
      </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
    <div class="card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false"          aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
            

Collapse

Accordion example

The expand-single-section attribute forces the accordion to only allow one expanded section at any given time.

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.


<amp-accordion expand-single-section>
  <section expanded>
    <h5 class="p2">Collapsible Group Item #1</h5>
    <p class="p2">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid ingle-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </p>
  </section>
  <section>
    <h5 class="p2">Collapsible Group Item #2</h5>
    <p class="p2">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid ingle-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
  </section>
  <section>
    <h5 class="p2">Collapsible Group Item #3</h5>
    <p class="p2">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid ingle-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
  </section>
</amp-accordion>
            

Dropdown


<ul class="list-reset m0 p0 flex justify-start nowrap">
  <li class="ampstart-nav-item ampstart-nav-dropdown relative">
    <amp-accordion layout="container" disable-session-states=""
      class="ampstart-dropdown absolute top-0 left-0 right-0 bottom-0">
      <section class="border">
        <header class="px1">Dropdown</header>
        <ul class="ampstart-dropdown-items list-reset m0 p0 border-top">
          <li class="ampstart-dropdown-item px1">
            <a href="#" class="text-decoration-none">Action</a>
          </li>
          <li class="ampstart-dropdown-item px1">
            <a href="#" class="text-decoration-none">Another action</a>
          </li>
          <li class="ampstart-dropdown-item px1">
            <a href="#" class="text-decoration-none">Something else here</a>
          </li>
        </ul>
      </section>
    </amp-accordion>
  </li>
</ul>
                        

Forms

Overview


<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
            

Forms

Overview

We'll never share your email.

<div class="my3 flex flex-column"> 
  <div class="ampstart-input inline-block relative m0 p0 mb1"> 
    <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Email address"> 
    <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">Email address</label>
  </div> 
  <small class="ampstart-small-text">We'll never share your email.</small>
  <div class="ampstart-input inline-block relative m0 p0 mb1 mt2">
    <input type="text" value=""name="name1"  id="ip1" class="block border-none p0 m0" placeholder="Password"> 
    <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">Password</label> 
  </div>
  <div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mb1"> 
    <input type="checkbox" value="2" name="cb" id="cb2" class="p0 m0 relative"> 
    <label for="cb2" class="" aria-hidden="true">Check me out</label>
  </div>
</div> 
<button type="submit" class="ampstart-btn">SUBMIT</button>
            
                

Form controls


<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>
            

Form controls


<div class="my3 flex flex-column">
  <div class="ampstart-input inline-block relative m0 p0 mb1">
    <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Email address">
    <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
      Email address
    </label>
  </div>
  <div class="ampstart-input inline-block relative m0 p0 mb1">
    <select name="name12" id="ip24" class="block border-none p0 m0">
      <option value="">1</option>
      <option value="">2</option>
      <option value="">3</option>
      <option value="">4</option>
    </select>
    <label for="ip24" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
      Select a option
    </label>
  </div>
  <div class="ampstart-input inline-block relative m0 p0 mb1">
    <textarea name="name13" id="ip13" class="block border-none p0 m0" rows="5"></textarea>
    <label for="ip13" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
      Example textarea
    </label>
  </div>
</div>
                      

Readonly

 
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
            

Readonly


<div class="ampstart-input inline-block relative m0 p0 mb1">
  <input type="text" name="name1" id="ip1" class="block border-none p0 m0" value="Readonly input here..." placeholder="Readonly input here..." readonly>
  <label for="ip0" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">This input is Disabled</label>
</div>
              

Readonly plain text


<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>
            

Readonly plain text


<div class="flex">
  <legend class="ampstart-label col-12 sm-col-2 lg-col-3 pt3" aria-hidden="true">Email</legend>
  <div class="ampstart-input inline-block relative m0 p0 mb3 col-12 sm-col-10 lg-col-9">
    <input type="text" name="name1" id="ip0" class="block border-none p0 m0" value="email@example.com" placeholder= "email@example.com"readonly>
    <label for="ip0" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">This input is Disabled</label>
  </div>
</div>
<div class="flex">
  <legend class="ampstart-label col-12 sm-col-2 lg-col-3 pt3" aria-hidden="true">Password</legend>
  <div class="ampstart-input inline-block relative m0 p0 mb3 col-12 sm-col-10 lg-col-9">
    <input type="text" name="name1" id="pw1" class="block border-none p0 m0" placeholder="Password">
    <label for="pw1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
  </div>
</div>
                

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
            

<div class="flex">
  <div class="col-12 md-col-4 sm-col-4 px2 my1">
    <div class="ampstart-input inline-block relative m0 p0">
      <input type="text" value="email@example.com" name="name1" id="ip1" class="block border-none p0 m0" placeholder="email@example.com" readonly>
      <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">This input is Disabled</label>
    </div>
  </div>
  <div class="col-12 md-col-4 sm-col-4 px2 my1">
    <div class="ampstart-input inline-block relative m0 p0">
      <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Password">
      <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
    </div>
  </div>
  <div class="col-12 md-col-4 sm-col-4 px2 my1">
    <div class="ampstart-input inline-block relative m0 p0">
      <button type="submit" class="ampstart-btn">Confirm identity</button>
    </div>
  </div>
</div>
                

Range Inputs

Set horizontally scrollable range inputs using .form-control-range.


<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>
            

Range Inputs

Set horizontally scrollable range inputs using .ampstart-input


<div class="ampstart-input inline-block relative m0 p0 my3 py2">
  <input type="range" value="" name="name11" id="ip11" class="block border-none p0 m0" placeholder="Example Range input">
  <label for="ip11" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
   Example Range input
  </label>
</div>
              

Checkboxes and radios

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.


<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">Default checkbox</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">Disabled checkbox</label>
</div>
            

Checkboxes and radios

Make input look inactive by adding the disabled boolean attribute to any <input> tag.


<div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mb1">
  <input type="checkbox" value="2" name="cb" id="cb2" class="p0 m0 relative">
  <label for="cb2" class="" aria-hidden="true">Default checkbox</label>
</div>
<div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mb1">
  <input type="checkbox" value="3" name="cb" id="cb3" class="p0 m0 relative" disabled="">
  <label for="cb3" class="" aria-hidden="true">Disabled checkbox</label>
</div>
                    

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">Default radio</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">Second default radio</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">Disabled radio</label>
</div>
            

<div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb1">
  <input type="radio" value="1" name="rb" id="rb1" class="relative" checked>
  <label for="rb1" class="" aria-hidden="true">Default radio</label>
</div>
<div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb1">
  <input type="radio" value="2" name="rb" id="rb2" class="relative">
  <label for="rb2" class="" aria-hidden="true">Second default radio</label>
</div>
<div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb1">
  <input type="radio" value="3" name="rb" id="rb3" class="relative" disabled>
  <label for="rb3" class="" aria-hidden="true">Disabled radio</label>
</div>
                

Inline


<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
            

Inline


<div class="inline-block">
  <div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mr1">
    <input type="checkbox" value="1" name="cb" id="cb5" class="p0 m0 relative" checked="">
    <label for="cb5" class="" aria-hidden="true">Checkbox 1</label>
  </div>
  <div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mr1">
    <input type="checkbox" value="2" name="cb" id="cb6" class="p0 m0 relative">
    <label for="cb6" class="" aria-hidden="true">Checkbox 2</label>
  </div>
  <div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mr1">
    <input type="checkbox" value="3" name="cb" id="cb3" class="p0 m0 relative" disabled="">
    <label for="cb3" class="" aria-hidden="true">Disabled checkbox</label>
  </div>
</div>
              

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
            

<div class="inline-block mt2">
  <div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb1">
    <input type="radio" value="1" name="rb" id="rb4" class="relative" checked>
    <label for="rb4" class="" aria-hidden="true">Radio 1</label>
  </div>
  <div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb1">
    <input type="radio" value="2" name="rb" id="rb5" class="relative">
    <label for="rb5" class="" aria-hidden="true">Radio 2</label>
  </div>
  <div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb1">
    <input type="radio" value="3" name="rb" id="rb3" class="relative" disabled>
    <label for="rb3" class="" aria-hidden="true">Disabled Radio</label>
  </div>
</div>
              

Without labels


<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>
            

Without labels


<div class="ampstart-input ampstart-input-chk inline-block relative m0 p0">
  <input type="checkbox" value="1" name="cb" id="cb1" class="p0 m0 relative">
</div>
<div class="ampstart-input ampstart-input-radio inline-block relative m0 p0">
  <input type="radio" value="1" name="rb" id="rb1" class="relative">
</div>
              

Layout

Form Group


<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>
            

Layout

Form Group


<div class="flex flex-column">
  <div class="ampstart-input inline-block relative m0 p0 mb3">
    <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Example Input">
    <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
     Example label
    </label>
  </div>
  <div class="ampstart-input inline-block relative m0 p0 mb3">
    <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Another Input">
    <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
     Another label
    </label>
  </div>
</div>
                    

Form grid


<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>
            

Form grid


<div class="flex flex-wrap">
  <div class="col-6">
    <div class="ampstart-input inline-block relative m0 p0 mb3 ">
      <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="First name">
      <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">This input is Disabled</label>
    </div>
  </div>
  <div class="col-6">
    <div class="ampstart-input inline-block relative m0 p0 mb3 ">
      <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Last name">
      <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
    </div>
  </div>
</div>
              

Horizontal form


<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">First radio</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">Second radio</label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">Third disabled radio</label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">Example checkbox</label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
            

Horizontal form

Radios
Checkbox

<div class="flex flex-wrap">
  <legend class="ampstart-label col-12 sm-col-4 lg-col-4 pt3" aria-hidden="true">Email</legend>
  <div class="ampstart-input inline-block relative m0 p0 mb3 col-12 sm-col-8">
    <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Email">
    <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
  </div>
</div>
<div class="flex flex-wrap">
 <legend class="ampstart-label col-12 sm-col-4 lg-col-4 pt3" aria-hidden="true">Password</legend>
 <div class="ampstart-input inline-block relative m0 p0 mb3 col-12 sm-col-8">
   <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Password">
   <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
 </div>
</div>
<div class="flex flex-wrap">
  <legend class="ampstart-label col-12 sm-col-4 lg-col-4">Radios</legend>
  <div class="flex flex-column col-12 sm-col-8">
    <div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb1">
      <input type="radio" value="1" name="rb" id="rb10" class="relative" checked="">
      <label for="rb10" class="" aria-hidden="true">First radio</label>
    </div>
    <div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb1">
      <input type="radio" value="2" name="rb" id="rb11" class="relative">
      <label for="rb11" class="" aria-hidden="true">Second radio</label>
    </div>
    <div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb1">
      <input type="radio" value="3" name="rb" id="rb12" class="relative" disabled="">
      <label for="rb12" class="" aria-hidden="true">Third disabled radio</label>
    </div>
  </div>
</div>
<div class="flex flex-wrap">
  <legend class="ampstart-label py1 col-12 sm-col-4 lg-col-4">Checkbox</legend>
  <div class="flex flex-column col-12 sm-col-8">
    <div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mb1">
      <input type="checkbox" value="1" name="cb" id="cb1" class="p0 m0 relative">
      <label for="cb1" class="" aria-hidden="true">Example checkbox</label>
    </div>
  </div>
</div>
<div class="flex flex-wrap">
  <button class="ampstart-btn col-12 sm-col-3 lg-col-3">SUBMIT</button>
</div>
              

Column sizing


<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>
            

Column sizing


<div class="flex flex-wrap py2">
  <div class="col-12 sm-col-6 md-col-6">
    <div class="ampstart-input inline-block relative m0 p0">
      <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="City">
      <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
    </div>
  </div>
  <div class="col-12 sm-col-3 md-col-3 px1">
    <div class="ampstart-input inline-block relative m0 p0">
      <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="State">
      <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
    </div>
  </div>
  <div class="col-12 sm-col-3 md-col-3 px1">
    <div class="ampstart-input inline-block relative m0 p0">
      <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Zip">
      <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
    </div>
  </div>
</div>
              

Inline forms


<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>          
  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>
  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
            

Inline forms


<form class="inline-block">
  <div class="ampstart-input relative inline-block mb3">
    <select name="name12" id="ip26" class="block border-none p0 m0">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <label for="ip26" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
      Preference
    </label>
  </div>
  <div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mb3 ">
    <input type="checkbox" value="1" name="cb" id="chkb1" class="p0 m0 relative">
    <label for="chkb1" class="" aria-hidden="true">Remember my preference</label>
  </div>
  <button type="submit" class="ampstart-btn my-1">Submit</button>
</form>
              

Help text


<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
            

Help text

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

<div class="flex flex-column">
  <div class="ampstart-input inline-block relative m0 p0 mb1">
    <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Password">
    <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
      Password
    </label>
  </div>
  <small class="ampstart-small-text ">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</small>
</div>
              

<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>
            
Must be 8-20 characters long.

<div class="flex flex-wrap inline-block">
  <div class="ampstart-input inline-block relative m0 p0 mb1 mr2">
    <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Password">
    <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
     Password
    </label>
  </div>
  <small class="ampstart-small-text mt4">Must be 8-20 characters long.</small>
</div>
                            

Disabled forms


<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
            

Disabled forms


<div class="ampstart-input inline-block relative m0 p0 mb1">
  <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" disabled placeholder="Disabled input">
  <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">Disabled input</label>
</div>
<div class="ampstart-input inline-block relative m0 p0 mb1">
  <select name="Disabled select menu" id="ip12" class="block border-none  p0 m0" disabled>
    <option value="1">Apple</option>
    <option value="2">Orange</option>
    <option value="3">Lemon</option>
    <option value="4">Grape</option>
    <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
     Disabled select menu
    </label>
  </select>
</div>
<div class="ampstart-input ampstart-input-chk inline-block relative m0 p0 mb1">
  <input type="checkbox" value="2" name="cb" id="cb2" class="p0 m0 relative" disabled>
  <label for="cb2" class="" aria-hidden="true">Cant check this</label>
</div>
<button class="ampstart-btn" disabled>SUBMIT</button>
        

Modal


<amp-lightbox id="my-lightbox" layout="nodisplay">
  <div class="lightbox" on="tap:my-lightbox.close" role="button" tabindex="0">
    <h1>Hello World!</h1>
  </div>
</amp-lightbox>
<button class="ampstart-btn" on="tap:my-lightbox">Open lightbox</button>
            
                

Navs

Base nav


<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
            

Navs

Base nav


<nav class="ampstart-headerbar-nav ampstart-nav">
  <ul class="list-reset center m0 p0 flex flex-wrap">
    <li class="ampstart-nav-item relative">
      <header>Navbar</header>
    </li>
    <li class="ampstart-nav-item ">
      <a href="#" class="text-decoration-none block">Home</a>
    </li>
    <li class="ampstart-nav-item relative">
      <a href="#" class="text-decoration-none block">Features</a>
    </li>
    <li class="ampstart-nav-item ">
      <button class="ampstart-btn ampstart-btn-secondary" disabled>Disabled</button>
    </li>
  </ul>
</nav>
                  

Horizontal alignment

Centered with .justify-content-center :


<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
            

Horizontal alignment

Centered with .flex flex-wrap justify-around items-center :


<nav class="ampstart-headerbar-nav flex flex-wrap justify-around items-center">
  <ul class="list-reset center m0 p0 flex flex-wrap">
    <li class="ampstart-nav-item relative">
      <header>Navbar</header>
    </li>
    <li class="ampstart-nav-item ">
      <a href="#" class="text-decoration-none block">Home</a>
    </li>
    <li class="ampstart-nav-item relative">
      <a href="#" class="text-decoration-none block">Features</a>
    </li>
    <li class="ampstart-nav-item ">
      <button class="ampstart-btn ampstart-btn-secondary" disabled>Disabled</button>
    </li>
  </ul>
</nav>
          

Right aligned with .justify-content-end :


<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
          

Right aligned with .flex flex-wrap justify-end items-end :


<nav class="ampstart-headerbar-nav ampstart-nav flex flex-wrap justify-end items-end">
  <ul class="list-reset center m0 p0 flex flex-wrap">
    <li class="ampstart-nav-item relative">
      <header>Navbar</header>
    </li>
    <li class="ampstart-nav-item ">
      <a href="#" class="text-decoration-none block">Home</a>
    </li>
    <li class="ampstart-nav-item relative">
      <a href="#" class="text-decoration-none block">Features</a>
    </li>
    <li class="ampstart-nav-item ">
      <button class="ampstart-btn ampstart-btn-secondary" disabled>Disabled</button>
    </li>
  </ul>
</nav>
            

Vertical

Stack your navigation by changing the flex item direction with the .flex-column utility.


<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
            

Vertical

Stack your navigation by changing the flex item direction with the .flex-column utility.


<nav class="ampstart-headerbar-nav ampstart-nav">
  <ul class="list-reset center m0 p0 flex flex-column justify-start align-item items-start nowrap">
    <li class="ampstart-nav-item relative">
      <header>Navbar</header>
    </li>
    <li class="ampstart-nav-item ">
      <a href="#" class="text-decoration-none block">Home</a>
    </li>
    <li class="ampstart-nav-item relative">
      <a href="#" class="text-decoration-none block">Features</a>
    </li>
    <li class="ampstart-nav-item ">
      <button class="ampstart-btn ampstart-btn-secondary" disabled>Disabled</button>
    </li>
  </ul>
</nav>
            

As always, vertical navigation is possible without <ul> s, too.


<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
            

As always, vertical navigation is possible without <ul> s, too.


<nav class="ampstart-headerbar-nav ampstart-nav px2">
  <header>Navbar</header>
  <a href="#" class="text-decoration-none block">Home</a>
  <a href="#" class="text-decoration-none block">Features</a>
  <button class="ampstart-btn ampstart-btn-secondary" disabled>Disabled</button>
</nav>
                      

Navbar

Brand


<!-- As link -->
<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0 pl2 pr4">    
  <nav class="ampstart-headerbar-nav ampstart-nav ">
    <header><a href="#">Navbar</a></header>
  </nav>
</header>
<!-- As a heading --> 
<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0 pl2 pr4">
  <nav class="ampstart-headerbar-nav ampstart-nav">
    <header><span>Navbar</span></header>
  </nav>
</header>
                

<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0 pl2 pr4">
  <a href="#">
    <amp-img src="/img/bootstrap-amp/sidebar-example-logo.png" width="110" height="33" layout="fixed" class="mt2 mx-auto" alt="Example logo image"></amp-img>
  </a>
</header>
                  
Navbar

<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0 pl2 pr4">
  <a href="#" class="text-decoration-none my2">
    <amp-img src="/img/bootstrap-amp/sidebar-example-logo.png" width="110" height="33" layout="fixed" class="mx2" alt="Example logo image"></amp-img>Navbar
  </a>
</header>
                  
Navbar

<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0">
  <div role="button" on="tap:sidebar-right.toggle" tabindex="0" class="ampstart-navbar-trigger md-hide lg-hide pr2">≡
  </div>
  <header class="pl1">Navbar</header>
  <nav class="ampstart-headerbar-nav ampstart-nav sm-hide xs-hide">
    <ul class="list-reset center m0 p0 flex flex-wrap">
      <li class="ampstart-nav-item p0">
        <a href="#" class="text-decoration-none block">Home</a>
      </li>
      <li class="ampstart-nav-item p0">
        <a href="#" class="text-decoration-none block">About</a>
      </li>
      <li class="ampstart-nav-item p0">
        <a href="#" class="text-decoration-none block">Menu</a>
      </li>
      <li class="ampstart-nav-item ampstart-nav-dropdown relative">
        <amp-accordion layout="container" class="ampstart-dropdown top-0 absolute left-0 right-0 bottom-0 absolute">
          <section>
            <header>Dropdown</header>
            <ul class="ampstart-dropdown-items list-reset mb2 p0 border">
              <li class="ampstart-dropdown-item">
                <a href="#" class="text-decoration-none">Action</a>
              </li>
              <li class="ampstart-dropdown-item">
                <a href="#" class="text-decoration-none">Another action</a>
              </li>
              <li class="ampstart-dropdown-item">
                <a href="#" class="text-decoration-none">Something else here</a>
              </li>
            </ul>
          </section>
        </amp-accordion>
      </li>
    </ul>
  </nav>
</header>
<amp-sidebar id="sidebar-right" class="ampstart-sidebar px3 md-hide lg-hide" layout="nodisplay" side="right">
  <div class="flex justify-start items-center ampstart-sidebar-header">
    <div role="button" on="tap:sidebar-right.close" tabindex="0" class="ampstart-navbar-trigger items-start">✕
    </div>
  </div>
  <nav class="ampstart-sidebar-nav ampstart-nav" toolbar-target="target-element-right">
    <ul class="list-reset m0 p0 ampstart-label">
      <li class="ampstart-nav-item ">
        <header>Navbar</header>
      </li>
      <li class="ampstart-nav-item ">
        <a href="#" class="text-decoration-none block">Home</a>
      </li>
      <li class="ampstart-nav-item ">
        <a href="#" class="text-decoration-none block">About</a>
      </li>
      <li class="ampstart-nav-item ">
        <a href="#" class="text-decoration-none block">Menu</a>
      </li>
      <li class="ampstart-nav-item ampstart-nav-dropdown relative">
        <amp-accordion layout="container" class="ampstart-dropdown top-0 left-0 right-0 bottom-0">
          <section>
            <header>Dropdown</header>
            <ul class="ampstart-dropdown-items list-reset mb2 p0 border">
              <li class="ampstart-dropdown-item">
                <a href="#" class="text-decoration-none">Action</a>
              </li>
              <li class="ampstart-dropdown-item">
                <a href="#" class="text-decoration-none">Another action</a>
              </li>
              <li class="ampstart-dropdown-item">
                <a href="#" class="text-decoration-none">Something else here</a>
              </li>
            </ul>
          </section>
        </amp-accordion>
      </li>
    </ul>
  </nav>
</amp-sidebar>
                          

Forms


<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0">
  <nav class="ampstart-headerbar-nav ampstart-nav">
    <ul class="list-reset center m0 p1 flex flex-wrap">
      <li class="ampstart-nav-item col-10 sm-col-6 md-col-4">
        <div class="ampstart-input relative m0 p0 my1">
          <input type="text" value="" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Search">
          <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
        </div>
      </li>
      <li class="ampstart-nav-item col-10 sm-col-6 md-col-4 mt1">
        <button class="ampstart-btn ampstart-btn-secondary left">Search</button>
      </li>
    </ul>
  </nav>
</header>
              

<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0">
  <nav class="ampstart-headerbar-nav ampstart-nav inline-block flex">
    <header class="mt2 ml1 col-2">Navbar</header>
    <ul class="list-reset center m0 p0 flex flex-wrap justify-end items-end col-10 pl1">
      <li class="ampstart-nav-item col-3 px2 sm-col-4 md-col-4 my1 flex flex-wrap justify-center">
        <div class="ampstart-input relative mb2 inline-block0 px2">
          <input type="text" name="name1" id="ip1" class="block border-none p0 m0" placeholder="Search">
          <label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"></label>
        </div>
      </li>
      <li class="ampstart-nav-item col-9 sm-col-4 md-col-4 my1 flex flex-wrap justify-start">
        <button class="ampstart-btn ampstart-btn-secondary mb2 inline-block">Search</button>
      </li>
    </ul>
  </nav>
</header>
                  

Text


<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0 pl1">
  <nav class="ampstart-headerbar-nav ampstart-nav">
    <span>Navbar text with an inline element</span>
  </nav>
</header>
                  

Mix and match with other components and utilities as needed.


<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0">
  <nav class="ampstart-headerbar-nav ampstart-nav flex flex-wrap justify-between">
    <ul class="list-reset center m0 p0 flex flex-wrap left">
      <li class="ampstart-nav-item px0">
        <header>Navbar</header>
      </li>
      <li class="ampstart-nav-item px0">
        <a href="#" class="text-decoration-none block">Home</a>
      </li>
      <li class="ampstart-nav-item px0">
        <a href="#" class="text-decoration-none block">Menu</a>
      </li>
      <li class="ampstart-nav-item px0">
        <a href="#" class="text-decoration-none block">About</a>
      </li>
    </ul>
    <ul class="list-reset center m0 p0">
      <li class="ampstart-nav-item">
        <span>Text inline element</span>
      </li>
    </ul>
  </nav>
</header>
                

Placement

Default


<header class="ampstart-headerbar flex justify-start items-center ampstart-card top-0 left-0 right-0 pl2 pr4">   
  <nav class="ampstart-headerbar-nav ampstart-nav">       
    <header><a href="#">Default</a></header>   
  </nav>
</header>
                

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="Fixed top" href="#">Default</a>
</nav>
                        

<header class="ampstart-headerbar flex justify-start items-center top-0 left-0 right-0 pl2 pr4"> 
  <nav class="ampstart-headerbar-nav ampstart-nav">       
    <header>
      <a href="#">Fixed top</a>
    </header> 
  </nav>
</header>
      

Tooltips


<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>
                

Tooltips


<button type="button" class="ampstart-btn" title="Tooltip">
  Tooltip
</button>
                

Disabled elements


<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
            

Disabled elements


<span title="Disabled tooltip">
  <button type="button" class="ampstart-btn" disabled>Disabled button</button>
</span>