Components

<p>
	<a class="btn btn-primary btn-soft" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
		Link with href
	</a>

	<button class="btn btn-primary btn-soft" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
		Button with data-target
	</button>
</p>

<div class="collapse" id="collapseExample">
	<div class="card card-body">
		Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
	</div>
</div>
									

<p>
	<a class="btn btn-sm btn-success btn-soft" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">
		<span class="group-icon">
			<i class="fi fi-arrow-end-slim"></i>
			<i class="fi fi-arrow-down-slim"></i>
		</span>
		<span>View More</span>
	</a>

	<button class="btn btn-sm btn-danger btn-soft" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
		<span>Button with data-target</span>
		<span class="group-icon">
			<i class="fi fi-arrow-end-slim"></i>
			<i class="fi fi-close"></i>
		</span>
	</button>
</p>

<div class="collapse" id="collapseExample2">
	<div class="card card-body">
		Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
	</div>
</div>
									

<!-- List Type -->
<ul class="list-unstyled m-0">

	<li class="list-item clearfix">
		<i class="fi fi-check text-success float-start"></i>
		John Doe
	</li>
	<li class="list-item clearfix">
		<i class="fi fi-check text-success float-start"></i>
		Mellisa Doe
	</li>
	<li class="list-item clearfix">
		<i class="fi fi-close text-danger float-start"></i>
		Steve Jobischy
	</li>

</ul>

<ul class="list-unstyled m-0 collapse" id="collapseExample3">

	<li class="list-item clearfix">
		<i class="fi fi-close text-danger float-start"></i>
		Peter Gates
	</li>
	<li class="list-item clearfix">
		<i class="fi fi-check text-success float-start"></i>
		Sammy Cool
	</li>
	<li class="list-item clearfix">
		<i class="fi fi-check text-success float-start"></i>
		John The Great
	</li>

</ul>

<a class="text-decoration-none fs--14" data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="false" aria-controls="collapseExample3">
	<span class="group-icon float-start mt--2">
		<i class="fi fi-arrow-down"></i>
		<i class="fi fi-arrow-up"></i>
	</span>
	<span class="group-icon">
		<i>View More (3)</i>
		<i>View Less</i>
	</span>
</a>






<!-- Switch : Checkbox -->
<label class="form-switch form-switch-pill form-switch-primary d-block mb-4">
	<input type="checkbox" value="1" checked="" data-toggle="collapse" data-target="#public_info">
	<i data-on="&#10004;" data-off="&#10005;"></i>
	Public Project
</label>

<div id="public_info" class="collapse show">
	<p class="mb-4 text-muted bg-light p--15 fs--14 rounded">
		<span class="d-block fs--12 font-weight-medium text-primary">PUBLIC PROJECT</span>
		Visible to Stepofweb comunity – a great way to get ideas, feedback and inspire others!
	</p>
</div>