Components

Shadowed Accordion

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

<!--
	Available classes:
		.shadow
		.shadow-xs
		.shadow-sm
		.shadow-md
		.shadow-lg
		.shadow-xlg
-->
<div class="accordion" id="accordionShadow">

	<div class="card shadow-md b-0 mb-2">
		<div class="card-header mb-0 p-0 b-0 bg-transparent" id="cleanHeadingOne">
			<h2 class="mb-0">
				<button class="btn btn-link btn-block btn-lg text-align-start text-decoration-none text-dark" type="button" data-toggle="collapse" data-target="#shadowCollapseOne" aria-expanded="true" aria-controls="shadowCollapseOne">
					Collapsible Group Item #1
					<span class="group-icon float-end">
						<i class="fi fi-arrow-start-slim"></i>
						<i class="fi fi-arrow-down-slim"></i>
					</span>
				</button>
			</h2>
		</div>

		<div id="shadowCollapseOne" class="collapse show" aria-labelledby="cleanHeadingOne" data-parent="#accordionShadow">
			<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 shadow-md b-0 mb-2">
		<div class="card-header mb-0 p-0 b-0 bg-transparent" id="cleanHeadingTwo">
			<h2 class="mb-0">
				<button class="btn btn-link btn-block btn-lg text-align-start text-decoration-none text-dark collapsed" type="button" data-toggle="collapse" data-target="#shadowCollapseTwo" aria-expanded="false" aria-controls="shadowCollapseTwo">
					Collapsible Group Item #2
					<span class="group-icon float-end">
						<i class="fi fi-arrow-start-slim"></i>
						<i class="fi fi-arrow-down-slim"></i>
					</span>
				</button>
			</h2>
		</div>

		<div id="shadowCollapseTwo" class="collapse" aria-labelledby="cleanHeadingTwo" data-parent="#accordionShadow">
			<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 shadow-md b-0 mb-2">
		<div class="card-header mb-0 p-0 b-0 bg-transparent" id="cleanHeadingThree">
			<h2 class="mb-0">
				<button class="btn btn-link btn-block btn-lg text-align-start text-decoration-none text-dark collapsed" type="button" data-toggle="collapse" data-target="#shadowCollapseThree" aria-expanded="false" aria-controls="shadowCollapseThree">
					Collapsible Group Item #3
					<span class="group-icon float-end">
						<i class="fi fi-arrow-start-slim"></i>
						<i class="fi fi-arrow-down-slim"></i>
					</span>
				</button>
			</h2>
		</div>

		<div id="shadowCollapseThree" class="collapse" aria-labelledby="cleanHeadingThree" data-parent="#accordionShadow">
			<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>

Bordered Accordion

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

<!--
	
	Browser width classes for .card-header:
		.bw--1
		.bw--2
		.bw--3

-->
<div class="accordion" id="accordionBordered">

	<div class="card b-0 mb-2">
		<div class="card-header bw--3 shadow-xs mb-0 p-0 border bg-transparent" id="headingOne">
			<h2 class="mb-0">
				<button class="btn btn-link btn-block btn-lg text-align-start text-decoration-none text-dark" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
					Collapsible Group Item #1
					<span class="group-icon float-end">
						<i class="fi fi-arrow-start-slim"></i>
						<i class="fi fi-arrow-down-slim"></i>
					</span>
				</button>
			</h2>
		</div>

		<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionBordered">
			<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 b-0 mb-2">
		<div class="card-header bw--3 shadow-xs mb-0 p-0 border bg-transparent" id="headingTwo">
			<h2 class="mb-0">
				<button class="btn btn-link btn-block btn-lg text-align-start text-decoration-none text-dark collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
					Collapsible Group Item #2
					<span class="group-icon float-end">
						<i class="fi fi-arrow-start-slim"></i>
						<i class="fi fi-arrow-down-slim"></i>
					</span>
				</button>
			</h2>
		</div>

		<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionBordered">
			<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 b-0 mb-2">
		<div class="card-header bw--3 shadow-xs mb-0 p-0 border bg-transparent" id="headingThree">
			<h2 class="mb-0">
				<button class="btn btn-link btn-block btn-lg text-align-start text-decoration-none text-dark collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
					Collapsible Group Item #3
					<span class="group-icon float-end">
						<i class="fi fi-arrow-start-slim"></i>
						<i class="fi fi-arrow-down-slim"></i>
					</span>
				</button>
			</h2>
		</div>

		<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionBordered">
			<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>

