Source: dist/css/acc_boot.css, line 11919
3 Bootstrap
Bootstrap 5 is a complete UI framework with many features
.Please familiarize yourself with bootstrap framework as you build. It will give you access to grid, forms and other UI items.
BootstrapSource: dist/css/acc_boot.css, line 12415
3.1 Carousel ALT
A slide-show component for cycling through groups of images and text.
.no-controls Will remove left and right arrow .text-indicators Converts the circle indicators to text tabs that lock to the right side of the images. .chevron-on Adds a light orange chevron on the '.active' indicator to increase its impact.
Example
Default styling
- quaerat odit assumenda
- delectus sunt optio
- deserunt quia quasi
Cardiac Syncope Program Launches!
NEW | Hear from an expert panel and complete four patient cases to test your knowledge on our Syncope Program! Find out more!
sint explicabo sequi Earum nihil omnis.
sint explicabo sequi Earum nihil omnis.
<div
id="carouselExampleFade"
class="carousel carousel-alt slide no-controls text-indicators chevron-on"
>
<ol class="carousel-indicators">
<li data-target="#carouselExampleFade" data-slide-to="0" class="wrap" >
quaerat odit assumenda
</li>
<li data-target="#carouselExampleFade" data-slide-to="1" class=" wrap">
delectus sunt optio
</li>
<li data-target="#carouselExampleFade" data-slide-to="2" class=" wrap">
deserunt quia quasi
</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<a><img class="block w_100" src="http://lorempixel.com/630/420/animals" alt="..."/></a>
<div class="carousel-caption bg_black-7 text-shadow_black-1 text_center text_left:md font_2:md c_white p_3:lg p-b_4:lg p-y_3 lh_1 b_0 r_0 l_0">
<span class="title font_display block m-b_2 font_4:md m-b_3:md">Cardiac Syncope Program Launches!</span>
<p><strong>NEW</strong> | Hear from an expert panel and complete four patient cases to test your knowledge on our Syncope Program! <a href="http://edu.acc.org/diweb/catalog/item/eid/SYNCOPE2019" title="" class="" target="_blank"><strong>Find out more!</strong></a></p>
</div>
</div>
<div class="carousel-item">
<a><img class="block w_100" src="http://lorempixel.com/630/420/nature" alt="..."/></a>
<div class="carousel-caption bg_black-7 text-shadow_black-1 text_center text_left:md font_2:md c_white p_3:lg p-b_4:lg p-y_3 lh_1 b_0 r_0 l_0">
<span class="title font_display block m-b_2 font_4:md m-b_3:md">sint explicabo sequi</span> Earum nihil omnis.
</div>
</div>
<div class="carousel-item">
<a><img class="block w_100" src="http://lorempixel.com/630/420/food" alt="..."/></a>
<div class="carousel-caption bg_black-7 text-shadow_black-1 text_center text_left:md font_2:md c_white p_3:lg p-b_4:lg p-y_3 lh_1 b_0 r_0 l_0">
<span class="title font_display block m-b_2 font_4:md m-b_3:md">sint explicabo sequi</span> Earum nihil omnis.
</div>
</div>
</div>
<!-- Controls -->
<a
class="left carousel-control-prev"
href="#carouselExampleFade"
role="button"
data-slide="prev"
>
<i class="fas fa-chevron-left"></i>
<span class="sr-only">Previous</span>
</a>
<a
class="right carousel-control-next"
href="#carouselExampleFade"
role="button"
data-slide="next"
>
<i class="fas fa-chevron-right"></i>
<span class="sr-only">Next</span>
</a>
</div>Code Sample
Source: dist/css/acc_boot.css, line 7281
3.2 Pagination
Source: dist/css/acc_boot.css, line 11929
3.3 Tables
The collection of modifications you can do with tables out of the box from Bootstrap Arches.
Example
Default styling
Tables
Documentation| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
| Class | Heading | Heading |
|---|---|---|
| Default | Cell | Cell |
| Primary | Cell | Cell |
| Secondary | Cell | Cell |
| Success | Cell | Cell |
| alert | Cell | Cell |
| Warning | Cell | Cell |
| Info | Cell | Cell |
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<article class="m-y_3" id="tables"><div class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 bg_white z_3 p-b_3 self_start mt-5 m-b_3 mt-xl-0 mb-xl-2"><h3>Tables</h3><a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.0/content/tables/">Documentation</a></div><div><div class="bd-example"><table class="table table-striped"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div><div class="bd-example"><table class="table table-dark table-borderless"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div><div class="bd-example"><table class="table table-hover"><thead><tr><th scope="col">Class</th><th scope="col">Heading</th><th scope="col">Heading</th></tr></thead><tbody><tr><th scope="row">Default</th><td>Cell</td><td>Cell</td></tr><tr class="table-primary"><th scope="row">Primary</th><td>Cell</td><td>Cell</td></tr><tr class="table-secondary"><th scope="row">Secondary</th><td>Cell</td><td>Cell</td></tr><tr class="table-success"><th scope="row">Success</th><td>Cell</td><td>Cell</td></tr><tr class="table-alert"><th scope="row">alert</th><td>Cell</td><td>Cell</td></tr><tr class="table-warning"><th scope="row">Warning</th><td>Cell</td><td>Cell</td></tr><tr class="table-info"><th scope="row">Info</th><td>Cell</td><td>Cell</td></tr></tbody></table></div><div class="bd-example"><table class="table table-sm table-bordered"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div></div></article>Code Sample
Source: dist/css/acc_boot.css, line 11942
3.4 Forms
Out of the box bootstrap forms.
Example
Default styling
Overview
DocumentationDisabled forms
DocumentationSizing
DocumentationInput group
Documentation@
@example.com
https://example.com/users/
$
.00
With
textarea
Floating labels
DocumentationValidation
Documentation<article class="m-y_3"
id="overview">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
<h3>Overview</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/forms/overview/">Documentation</a>
</div>
<div>
<div class="bd-example">
<form>
<div class="m-b_3"><label
for="exampleInputEmail1"
class="form-label">Email
address</label> <input type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp">
<div id="emailHelp"
class="form-text">We'll never share
your email with anyone else.</div>
</div>
<div class="m-b_3"><label
for="exampleInputPassword1"
class="form-label">Password</label>
<input type="password"
class="form-control"
id="exampleInputPassword1"></div>
<div class="m-b_3 form-check"><input
type="checkbox"
class="form-check-input"
id="exampleCheck1"> <label
class="form-check-label"
for="exampleCheck1">Check me
out</label></div>
<fieldset class="m-b_3">
<legend>Radios buttons</legend>
<div class="form-check"><input
type="radio"
name="radios"
class="form-check-input"
id="exampleRadio1"> <label
class="form-check-label"
for="exampleRadio1">Default
radio</label></div>
<div class="m-b_3 form-check"><input
type="radio"
name="radios"
class="form-check-input"
id="exampleRadio2"> <label
class="form-check-label"
for="exampleRadio2">Another
radio</label></div>
</fieldset>
<div class="m-b_3"><label class="form-label"
for="customFile">Upload</label>
<input type="file"
class="form-control"
id="customFile"></div>
<div class="m-b_3 form-check form-switch">
<input class="form-check-input"
type="checkbox"
id="flexSwitchCheckChecked"
checked> <label
class="form-check-label"
for="flexSwitchCheckChecked">Checked
switch checkbox input</label></div>
<div class="m-b_3"><label for="customRange3"
class="form-label">Example
range</label> <input type="range"
class="form-range"
min="0"
max="5"
step="0.5"
id="customRange3"></div><button
type="submit"
class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</article>
<article class="m-y_3"
id="disabled-forms">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
<h3>Disabled forms</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/forms/overview/#disabled-forms">Documentation</a>
</div>
<div>
<div class="bd-example">
<form>
<fieldset disabled
aria-label="Disabled fieldset example">
<div class="m-b_3"><label
for="disabledTextInput"
class="form-label">Disabled
input</label> <input type="text"
id="disabledTextInput"
class="form-control"
placeholder="Disabled input">
</div>
<div class="m-b_3"><label
for="disabledSelect"
class="form-label">Disabled
select menu</label> <select
id="disabledSelect"
class="form-select">
<option>Disabled select</option>
</select></div>
<div class="m-b_3">
<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>
<fieldset class="m-b_3">
<legend>Disabled radios buttons
</legend>
<div class="form-check"><input
type="radio"
name="radios"
class="form-check-input"
id="disabledRadio1"
disabled> <label
class="form-check-label"
for="disabledRadio1">Disabled
radio</label></div>
<div class="m-b_3 form-check"><input
type="radio"
name="radios"
class="form-check-input"
id="disabledRadio2"
disabled> <label
class="form-check-label"
for="disabledRadio2">Another
radio</label></div>
</fieldset>
<div class="m-b_3"><label
class="form-label"
for="disabledCustomFile">Upload</label>
<input type="file"
class="form-control"
id="disabledCustomFile"
disabled></div>
<div
class="m-b_3 form-check form-switch">
<input class="form-check-input"
type="checkbox"
id="disabledSwitchCheckChecked"
checked
disabled> <label
class="form-check-label"
for="disabledSwitchCheckChecked">Disabled
checked switch checkbox
input</label></div>
<div class="m-b_3"><label
for="disabledRange"
class="form-label">Disabled
range</label> <input
type="range"
class="form-range"
min="0"
max="5"
step="0.5"
id="disabledRange"></div>
<button type="submit"
class="btn btn-primary">Submit</button>
</fieldset>
</form>
</div>
</div>
</article>
<article class="m-y_3"
id="sizing">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
<h3>Sizing</h3><a class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/forms/form-control/#sizing">Documentation</a>
</div>
<div>
<div class="bd-example">
<div class="m-b_3"><input
class="form-control form-control-lg"
type="text"
placeholder=".form-control-lg"
aria-label=".form-control-lg example">
</div>
<div class="m-b_3"><select
class="form-select form-select-lg m-b_3"
aria-label=".form-select-lg example">
<option selected>Open this select menu
</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select></div>
<div class="m-b_3"><input type="file"
class="form-control form-control-lg"
aria-label="Large file input example">
</div>
</div>
<div class="bd-example">
<div class="m-b_3"><input
class="form-control form-control-sm"
type="text"
placeholder=".form-control-sm"
aria-label=".form-control-sm example">
</div>
<div class="m-b_3"><select
class="form-select form-select-sm"
aria-label=".form-select-sm example">
<option selected>Open this select menu
</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select></div>
<div class="m-b_3"><input type="file"
class="form-control form-control-sm"
aria-label="Small file input example">
</div>
</div>
</div>
</article>
<article class="m-y_3"
id="input-group">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
<h3>Input group</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/forms/input-group/">Documentation</a>
</div>
<div>
<div class="bd-example">
<div class="input-group m-b_3"><span
class="input-group-text"
id="basic-addon1">@</span> <input
type="text"
class="form-control"
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1">
</div>
<div class="input-group m-b_3"><input type="text"
class="form-control"
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="basic-addon2">
<span class="input-group-text"
id="basic-addon2">@example.com</span>
</div><label for="basic-url"
class="form-label">Your vanity
URL</label>
<div class="input-group m-b_3"><span
class="input-group-text"
id="basic-addon3">https://example.com/users/</span>
<input type="text"
class="form-control"
id="basic-url"
aria-describedby="basic-addon3">
</div>
<div class="input-group m-b_3"><span
class="input-group-text">$</span>
<input type="text"
class="form-control"
aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</div>
<div class="input-group"><span
class="input-group-text">With
textarea</span> <textarea
class="form-control"
aria-label="With textarea"></textarea>
</div>
</div>
</div>
</article>
<article class="m-y_3"
id="floating-labels">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
<h3>Floating labels</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/forms/floating-labels/">Documentation</a>
</div>
<div>
<div class="bd-example">
<form>
<div class="form-floating m-b_3 input-group-lg"><input
type="email"
class="form-control"
id="floatingInput"
placeholder="name@example.com">
<label for="floatingInput">Email
address</label></div>
<div class="form-floating"><input
type="password"
class="form-control"
id="floatingPassword"
placeholder="Password"> <label
for="floatingPassword">Password</label>
</div>
</form>
</div>
</div>
</article>
<article class="m-y_3"
id="validation">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
<h3>Validation</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/forms/validation/">Documentation</a>
</div>
<div>
<div class="bd-example">
<form class="row g-3">
<div class="col-md-4"><label
for="validationServer01"
class="form-label">First
name</label> <input type="text"
class="form-control is-valid"
id="validationServer01"
value="Mark"
required>
<div class="valid-feedback">Looks good!
</div>
</div>
<div class="col-md-4"><label
for="validationServer02"
class="form-label">Last
name</label> <input type="text"
class="form-control is-valid"
id="validationServer02"
value="Otto"
required>
<div class="valid-feedback">Looks good!
</div>
</div>
<div class="col-md-4"><label
for="validationServerUsername"
class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text"
id="inputGroupPrepend3">@</span>
<input type="text"
class="form-control is-invalid"
id="validationServerUsername"
aria-describedby="inputGroupPrepend3"
required>
<div class="invalid-feedback">Please
choose a username.</div>
</div>
</div>
<div class="col-md-6 input-group-lg"><label
for="validationServer03"
class="form-label">City</label>
<input type="text"
class="form-control is-invalid"
id="validationServer03"
required>
<div class="invalid-feedback">Please
provide a valid city.</div>
</div>
<div class="col-md-3"><label
for="validationServer04"
class="form-label">State</label>
<select class="form-select is-invalid"
id="validationServer04"
required>
<option selected
disabled
value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">Please
select a valid state.</div>
</div>
<div class="col-md-3"><label
for="validationServer05"
class="form-label">Zip</label>
<input type="text"
class="form-control is-invalid"
id="validationServer05"
required>
<div class="invalid-feedback">Please
provide a valid zip.</div>
</div>
<div class="col-12">
<div class="form-check"><input
class="form-check-input is-invalid"
type="checkbox"
value=""
id="invalidCheck3"
required> <label
class="form-check-label"
for="invalidCheck3">Agree to
terms and conditions</label>
<div class="invalid-feedback">You
must agree before submitting.
</div>
</div>
</div>
<div class="col-12"><button
class="btn btn-primary"
type="submit">Submit
form</button></div>
</form>
</div>
</div>
</article>