Components Page
Alerts
Default
<div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert—check it out! </div> <div class="alert alert-success" role="alert"> A simple success alert—check it out! </div> <div class="alert alert-danger" role="alert"> A simple danger alert—check it out! </div> <div class="alert alert-warning" role="alert"> A simple warning alert—check it out! </div> <div class="alert alert-info" role="alert"> A simple info alert—check it out! </div> <div class="alert alert-light" role="alert"> A simple light alert—check it out! </div> <div class="alert alert-dark" role="alert"> A simple dark alert—check it out! </div>
App Icons
App Icons with Title
<h1> <span class="app-icon app-icon-black">ai</span> <span class="app-icon-title">h1. Application Title</span> </h1> <h2> <span class="app-icon app-icon-blue">ai</span> <span class="app-icon-title">h2. Application Title</span> </h2> <h3> <span class="app-icon app-icon-green">ai</span> <span class="app-icon-title">h3. Application Title</span> </h3> <h4> <span class="app-icon app-icon-orange">ai</span> <span class="app-icon-title">h4. Application Title</span> </h4> <h4> <span class="app-icon app-icon-red">ai</span> <span class="app-icon-title">h4. Application Title</span> </h4> <h5> <span class="app-icon app-icon-branded-black">ai<span class="caret"></span></span> <span class="app-icon-title">h5. Application Title</span> </h5>
Default Icons
<div> <span class="app-icon app-icon-black">ai</span> <span class="app-icon app-icon-blue">ai</span> <span class="app-icon app-icon-green">ai</span> <span class="app-icon app-icon-orange">ai</span> <span class="app-icon app-icon-red">ai</span> </div> <div> <span class="app-icon app-icon-branded-black">ai<span class="caret"></span></span> <span class="app-icon app-icon-branded-blue">ai<span class="caret"></span></span> <span class="app-icon app-icon-branded-green">ai<span class="caret"></span></span> <span class="app-icon app-icon-branded-orange">ai<span class="caret"></span></span> <span class="app-icon app-icon-branded-red">ai<span class="caret"></span></span> </div>
Extra Large Icons
<div> <span class="app-icon app-icon-xl app-icon-black">ai</span> <span class="app-icon app-icon-xl app-icon-blue">ai</span> <span class="app-icon app-icon-xl app-icon-green">ai</span> <span class="app-icon app-icon-xl app-icon-orange">ai</span> <span class="app-icon app-icon-xl app-icon-red">ai</span> </div> <div> <span class="app-icon app-icon-xl app-icon-branded-black">ai<span class="caret"></span></span> <span class="app-icon app-icon-xl app-icon-branded-blue">ai<span class="caret"></span></span> <span class="app-icon app-icon-xl app-icon-branded-green">ai<span class="caret"></span></span> <span class="app-icon app-icon-xl app-icon-branded-orange">ai<span class="caret"></span></span> <span class="app-icon app-icon-xl app-icon-branded-red">ai<span class="caret"></span></span> </div>
Large Icons
<div> <span class="app-icon app-icon-lg app-icon-black">ai</span> <span class="app-icon app-icon-lg app-icon-blue">ai</span> <span class="app-icon app-icon-lg app-icon-green">ai</span> <span class="app-icon app-icon-lg app-icon-orange">ai</span> <span class="app-icon app-icon-lg app-icon-red">ai</span> </div> <div> <span class="app-icon app-icon-lg app-icon-branded-black">ai<span class="caret"></span></span> <span class="app-icon app-icon-lg app-icon-branded-blue">ai<span class="caret"></span></span> <span class="app-icon app-icon-lg app-icon-branded-green">ai<span class="caret"></span></span> <span class="app-icon app-icon-lg app-icon-branded-orange">ai<span class="caret"></span></span> <span class="app-icon app-icon-lg app-icon-branded-red">ai<span class="caret"></span></span> </div>
With Breadcrumbs
<ul class="breadcrumb"> <li class="breadcrumb-item"> <a href="#">Home</a> </li> <li class="breadcrumb-item"> <a href="#">Spaces</a> </li> <li class="breadcrumb-item active"> My Application </li> </ul> <h1> <span class="app-icon app-icon-black">ai</span> <span class="app-icon-title">h1. Application Title</span> </h1>
Badges
Blocks
Primary badge
Secondary badge
Success badge
Info badge
Warning badge
Danger badge
<h1 class="badge badge-primary badge-block">Primary badge</h1> <h2 class="badge badge-secondary badge-block">Secondary badge</h2> <h3 class="badge badge-success badge-block">Success badge</h3> <h4 class="badge badge-info badge-block">Info badge</h4> <h5 class="badge badge-warning badge-block">Warning badge</h5> <h6 class="badge badge-danger badge-block">Danger badge</h6> <div class="badge badge-brand badge-block">Brand badge</div> <div class="badge badge-extra badge-block">Extra badge</div> <div class="badge badge-light badge-block">Light badge</div> <div class="badge badge-dark badge-block">Dark badge</div>
Contextual Variations
UnstyledPrimarySecondarySuccessInfoWarningDangerBrandExtraLightDark012345678910
<p><span class="badge badge-unstyled">Unstyled</span> <span class="badge badge-primary">Primary</span> <span class="badge badge-secondary">Secondary</span> <span class="badge badge-success">Success</span> <span class="badge badge-info">Info</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-danger">Danger</span> <span class="badge badge-brand">Brand</span> <span class="badge badge-extra">Extra</span> <span class="badge badge-light">Light</span> <span class="badge badge-dark">Dark</span> <span class="badge badge-unstyled">0</span> <span class="badge badge-primary">1</span> <span class="badge badge-secondary">2</span> <span class="badge badge-success">3</span> <span class="badge badge-info">4</span> <span class="badge badge-warning">5</span> <span class="badge badge-danger">6</span> <span class="badge badge-brand">7</span> <span class="badge badge-extra">8</span> <span class="badge badge-light">9</span> <span class="badge badge-dark">10</span></p>
Default
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<h1>Example heading <span class="badge badge-secondary">New</span></h1> <h2>Example heading <span class="badge badge-secondary">New</span></h2> <h3>Example heading <span class="badge badge-secondary">New</span></h3> <h4>Example heading <span class="badge badge-secondary">New</span></h4> <h5>Example heading <span class="badge badge-secondary">New</span></h5> <h6>Example heading <span class="badge badge-secondary">New</span></h6> <button class="btn"> Notifications <span class="badge badge-secondary">4</span> </button>
Links
View Code<p><a href="#" class="badge badge-primary">Primary</a> <a href="#" class="badge badge-secondary">Secondary</a> <a href="#" class="badge badge-success">Success</a> <a href="#" class="badge badge-danger">Danger</a> <a href="#" class="badge badge-warning">Warning</a> <a href="#" class="badge badge-info">Info</a> <a href="#" class="badge badge-brand">Brand</a> <a href="#" class="badge badge-extra">Extra</a> <a href="#" class="badge badge-light">Light</a> <a href="#" class="badge badge-dark">Dark</a></p>
Notifications
<button class="btn"> Notifications <span class="badge badge-secondary">4</span> <span class="sr-only">unread messages</span> </button>
Removable badges
View Code<p><span class="badge badge-unstyled badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Unstyled</span> <span class="badge badge-primary badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Primary</span> <span class="badge badge-secondary badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Secondary</span> <span class="badge badge-success badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Success</span> <span class="badge badge-info badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Info</span> <span class="badge badge-warning badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Warning</span> <span class="badge badge-danger badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Danger</span> <span class="badge badge-brand badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Brand</span> <span class="badge badge-extra badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Extra</span> <span class="badge badge-light badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Light</span> <span class="badge badge-dark badge-remove"><a href="#" aria-label="Remove"><i class="icon icon-cancel"></i></a> Dark</span></p>
Breadcrumbs
Default
<ul class="breadcrumb"> <li class="breadcrumb-item"> <a href="#">Home</a> </li> <li class="breadcrumb-item"> <a href="#">Spaces</a> </li> <li class="breadcrumb-item active"> My Application </li> </ul>
Buttons
Default
<p><button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-ghost">Ghost</button> <button type="button" class="btn btn-link">Link</button></p>
Disabled
<p><button type="button" disabled="disabled" class="btn btn-default">Default</button> <button type="button" disabled="disabled" class="btn btn-primary">Primary</button> <button type="button" disabled="disabled" class="btn btn-success">Success</button> <button type="button" disabled="disabled" class="btn btn-info">Info</button> <button type="button" disabled="disabled" class="btn btn-warning">Warning</button> <button type="button" disabled="disabled" class="btn btn-danger">Danger</button> <button type="button" disabled="disabled" class="btn btn-dark">Dark</button> <button type="button" disabled="disabled" class="btn btn-ghost">Ghost</button> <button type="button" disabled="disabled" class="btn btn-link">Link</button></p>
File Upload
<span class="btn btn-default btn-file"> <i class="icon icon-plus-circle"></i> <span>Add files...</span> <input type="file" name="files[]" multiple aria-label="upload files"> </span> <span class="btn btn-primary btn-file"> <i class="icon icon-plus-circle"></i> <span>Add files...</span> <input type="file" name="files[]" multiple aria-label="upload files"> </span> <span class="btn btn-success btn-file"> <i class="icon icon-plus-circle"></i> <span>Add files...</span> <input type="file" name="files[]" multiple aria-label="upload files"> </span> <span class="btn btn-info btn-file"> <i class="icon icon-plus-circle"></i> <span>Add files...</span> <input type="file" name="files[]" multiple aria-label="upload files"> </span> <span class="btn btn-warning btn-file"> <i class="icon icon-plus-circle"></i> <span>Add files...</span> <input type="file" name="files[]" multiple aria-label="upload files"> </span> <span class="btn btn-danger btn-file"> <i class="icon icon-plus-circle"></i> <span>Add files...</span> <input type="file" name="files[]" multiple aria-label="upload files"> </span> <span class="btn btn-dark btn-file"> <i class="icon icon-plus-circle"></i> <span>Add files...</span> <input type="file" name="files[]" multiple aria-label="upload files"> </span> <span class="btn btn-ghost btn-file"> <i class="icon icon-plus-circle"></i> <span>Add files...</span> <input type="file" name="files[]" multiple aria-label="upload files"> </span> <span class="btn btn-link btn-file"> <i class="icon icon-plus-circle"></i> <span>Add files...</span> <input type="file" name="files[]" multiple aria-label="upload files"> </span>
Group
<div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>
Outline
<p><button type="button" class="btn btn-outline-default">Default</button> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-dark">Dark</button></p>
Cards
Alignment
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card card-body mb-3"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> <div class="card card-body mb-3 text-center"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> <div class="card card-body mb-3 text-right"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div>
Cards
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button<div class="card"> <img class="card-img-top" data-src="holder.js/100px180?text=Image" height="180" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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">Button</a> </div> </div>
Collapsible
View more data
Some extra data to view
Even more data
<div class="card card-collapsible"> <h5 class="card-header"> <a class="collapsed card-collapsible-link" data-toggle="collapse" href="#exampleCollapse"> View more data </a> </h5> <div id="exampleCollapse" class="collapse" aria-expanded="false"> <div class="card-body"> <p>Some extra data to view</p> <p>Even more data</p> </div> </div> </div>
Content Types
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card linkAnother linkSome quick example text to build on the card title and make up the bulk of the card's content.
Card title
Support card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card linkAnother linkCard title
Support card subtitle
- one
- two
- three
<div class="card"> <div class="card-body"> <h4 class="card-title">Card title</h4> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <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="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> <div class="card"> <img class="card-img-top" data-src="holder.js/100px180?text=Image" height="180" alt="100px180"> <div class="card-body"> <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> </div> </div> <div class="card"> <div class="card-body"> <h4 class="card-title">Card title</h4> <h6 class="card-subtitle text-muted">Support card subtitle</h6> </div> <img data-src="holder.js/100px180/?text=Image" height="180" alt="Card image"> <div class="card-body"> <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="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> <div class="card card-body"> <h4 class="card-title">Card title</h4> <h6 class="card-subtitle text-muted">Support card subtitle</h6> <ul class="card-body"> <li>one</li> <li>two</li> <li>three</li> </ul> </div>
Header and Footer
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereImage Caps
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<div class="card"> <img class="card-img-top" data-src="holder.js/100px180?text=Image" height="180" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div>
Sizes
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="row"> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div>
Variants
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<div class="card text-white bg-primary mb-3 text-center"> <div class="card-body"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> <div class="card text-white bg-success mb-3 text-center"> <div class="card-body"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> <div class="card text-white bg-info mb-3 text-center"> <div class="card-body"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> <div class="card text-dark bg-warning mb-3 text-center"> <div class="card-body"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> <div class="card text-white bg-danger mb-3 text-center"> <div class="card-body"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> <div class="card text-white bg-secondary mb-3 text-center"> <div class="card-body"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> <div class="card text-dark bg-light mb-3 text-center"> <div class="card-body"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> <div class="card text-white bg-dark mb-3 text-center"> <div class="card-body"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div>
Colors
Standard
<div class="colors-container"> <div class="row"> <div class="col-sm-2"> <div class="docs-color-item"> <div class="docs-color-item-header" style="background-color:#d93d11;"></div> <span class="docs-color-item-footer">#d93d11</span> </div> </div> <div class="col-sm-2"> <div class="docs-color-item"> <div class="docs-color-item-header" style="background-color:#2261b5;"></div> <span class="docs-color-item-footer">#2261b5</span> </div> </div> <div class="col-sm-2"> <div class="docs-color-item"> <div class="docs-color-item-header" style="background-color:#007cc2;"></div> <span class="docs-color-item-footer">#007cc2</span> </div> </div> <div class="col-sm-2"> <div class="docs-color-item"> <div class="docs-color-item-header" style="background-color:#4D4F53;"></div> <span class="docs-color-item-footer">#4D4F53</span> </div> </div> <div class="col-sm-2"> <div class="docs-color-item"> <div class="docs-color-item-header" style="background-color:#e8ebeb;"></div> <span class="docs-color-item-footer">#e8ebeb</span> </div> </div> <div class="col-sm-2"> <div class="docs-color-item"> <div class="docs-color-item-header" style="background-color:#ffffff;"></div> <span class="docs-color-item-footer">#ffffff</span> </div> </div> </div> </div>
Status & Alerts
<div class="colors-container"> <div class="row"> <div class="col-sm-3"> <div class="docs-color-item"> <div class="docs-color-item-header alert-success"></div> <span class="docs-color-item-footer">#136857</span> </div> </div> <div class="col-sm-3"> <div class="docs-color-item"> <div class="docs-color-item-header alert-info"></div> <span class="docs-color-item-footer">#385e7a</span> </div> </div> <div class="col-sm-3"> <div class="docs-color-item"> <div class="docs-color-item-header alert-warning"></div> <span class="docs-color-item-footer">#e6c400</span> </div> </div> <div class="col-sm-3"> <div class="docs-color-item"> <div class="docs-color-item-header alert-danger"></div> <span class="docs-color-item-footer">#a01708</span> </div> </div> </div> </div>
Forms
Checkboxes
<label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-label">Check this custom checkbox</span> </label> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" disabled> <span class="custom-control-label">Disabled checkbox</span> </label> <label class="custom-control custom-checkbox disabled"> <input type="checkbox" class="custom-control-input" disabled> <span class="custom-control-label">Disabled checkbox and cursor</span> </label>
Default
<div class="card"> <div class="card-body"> <form> <h5 class="card-title-secondary">Request Information</h5> <div class="form-group"> <label for="memberID" id="memberID-label"> Member ID </label> <a href="#Forms-Inline-Help" class="icon icon-help-circle icon-1x text-primary" tabindex="0" aria-label="help" aria-describedby="memberID-label"></a> <input type="text" class="form-control" id="memberID" placeholder=""> </div> <div class="form-group"> <label for="relationshipToSubscriber" id="relationshipToSubscriber-label"> Relationship to Subscriber </label> <a href="#Forms-Inline-Help" class="icon icon-help-circle icon-1x text-primary" tabindex="0" aria-label="help" aria-describedby="relationshipToSubscriber-label"></a> <select class="form-control custom-select custom-block" id="relationshipToSubscriber"> <option>Select one</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </div> <div class="form-group"> <label for="datetimepicker7"> Date of Birth </label> <input type="text" class="form-control" id="datetimepicker7" placeholder="mm/dd/yyyy"> </div> <div class="form-group"> <div class="row"> <div class="col-sm-4"> <label for="serviceQuantity"> Service Quantity </label> <input type="text" id="serviceQuantity" class="form-control"> </div> <div class="col-sm-8"> <label for="serviceType"> Service Type </label> <select class="form-control custom-select custom-block" id="serviceType"> <option>Select one</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </div> </div> </div> <div class="form-controls"> <input type="submit" class="btn btn-default" value="Cancel"> <input type="submit" class="btn btn-default" value="Ok"> <input type="submit" class="btn btn-default" value="Maybe"> <input type="submit" class="btn btn-primary form-controls-right" value="Save"> </div> </form> </div> </div>
Inline
<form class="form-inline form-check-inline"> <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label> <select class="form-control custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelect"> <option>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <label class="form-check-label mb-2 mr-sm-2 mb-sm-0"> <input type="checkbox" class="form-check-input"> Remember my preference </label> <button type="submit" class="btn btn-primary">Submit</button> </form>
Inline Help
View Code<div class="form-group"> <label for="text3" id="text-label">Label for text input</label><a href="#Forms-Inline-Help" class="icon icon-help-circle icon-1x text-primary" tabindex="0" aria-label="help" aria-describedby="text-label"></a> <input type="text" class="form-control" id="text3" placeholder="Type what you want here"> </div>
Radios
<label class="custom-control custom-radio"> <input id="radio1" name="radio" type="radio" class="custom-control-input"> <span class="custom-control-label">Toggle this custom radio</span> </label> <label class="custom-control custom-radio"> <input id="radio2" name="radioDisabled" type="radio" class="custom-control-input" disabled> <span class="custom-control-label">Disabled Radio</span> </label> <label class="custom-control custom-radio disabled"> <input id="radio3" name="radioDisabledAll" type="radio" class="custom-control-input" disabled> <span class="custom-control-label">Disabled Radio and cursor</span> </label>
Required
<fieldset> <legend>Contact Information</legend> <p>Fields marked with an asterisk <span class="required-asterisk">*</span> are required</p> <div class="row"> <div class="col-md-5"> <div class="form-group"> <label for="firstName10"><span class="required-asterisk">*</span> First Name</label> <input type="email" class="form-control" id="firstName10" placeholder="Text input"> </div> <div class="form-group"> <label for="lastName10"><span class="required-asterisk">*</span> Last Name</label> <input type="email" class="form-control" id="lastName10" placeholder="Text input"> </div> <div class="form-group"> <label for="phonenNumber10">Phone</label> <input type="email" class="form-control" id="phonenNumber10" placeholder="Text input"> </div> </div> </div> </fieldset>
Validation
<div class="form-group text-danger"> <label for="text5">Label for text input</label> <input type="text" class="form-control is-touched is-invalid" id="text5" placeholder="has error" aria-invalid="true" aria-describedby="text5-feedback text5-help"> <div class="invalid-feedback" id="text5-feedback">Example block-level help text here.</div> <small class="form-text text-muted" id="text5-help">Example help text that remains unchanged.</small> </div>
List Groups
Default
<div class="list-group list-group-cards"> <a class="list-group-item primary" href="#"> <h4 class="list-group-item-heading">Rogers, Steve</h4> <p class="list-group-item-text">US Army</p> </a> <a class="list-group-item secondary" href="#"> <h4 class="list-group-item-heading">Kent, Clark</h4> <p class="list-group-item-text">Daily Planet</p> </a> <a class="list-group-item success" href="#"> <h4 class="list-group-item-heading">Banner, Bruce</h4> <p class="list-group-item-text">Defense Department</p> </a> <a class="list-group-item danger" href="#"> <h4 class="list-group-item-heading">Parker, Peter</h4> <p class="list-group-item-text">The Daily Bugle</p> </a> <a class="list-group-item warning" href="#"> <h4 class="list-group-item-heading">Wayne, Bruce</h4> <p class="list-group-item-text">Wayne Industries</p> </a> <a class="list-group-item info" href="#"> <h4 class="list-group-item-heading">Quill, Peter</h4> <p class="list-group-item-text">Universe</p> </a> <a class="list-group-item light" href="#"> <h4 class="list-group-item-heading">Stark, Tony</h4> <p class="list-group-item-text">Stark Industries</p> </a> <a class="list-group-item dark" href="#"> <h4 class="list-group-item-heading">Strange, Stephen</h4> <p class="list-group-item-text">Sanctum Sanctorum</p> </a> </div>
Selectable
Rogers, Steve
US Army
Kent, Clark
Daily Planet
Banner, Bruce
Defense Department
Parker, Peter
The Daily Bugle
Wayne, Bruce
Wayne Industries
Quill, Peter
Universe
Stark, Tony
Stark Industries
Strange, Stephen
Sanctum Sanctorum
</><div class="list-group list-group-cards list-group-selectable"> <div class="list-group-item primary"> <h4 class="list-group-item-heading">Rogers, Steve</h4> <p class="list-group-item-text">US Army</p> </div> <div class="list-group-item secondary"> <h4 class="list-group-item-heading">Kent, Clark</h4> <p class="list-group-item-text">Daily Planet</p> </div> <div class="list-group-item success"> <h4 class="list-group-item-heading">Banner, Bruce</h4> <p class="list-group-item-text">Defense Department</p> </div> <div class="list-group-item danger"> <h4 class="list-group-item-heading">Parker, Peter</h4> <p class="list-group-item-text">The Daily Bugle</p> </div> <div class="list-group-item warning"> <h4 class="list-group-item-heading">Wayne, Bruce</h4> <p class="list-group-item-text">Wayne Industries</p> </div> <div class="list-group-item info"> <h4 class="list-group-item-heading">Quill, Peter</h4> <p class="list-group-item-text">Universe</p> </div> <div class="list-group-item light"> <h4 class="list-group-item-heading">Stark, Tony</h4> <p class="list-group-item-text">Stark Industries</p> </div> <div class="list-group-item dark"> <h4 class="list-group-item-heading">Strange, Stephen</h4> <p class="list-group-item-text">Sanctum Sanctorum</p> </> </div>
Nav
Pills
Home
Profile
Messages
Settings
Secondary Pills
Home
Profile
Messages
Settings
Navbar
Default
Forms
Mega Menu
Notifications
Secondary
Navs
Default
Home
Profile
Messages
Settings
Pagination
Default
View Code<ul class="pagination"> <li class="page-item disabled"><a class="page-link" href="#">« Prev</a></li> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li> <li class="page-item"><a class="page-link" href="#">5</a></li> <li class="page-item"><a class="page-link" href="#">Next »</a></li> </ul> <div class="pagination-container"> <ul class="pagination"> <li class="page-item disabled"><a class="page-link" href="#">« Prev</a></li> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">Next »</a></li> </ul> <div class="pagination-text"> Show </div> <select class="custom-select" aria-label="Showing results"> <option>10 results</option> <option>20 results</option> <option>30 results</option> </select> <div class="pagination-text"> Showing batches 1-10 of 12 </div> </div>
Unstyled
View Code<ul class="pagination pagination-unstyled"> <li class="page-item disabled"><a class="page-link" href="#">« Prev</a></li> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li> <li class="page-item"><a class="page-link" href="#">5</a></li> <li class="page-item"><a class="page-link" href="#">Next »</a></li> </ul> <div class="pagination-container"> <ul class="pagination pagination-unstyled"> <li class="page-item disabled"><a class="page-link" href="#">« Prev</a></li> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">Next »</a></li> </ul> <div class="pagination-text"> Show </div> <select class="custom-select" aria-label="Showing results"> <option>10 results</option> <option>20 results</option> <option>30 results</option> </select> <div class="pagination-text"> Showing batches 1-10 of 12 </div> </div>
Progress Bars
Default
0% Complete
80% Complete
100% Complete
Processing
<p>0% Complete</p> <div class="progress"> <span class="progress-bar bg-success" style="width: 0%;"></span> </div> <p>80% Complete</p> <div class="progress"> <span class="progress-bar bg-success" style="width: 80%;"></span> </div> <p>100% Complete</p> <div class="progress progress-complete"> <span class="progress-bar bg-success" style="width: 100%;"></span> </div> <p>Processing</p> <div class="progress"> <span class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 50%;"></span> </div>
StepWizard
Bar
Stacked
<div class="stepwizard stepwizard-bar"> <div class="stepwizard-row"> <a class="stepwizard-step complete" href="#step-1"> <span class="stepwizard-badge">1</span> <span class="stepwizard-title">First</span> </a> <a class="stepwizard-step active" href="#step-2"> <span class="stepwizard-badge">2</span> <span class="stepwizard-title">Second with some long text</span> </a> <a class="stepwizard-step" href="#step-3"> <span class="stepwizard-badge">3</span> <span class="stepwizard-title">Third</span> </a> <a class="stepwizard-step disabled" href="#step-4"> <span class="stepwizard-badge">4</span> <span class="stepwizard-title">Fourth with some really really really long text</span> </a> <div class="stepwizard-step"> <span class="stepwizard-badge">5</span> <span class="stepwizard-title">Fifth without link</span> </div> <div class="stepwizard-step stepwizard-step-clickable"> <span class="stepwizard-badge">6</span> <span class="stepwizard-title">Sixth without link but clickable</span> </div> </div> </div> <h5>Stacked</h5> <div class="stepwizard stepwizard-bar stepwizard-stacked"> <div class="stepwizard-row"> <a class="stepwizard-step complete" href="#step-1"> <span class="stepwizard-badge">1</span> <span class="stepwizard-title">First</span> </a> <a class="stepwizard-step active" href="#step-2"> <span class="stepwizard-badge">2</span> <span class="stepwizard-title">Second with some long text</span> </a> <a class="stepwizard-step" href="#step-3"> <span class="stepwizard-badge">3</span> <span class="stepwizard-title">Third</span> </a> <a class="stepwizard-step disabled" href="#step-4"> <span class="stepwizard-badge">4</span> <span class="stepwizard-title">Fourth with some really really really long text</span> </a> <div class="stepwizard-step"> <span class="stepwizard-badge">5</span> <span class="stepwizard-title">Fifth without link</span> </div> <div class="stepwizard-step stepwizard-step-clickable"> <span class="stepwizard-badge">6</span> <span class="stepwizard-title">Sixth without link but clickable</span> </div> </div> </div>
Default
Stacked
<div class="stepwizard"> <div class="stepwizard-row"> <a class="stepwizard-step complete" href="#step-1"> <span class="stepwizard-badge">1</span> <span class="stepwizard-title">First</span> </a> <a class="stepwizard-step active" href="#step-2"> <span class="stepwizard-badge">2</span> <span class="stepwizard-title">Second with some long text</span> </a> <a class="stepwizard-step" href="#step-3"> <span class="stepwizard-badge">3</span> <span class="stepwizard-title">Third</span> </a> <a class="stepwizard-step disabled" href="#step-4"> <span class="stepwizard-badge">4</span> <span class="stepwizard-title">Fourth with some really really really long text</span> </a> <div class="stepwizard-step"> <span class="stepwizard-badge">5</span> <span class="stepwizard-title">Fifth without link</span> </div> <div class="stepwizard-step stepwizard-step-clickable"> <span class="stepwizard-badge">6</span> <span class="stepwizard-title">Sixth without link but clickable</span> </div> </div> </div> <h5>Stacked</h5> <div class="stepwizard stepwizard-stacked"> <div class="stepwizard-row"> <a class="stepwizard-step complete" href="#step-1"> <span class="stepwizard-badge">1</span> <span class="stepwizard-title">First</span> </a> <a class="stepwizard-step active" href="#step-2"> <span class="stepwizard-badge">2</span> <span class="stepwizard-title">Second with some long text</span> </a> <a class="stepwizard-step" href="#step-3"> <span class="stepwizard-badge">3</span> <span class="stepwizard-title">Third</span> </a> <a class="stepwizard-step disabled" href="#step-4"> <span class="stepwizard-badge">4</span> <span class="stepwizard-title">Fourth with some really really really long text</span> </a> <div class="stepwizard-step"> <span class="stepwizard-badge">5</span> <span class="stepwizard-title">Fifth without link</span> </div> <div class="stepwizard-step stepwizard-step-clickable"> <span class="stepwizard-badge">6</span> <span class="stepwizard-title">Sixth without link but clickable</span> </div> </div> </div>
Progress
Stacked
<div class="stepwizard stepwizard-progress"> <div class="stepwizard-row"> <a class="stepwizard-step complete" href="#step-1"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">First</span> </a> <a class="stepwizard-step active" href="#step-2"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">Second with some long text</span> </a> <a class="stepwizard-step" href="#step-3"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">Third</span> </a> <a class="stepwizard-step disabled" href="#step-4"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">Fourth with some really really really long text</span> </a> <div class="stepwizard-step"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">Fifth without link</span> </div> <div class="stepwizard-step stepwizard-step-clickable"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">Sixth without link but clickable</span> </div> </div> </div> <h5>Stacked</h5> <div class="stepwizard stepwizard-progress stepwizard-stacked"> <div class="stepwizard-row"> <a class="stepwizard-step complete" href="#step-1"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">First</span> </a> <a class="stepwizard-step active" href="#step-2"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">Second with some long text</span> </a> <a class="stepwizard-step" href="#step-3"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">Third</span> </a> <a class="stepwizard-step disabled" href="#step-4"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">Fourth with some really really really long text</span> </a> <div class="stepwizard-step"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">Fifth without link</span> </div> <div class="stepwizard-step stepwizard-step-clickable"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">Sixth without link but clickable</span> </div> </div> </div>
Tables
Contextual
# | Column heading | Column heading | Column heading |
---|---|---|---|
1 | Column content | Column content | Column content |
3 | Column content | Column content | Column content |
4 | Column content | Column content | Column content |
5 | Column content | Column content | Column content |
6 | Column content | Column content | Column content |
7 | Column content | Column content | Column content |
8 | Column content | Column content | Column content |
9 | Column content | Column content | Column content |
<table class="table"> <thead> <tr> <th>#</th> <th>Column heading</th> <th>Column heading</th> <th>Column heading</th> </tr> </thead> <tbody> <tr class="table-active"> <td>1</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="table-success"> <td>3</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td>4</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="table-info"> <td>5</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td>6</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="table-warning"> <td>7</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td>8</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="table-danger"> <td>9</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> </tbody> </table>
Default
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table"> <caption>Optional table caption.</caption> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
Fixed
# | Haiku | Last Name | Username |
---|---|---|---|
1 | Haikus are easy; but sometimes they don't make sense; refrigerator | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-fixed"> <thead> <tr> <th class="col-md-1">#</th> <th class="col-md-3">Haiku</th> <th class="col-md-2">Last Name</th> <th class="col-md-5">Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td class="text-truncate">Haikus are easy; but sometimes they don't make sense; refrigerator</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
Hover
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<table class="table table-hover"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
Striped
# | First Name | Last Name | Health Plan |
---|---|---|---|
1 | Lance | Gutin | Cigna |
2 | Elliott | Muñoz | Florida Blue |
3 | Kevin | Vigneault | Humana |
4 | Todd | Moy | Wellpoint |
<table class="table table-striped"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Health Plan</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Lance</td> <td>Gutin</td> <td>Cigna</td> </tr> <tr> <td>2</td> <td>Elliott</td> <td>Muñoz</td> <td>Florida Blue</td> </tr> <tr> <td>3</td> <td>Kevin</td> <td>Vigneault</td> <td>Humana</td> </tr> <tr> <td>4</td> <td>Todd</td> <td>Moy</td> <td>Wellpoint</td> </tr> </tbody> </table>
Typography
Agreement
veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur
doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio
veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur
doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio
veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur
doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio
veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur
doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio
veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur
doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio
<div class="agreement"> <p>veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur</p> <p>doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio</p> <p>veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur</p> <p>doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio</p> <p>veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur</p> <p>doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio</p> <p>veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur</p> <p>doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio</p> <p>veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur</p> <p>doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio</p> </div>
Default
h1. Bootstrap heading Secondary text
h2. Bootstrap heading Secondary text
h3. Bootstrap heading Secondary text
h4. Bootstrap heading Secondary text
h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
<h1>h1. Bootstrap heading <small>Secondary text</small></h1> <hr class="docs-block-text"/> <hr class="docs-block-text-small"/> <hr class="docs-block-text-medium"/> <h2>h2. Bootstrap heading <small>Secondary text</small></h2> <hr class="docs-block-text"/> <hr class="docs-block-text-small"/> <hr class="docs-block-text-medium"/> <h3>h3. Bootstrap heading <small>Secondary text</small></h3> <hr class="docs-block-text"/> <hr class="docs-block-text-small"/> <hr class="docs-block-text-medium"/> <h4>h4. Bootstrap heading <small>Secondary text</small></h4> <hr class="docs-block-text"/> <hr class="docs-block-text-small"/> <hr class="docs-block-text-medium"/> <h5>h5. Bootstrap heading <small>Secondary text</small></h5> <hr class="docs-block-text"/> <hr class="docs-block-text-small"/> <hr class="docs-block-text-medium"/> <h6>h6. Bootstrap heading <small>Secondary text</small></h6> <hr class="docs-block-text"/> <hr class="docs-block-text-small"/> <hr class="docs-block-text-medium"/>
Disclaimers
<div class="disclaimer"> I have fully read this agreement and understand that I am entering into a legally binding agreement and that my organization is bound by the terms and conditions contained therein. I attest and certify that I am the Primary Controlling Authority for the organization named herein and that I possess the necessary legal authority to bind this organization. I further attest and certify my organization's designation as a Covered Entity under HIPAA, as more fully described in 45 CFR § 160.103. </div>
Disclaimers Unstyled
<div class="disclaimer-unstyled"> I have fully read this agreement and understand that I am entering into a legally binding agreement and that my organization is bound by the terms and conditions contained therein. I attest and certify that I am the Primary Controlling Authority for the organization named herein and that I possess the necessary legal authority to bind this organization. I further attest and certify my organization's designation as a Covered Entity under HIPAA, as more fully described in 45 CFR § 160.103. </div>
Header Logo
View Code<h2 class="page-header page-header-brand"> <div class="page-header-title"> <span class="app-icon app-icon-black">ar</span> Authorization Results </div> <div class="page-header-logo"> <a href="http://www.example.com" class=" spaces-logo holderjs" aria-label="spaces logo"></a> </div> </h2>
Headers
Header Text Section Header Link
<h3 class="section-header">Header Text <small><a href="#" class="section-header-link">Section Header Link</a></small> </h3>
Links
View Code<p><a href="#" class="link">Link to internal resource</a></p> <p><a href="#" class="link external">Link to external resource</a></p> <p><a href="#" class="link"><small>Link with small text</small></a></p>
Subheader
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
<h1 class="subheader">h1. Bootstrap heading</h1> <hr class="docs-block-text"/> <hr class="docs-block-text-small"/> <hr class="docs-block-text-medium"/> <h2 class="subheader">h2. Bootstrap heading</h2> <hr class="docs-block-text"/> <hr class="docs-block-text-small"/> <hr class="docs-block-text-medium"/> <h3 class="subheader">h3. Bootstrap heading</h3> <hr class="docs-block-text"/> <hr class="docs-block-text-small"/> <hr class="docs-block-text-medium"/> <h4 class="subheader">h4. Bootstrap heading</h4> <hr class="docs-block-text"/> <hr class="docs-block-text-small"/> <hr class="docs-block-text-medium"/> <h5 class="subheader">h5. Bootstrap heading</h5> <hr class="docs-block-text"/> <hr class="docs-block-text-small"/> <hr class="docs-block-text-medium"/> <h6 class="subheader">h6. Bootstrap heading</h6> <hr class="docs-block-text"/> <hr class="docs-block-text-small"/> <hr class="docs-block-text-medium"/>
Utilities
Lowercase text
Uppercase text
Capitalized text
Truncated text on overflow
WrapTextWithoutBreakableCharacters
<p class="text-lowercase">Lowercase text</p> <p class="text-uppercase">Uppercase text</p> <p class="text-capitalize">Capitalized text</p> <p class="text-truncate" style="width:100px">Truncated text on overflow</p> <p class="text-break" style="width:100px">WrapTextWithoutBreakableCharacters</p>