testimonial-slider-fullwidth

You've poured your heart into your website copy. This simple text resizer can help ensure that your website visitors can easily read those words.

Tutorial

For detailed instruction's, view Solodev's Resizing Text for ADA Compliance article.

Demo

Try out a working example on JSFiddle.

HTML

The tutorial contains the following basic HTML markup.

<div class="row">
	<div class="container py-3 px-1">
		<div class="col-md-12">
			<p>Join thousands of other explorers that trust the leading Web Experience Platform and launch your next great website. Our
				ground control team of certified consultants are here to back you up 24x7x365.</p>
		</div>
	</div>
</div>
<footer class="px-1 footer bg-inverse text-white">
	<div class="row">
		<div class="container d-md-flex align-items-center">
			<div class="py-3 col-md-6 text-center text-md-left">
				<div class="change-font">
					<span>Text size</span>
					<a class="size p-2 font-size-1" href="#">A</a>
					<a class="size p-2 font-size-2" href="#">A</a>
					<a class="size p-2 font-size-3" href="#">A</a>
				</div>
			</div>
			<div class="py-3 col-md-6 text-center text-md-right">
				<p class="m-0">Web Design Tutorials by
					<a class="text-white" href="https://www.solodev.com/">Solodev CMS</a>
				</p>
			</div>
		</div>
	</div>
</footer>
      

CSS

All required CSS is contained with testimonial-slider-fullwidth.css

JavaScript

All required JS is contained with testimonial-slider-fullwidth.js

External Resources

This tutorial includes the following third party resources.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>