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>
All HTML headings, <h1> through <h6>, are available.
| Heading | Example |
|---|---|
|
|
h1. Bootstrap heading |
|
|
h2. Bootstrap heading |
|
|
h3. Bootstrap heading |
|
|
h4. Bootstrap heading |
|
|
h5. Bootstrap heading |
|
|
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>
<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>
<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>
<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>
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>
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="ampstart-small-text">HTML</abbr></p>
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
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>
<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>
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>
<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>
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>
<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>
<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>
<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>
<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>
<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>
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
<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>
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
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>
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>
For longer content, you can add a .truncate class to
truncate the text with an ellipsis.
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>
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
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>
<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>
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>
Remove a text decoration with a .text-decoration-none class.
<a href="#" class="text-decoration-none">Non-underlined link</a>
Remove a text decoration with a .text-decoration-none class.
<a href="#" class="text-decoration-none">Non-underlined link</a>
<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-primary
.text-secondary
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<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>
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>
<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">
<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">
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>
Use the.ampstart-btn ampstart-btn-secondary
class within <button>tag for outline button.
<button class="ampstart-btn ampstart-btn-secondary">Secondary</button>
<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>
<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>
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>
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>
<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>
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>
A slideshow component for cycling through elements—images or slides of text—like a
carousel.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
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>
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>
Add captions to your slides easily with the <figcaption> Tag within any
<amp-carousel>
Tag.
Duis nec dolor et quam vulputate sagittis. Nam arcu ex, suscipit nec cursus a, volutpat sit amet felis.
Taken by L. FischerDuis nec dolor et quam vulputate sagittis. Nam arcu ex, suscipit nec cursus a, volutpat sit amet felis.
Taken by Mali D.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>
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>
The expand-single-section attribute forces the
accordion to only allow one expanded section at any given time.
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.
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.
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>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<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>
<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>
<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>
<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>
<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>
<input class="form-control" type="text" placeholder="Readonly input here..." 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>
<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>
<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>
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>
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>
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>
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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<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>
<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>
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 .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>
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>
<!-- 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>
<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>
<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>
<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>
<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>
<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>
<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>
<button type="button" class="ampstart-btn" title="Tooltip">
Tooltip
</button>
<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>
<span title="Disabled tooltip">
<button type="button" class="ampstart-btn" disabled>Disabled button</button>
</span>