Side Bordered Accordion

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

<div class="accordion" id="accordionSideBordered">

	<div class="card b-0 mb-2">
		<div class="card-header shadow-xs bt-0 bb-0 br-0 bw--3 p-0 border bg-transparent" id="headingOne">
			<h2 class="mb-0">
				<button class="btn btn-link btn-block btn-lg text-align-start text-decoration-none text-dark" type="button" data-toggle="collapse" data-target="#collapseSideBorderedOne" aria-expanded="true" aria-controls="collapseSideBorderedOne">
					Collapsible Group Item #1
					<span class="group-icon float-end">
						<i class="fi fi-arrow-start-slim"></i>
						<i class="fi fi-arrow-down-slim"></i>
					</span>
				</button>
			</h2>
		</div>

		<div id="collapseSideBorderedOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionSideBordered">
			<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 b-0 mb-2">
		<div class="card-header shadow-xs bt-0 bb-0 br-0 bw--3 p-0 border bg-transparent" id="headingTwo">
			<h2 class="mb-0">
				<button class="btn btn-link btn-block btn-lg text-align-start text-decoration-none text-dark collapsed" type="button" data-toggle="collapse" data-target="#collapseSideBorderedTwo" aria-expanded="false" aria-controls="collapseSideBorderedTwo">
					Collapsible Group Item #2
					<span class="group-icon float-end">
						<i class="fi fi-arrow-start-slim"></i>
						<i class="fi fi-arrow-down-slim"></i>
					</span>
				</button>
			</h2>
		</div>

		<div id="collapseSideBorderedTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSideBordered">
			<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 b-0 mb-2">
		<div class="card-header shadow-xs bt-0 bb-0 br-0 bw--3 p-0 border bg-transparent" id="headingThree">
			<h2 class="mb-0">
				<button class="btn btn-link btn-block btn-lg text-align-start text-decoration-none text-dark collapsed" type="button" data-toggle="collapse" data-target="#collapseSideBorderedThree" aria-expanded="false" aria-controls="collapseSideBorderedThree">
					Collapsible Group Item #3
					<span class="group-icon float-end">
						<i class="fi fi-arrow-start-slim"></i>
						<i class="fi fi-arrow-down-slim"></i>
					</span>
				</button>
			</h2>
		</div>

		<div id="collapseSideBorderedThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionSideBordered">
			<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>

Clean Accordion

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

<div class="accordion" id="accordionClean">

	<div class="card b-0 mb-1">
		<div class="card-header mb-0 p-0 b-0 bg-transparent" id="cleanHeadingOne">
			<h2 class="mb-0">
				<button class="btn btn-link btn-block btn-lg text-align-start text-decoration-none text-dark" type="button" data-toggle="collapse" data-target="#cleanCollapseOne" aria-expanded="true" aria-controls="cleanCollapseOne">
					Collapsible Group Item #1
					<span class="group-icon float-end">
						<i class="fi fi-arrow-start-slim"></i>
						<i class="fi fi-arrow-down-slim"></i>
					</span>
				</button>
			</h2>
		</div>

		<div id="cleanCollapseOne" class="collapse show" aria-labelledby="cleanHeadingOne" data-parent="#accordionClean">
			<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 b-0 mb-1">
		<div class="card-header mb-0 p-0 b-0 bg-transparent" id="cleanHeadingTwo">
			<h2 class="mb-0">
				<button class="btn btn-link btn-block btn-lg text-align-start text-decoration-none text-dark collapsed" type="button" data-toggle="collapse" data-target="#cleanCollapseTwo" aria-expanded="false" aria-controls="cleanCollapseTwo">
					Collapsible Group Item #2
					<span class="group-icon float-end">
						<i class="fi fi-arrow-start-slim"></i>
						<i class="fi fi-arrow-down-slim"></i>
					</span>
				</button>
			</h2>
		</div>

		<div id="cleanCollapseTwo" class="collapse" aria-labelledby="cleanHeadingTwo" data-parent="#accordionClean">
			<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 b-0 mb-1">
		<div class="card-header mb-0 p-0 b-0 bg-transparent" id="cleanHeadingThree">
			<h2 class="mb-0">
				<button class="btn btn-link btn-block btn-lg text-align-start text-decoration-none text-dark collapsed" type="button" data-toggle="collapse" data-target="#cleanCollapseThree" aria-expanded="false" aria-controls="cleanCollapseThree">
					Collapsible Group Item #3
					<span class="group-icon float-end">
						<i class="fi fi-arrow-start-slim"></i>
						<i class="fi fi-arrow-down-slim"></i>
					</span>
				</button>
			</h2>
		</div>

		<div id="cleanCollapseThree" class="collapse" aria-labelledby="cleanHeadingThree" data-parent="#accordionClean">
			<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>

