Skip to main content Disability Resources

Button Editing

Accordion

ONE CONTENT

TWO CONTENT

THREE CONTENT


Accordion Code




<div class="accordion" id="accordionSet"><!-- START ONE -->
<div class="card">
<div class="card-header" id="headingOne">
<p class="mb-0"><a aria-controls="collapseOne" aria-expanded="true" data-target="#collapseOne" data-toggle="collapse">ONE LINK</a></p>
</div>
<div aria-labelledby="headingOne" class="collapse" data-parent="#accordionSet" id="collapseOne">
<div class="card-body">
<p>ONE CONTENT</p>
</div>
</div>
</div>
<!-- CLOSE ONE --> <!-- START TWO -->
<div class="card">
<div class="card-header" id="headingTwo">
<p class="mb-0"><a aria-controls="collapseTwo" aria-expanded="true" data-target="#collapseTwo" data-toggle="collapse">TWO LINK</a></p>
</div>
<div aria-labelledby="headingTwo" class="collapse" data-parent="#accordionSet" id="collapseTwo">
<div class="card-body">
<p>TWO CONTENT</p>
</div>
</div>
</div>
<!-- CLOSE TWO --> <!-- START THREE -->
<div class="card">
<div class="card-header" id="headingThree">
<p class="mb-0"><a aria-controls="collapseThree" aria-expanded="true" data-target="#collapseThree" data-toggle="collapse">THREE LINK</a></p>
</div>
<div aria-labelledby="headingThree" class="collapse" data-parent="#accordionSet" id="collapseThree">
<div class="card-body">
<p>THREE CONTENT</p>
</div>
</div>
</div>
<!-- CLOSE THREE --></div>
<!-- CLOSE ACCORDIAN -->




Sample Tabbed Navigation

This is the content for Tab 1 his is the content for Tab 1 his is the content for Tab 1 his is the content for Tab 1 his is the content for Tab 1 his is the content for Tab 1 his is the content for Tab 1 his is the content for Tab 1 his is the content for Tab 1 his is the content for Tab 1 his is the content for Tab 1

Words for this one words for this one words for this one words for this one words for this one words for this one words for this one words for this one words for this one words for this one words for this one words for this one words for this one words for this one

111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333


Code for tabbed navs

remove the spaces in the tags
THIS IS THE NAV TABS SECTION < ul class="nav nav-tabs" id="myTab" role="tablist" > < li class="nav-item">< a aria-controls="home" aria-selected="true" class="nav-link active" data-toggle="tab" href="#home" id="home-tab" role="tab">Home< /a>< /li> < li class="nav-item">< a aria-controls="profile" aria-selected="false" class="nav-link" data-toggle="tab" href="#profile" id="profile-tab" role="tab">Profile< /a>< /li> < li class="nav-item">< a aria-controls="contact" aria-selected="false" class="nav-link" data-toggle="tab" href="#contact" id="contact-tab" role="tab">Contact< /a>< /li> < /ul> THIS IS THE CONTENT SECTION < div class="tab-content" id="myTabContent"> < div aria-labelledby="home-tab" class="tab-pane fade show active" id="home" role="tabpanel">this is tab 1< /div> < div aria-labelledby="profile-tab" class="tab-pane fade" id="profile" role="tabpanel">this is tab 2< /div> < div aria-labelledby="contact-tab" class="tab-pane fade" id="contact" role="tabpanel">this is tab 3< /div> </div >

Buttons / Anchor links

These two "primary|secondary" are the two anchor / button classes to use for most buttons / links

Primary

< a class="btn btn-primary" href="#">Primary< /a>

Secondary

< a class="btn btn-secondary" href="#">Secondary< /a>

btn btn-success

btn btn-danger

btn btn-warning

btn btn-info

btn btn-light

btn btn-dark

btn btn-link