Different Border Accordion

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.

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.

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.

view code 

<!--
	Accordion
-->
<div class="accordion border" id="accordionBottomBorder" data-aos="fade-up" data-aos-delay="250">

	<div class="card border-bottom bl-0 br-0 bt-0">
		<div class="card-header b-0 p-0 border bg-transparent" id="cleanHeadingBorderOne">
			<h2 class="mb-0">
				<button class="fs--18 btn btn-link btn-block btn-lg text-align-start text-decoration-none text-dark" type="button" data-toggle="collapse" data-target="#borderCollapseOne" aria-expanded="true" aria-controls="borderCollapseOne">
					Who am I?
					<span class="group-icon float-end">
						<i class="fi fi-arrow-start-slim"></i>
						<i class="fi fi-arrow-down-slim"></i>
					</span>
				</button>
			</h2>
		</div>

		<div id="borderCollapseOne" class="collapse show" aria-labelledby="cleanHeadingBorderOne" data-parent="#accordionBottomBorder">
			<div class="card-body">
				<p class="lead">
					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.
				</p>
			</div>
		</div>
	</div>

	<div class="card border-bottom bl-0 br-0 bt-0">
		<div class="card-header b-0 p-0 border bg-transparent" id="cleanHeadingBorderTwo">
			<h2 class="mb-0">
				<button class="fs--18 btn btn-link btn-block btn-lg text-align-start text-decoration-none text-dark collapsed" type="button" data-toggle="collapse" data-target="#borderCollapseTwo" aria-expanded="false" aria-controls="borderCollapseTwo">
					How do I started?
					<span class="group-icon float-end">
						<i class="fi fi-arrow-start-slim"></i>
						<i class="fi fi-arrow-down-slim"></i>
					</span>
				</button>
			</h2>
		</div>

		<div id="borderCollapseTwo" class="collapse" aria-labelledby="cleanHeadingBorderTwo" data-parent="#accordionBottomBorder">
			<div class="card-body">
				<p class="lead">
					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.
				</p>
			</div>
		</div>
	</div>

	<div class="card b-0">
		<div class="card-header b-0 p-0 border bg-transparent" id="cleanHeadingBorderThree">
			<h2 class="mb-0">
				<button class="fs--18 btn btn-link btn-block btn-lg text-align-start text-decoration-none text-dark collapsed" type="button" data-toggle="collapse" data-target="#shadowCollapseThree" aria-expanded="false" aria-controls="shadowCollapseThree">
					What keep me running?
					<span class="group-icon float-end">
						<i class="fi fi-arrow-start-slim"></i>
						<i class="fi fi-arrow-down-slim"></i>
					</span>
				</button>
			</h2>
		</div>

		<div id="shadowCollapseThree" class="collapse" aria-labelledby="cleanHeadingBorderThree" data-parent="#accordionBottomBorder">
			<div class="card-body">
				<p class="lead">
					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.
				</p>
			</div>
		</div>
	</div>

</div>
Jump To