<a href="#">
	<sample>Anchor / Hyperlinked Text.</sample>
</a>

<blockquote class="blockquote">
	<p class="mb-0">
		<sample>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</sample>
	</p>
	<footer class="blockquote-footer">
		Person Name <cite title="Source Media">Source Media</cite>
	</footer>
</blockquote>

<h1>
	<sample>Heading Text</sample>
</h1>

<h2>
	<sample>Heading Text</sample>
</h2>

<h3>
	<sample>Heading Text</sample>
</h3>

<h4>
	<sample>Heading Text</sample>
</h4>

<h5>
	<sample>Heading Text</sample>
</h5>

<h6>
	<sample>Heading Text</sample>
</h6>

<i class="fa" aria-hidden="true"></i>

<ol class="standard">
	<li>
		<sample>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</sample>
	</li>
</ol>

<ul class="standard">
	<li>
		<sample>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</sample>
	</li>
</ul>

<p>
	<sample>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pulvinar sagittis. Proin fermentum dapibus felis non efficitur. Nunc tincidunt libero metus, bibendum suscipit nulla euismod vitae.</sample>
</p>

<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

<button class="btn"><sample>Button</sample></button>

<ul class="nav sub-nav justify-content-center">
	<li class="nav-item">
		<a href="#"><i class="fa fa-globe" aria-hidden="true"></i></a>
		<ul class="nav">
			<li class="nav-item"><a class="nav-link" href="/">English</a></li>
			<li class="nav-item"><a class="nav-link" href="/ja-jp">Japanese</a></li>
			<li class="nav-item"><a class="nav-link" href="/ko-kr">Korean</a></li>
			<li class="nav-item"><a class="nav-link" href="/zh-cn">Chinese</a></li>
		</ul>
	</li>
</ul>

<sample>
	<div style="height:180px"></div>
</sample>

<div class="dropdown ellipsis">
	<button class="btn" type="button" id="dropdownEllipsisBtn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><sample><i class="fa fa-ellipsis-v" aria-hidden="true"></i></sample></button>
	<div class="dropdown-menu" aria-labelledby="dropdownEllipsisBtn">
		<a class="dropdown-item" href="#">Action</a>
		<sample><a class="dropdown-item" href="#">Another action</a>
			<a class="dropdown-item" href="#">Something else here</a></sample>
	</div>
</div>

<sample>
	<div style="height:150px"></div>
	<script type="text/javascript">
		// using "alternative" document.ready listener to compensate for jQuery loading after style guide page is built.
		// use standard ` $(document).ready(function(){ ... }) ` in production code.
		// ` DOMContentLoaded ` is not supported in IE8 or earlier.
		document.addEventListener("DOMContentLoaded", function(event) {
			$('[data-toggle="dropdown"]').on('click', function() {
				$(this).next('.dropdown-menu').toggleClass('show');
			});
		});
	</script>
</sample>

<div class="dropdown localization">
	<a class="dropdown-toggle btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	  <i class="fa fa-globe" aria-hidden="true"></i>
	</a>
	<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
		<a class="dropdown-item" href="/">English</a>
		<a class="dropdown-item" href="/ja-jp">Japanese</a>
		<a class="dropdown-item" href="/ko-kr">Korean</a>
		<a class="dropdown-item" href="/zh-cn">Chinese</a>
	</div>
</div>

<sample>
	<div style="height:170px"></div>
	<script type="text/javascript">
	</script>
</sample>

<div class="dropdown">
	<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><sample>Dropdown button</sample></button>
	<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
		<a class="dropdown-item" href="#">Action</a>
		<sample><a class="dropdown-item" href="#">Another action</a>
			<a class="dropdown-item" href="#">Something else here</a></sample>
	</div>
</div>
<sample>
	<div style="height:150px"></div>
	<script type="text/javascript"></script>
</sample>

<label class="form-check-label">
	<input class="form-check-input" type="checkbox" /> Checkbox Label
</label>

<div class="form-group upload">
	<label for="exampleFormControlFile1">Example file input</label>
	<label class="custom-file">
		<input type="file" class="custom-file-input">
		<span class="custom-file-control"><button class="btn btn-sm">Browse</button></span>
	</label>
	<div class="uploadGroup"></div>
</div>

<sample>
	<script type="text/javascript">
		// using "alternative" document.ready listener to compensate for jQuery loading after style guide page is built.
		// use standard ` $(document).ready(function(){ ... }) ` in production code.
		// ` DOMContentLoaded ` is not supported in IE8 or earlier.
		document.addEventListener("DOMContentLoaded", function(event) {
			$('.custom-file-input').on('change', function() {
				if (this.value === "") {
					return;
				}

				var uploads = $(this).parent().next('.uploadGroup');

				// add file line item
				uploads.append(
					$('<div class="input-group"/>').append(
						$('<input type="text" disabled value="' + this.value + '" />')
					).append(
						$('<button class="btn btn-sm btn-info" purpose="remove">Remove</button>')
					)
				);

				// clear input value
				this.value = "";

				// hide selection field for single upload
				if (!$(this).parents('.upload').hasClass('multi')) {
					$(this).parent('.custom-file').hide();
				}
			});

			$('.uploadGroup').on('click', '[purpose="remove"]', function(e) {
				$(this).parents('.uploadGroup').prev('.custom-file').show();
				$(this).parent('div').remove();
			});
		});
	</script>
</sample>

<form>
	<div class="form-group">
		<label class="form-control-label" for="formGroupExampleInput">Example label</label>
		<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
	</div>
	<div class="form-group">
		<label class="form-control-label" for="formGroupExampleInput2">Another label</label>
		<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
	</div>
</form>

<small class="form-text text-muted"><sample>Help text to assist with filling out forms. Picture me below a form input.</sample></small>

<form class="form-inline">
	<label class="sr-only" for="inlineFormInputName2">Name</label>
	<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInputName2" placeholder="Jane Doe">

	<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
	<div class="input-group mb-2 mr-sm-2 mb-sm-0">
		<div class="input-group-addon">@</div>
		<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
	</div>

	<div class="form-check mb-2 mr-sm-2 mb-sm-0">
		<label class="form-check-label"><input class="form-check-input" type="checkbox"> Remember me</label>
	</div>
	<button type="submit" class="btn btn-primary btn-sm">Submit</button>
</form>

<div class="input-group">
	<input type="text" class="form-control" placeholder="Text">
	<span class="input-group-btn">
		<button class="btn btn-secondary btn-sm" type="button">Action</button>
	</span>
</div>

<label class="control-label"><sample>Label</sample></label>

<section class="listbuilder">
	<label>All Documents</label>
	<section for="all">
		<label><input type="checkbox" value="ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-First-Item-In-This-List-Version-One.DOC" data-modified="January 01, 2017" data-group="ABC"><div><sample>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-First-Item-In-This-List-Version-One.DOC</div></label>
		<label><input type="checkbox" value="ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Second-Item-In-This-List-Version-Two.DOC" data-modified="February 02, 2017" data-group="DEF"><div>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Second-Item-In-This-List-Version-Two.DOC</div></label>
		<label><input type="checkbox" value="ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Third-Item-In-This-List-Version-Three.DOC" data-modified="March 03, 2017" data-group="GHI"><div>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Third-Item-In-This-List-Version-Three.DOC</div></label>
		<label><input type="checkbox" value="ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Fourth-Item-In-This-List-Version-Four.DOC" data-modified="April 04, 2017" data-group="JKL"><div>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Fourth-Item-In-This-List-Version-Four.DOC</div></label>
		<label><input type="checkbox" value="ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Fifth-Item-In-This-List-Version-Five.DOC" data-modified="May 05, 2017" data-group="MNO"><div>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Fifth-Item-In-This-List-Version-Five.DOC</div></label>
		<label><input type="checkbox" value="ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Sixth-Item-In-This-List-Version-Six.DOC" data-modified="June 06, 2017" data-group="PQR"><div>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Sixth-Item-In-This-List-Version-Six.DOC</div></label>
		<label><input type="checkbox" value="ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Seventh-Item-In-This-List-Version-Seven.DOC" data-modified="July 07, 2017" data-group="STU"><div>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Seventh-Item-In-This-List-Version-Seven.DOC</div></label>
		<label><input type="checkbox" value="ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Eighth-Item-In-This-List-Version-Eight.DOC" data-modified="August 08, 2017" data-group="VWX"><div>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Eighth-Item-In-This-List-Version-Eight.DOC</div></label>
		<label><input type="checkbox" value="ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Ninth-Item-In-This-List-Version-Nine.DOC" data-modified="September 09, 2017" data-group="Y&Z"><div>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Ninth-Item-In-This-List-Version-Nine.DOC</div></label>
		<label><input type="checkbox" value="ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Tenth-Item-In-This-List-Version-Ten.DOC" data-modified="October 10, 2017" data-group="123"><div>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Tenth-Item-In-This-List-Version-Ten.DOC</sample></div></label>
	</section>
	<label>Selected Documents</label>
	<section for="selected"></section>
</section>
<sample>
	<script type="text/javascript">
		// using "alternative" document.ready listener to compensate for jQuery loading after style guide page is built.
		// use standard ` $(document).ready(function(){ ... }) ` in production code.
		// ` DOMContentLoaded ` is not supported in IE8 or earlier.
		document.addEventListener("DOMContentLoaded", function(event) {
			var duplicateEvent;
			$('.f-item-preview').on('click', '.listbuilder label', function(e) {
				//prevent event from firing twice.
				if (e.target.tagName !== "INPUT") {
					return;
				}

				var block;

				if ($(this).find('input')[0].checked) {
					// add a block to the 'selected' section
					var input = $(this).find('input');
					var sort = $(this).parents('.listbuilder').hasClass('sort');
					if (sort) {
						var selectedListPosition = 0;
						// count how many previous siblings are :checked
						for (var i = 0; i < $(this).index(); i++) {
							if ($($(this).siblings()[i]).find('input')[0].checked) {
								selectedListPosition++;
							}
						}
					}

					// build the block
					block = $(this).find('div').clone();
					block.addClass('adding');
					block.attr('srcIndex', $(this).index());
					block.html($('<p/>').text(block.text()));
					block.prepend($('<i class="fa fa-times" purpose="removeSelection" />'));
					block.append($('<aside />').append($('<p/>').html('<b>Modified:</b> ' + input.data('modified'))).append($('<p/>').html('<b>Group:</b> ' + input.data('group'))));

					var selectedSection = $(this).parent().siblings('[for="selected"]');
					if (sort && selectedSection.children().length && selectedSection.children().length > selectedListPosition) {
						// put the block in the correct position
						$(selectedSection.children()[selectedListPosition]).before(block);
					} else {
						// put the block at the end
						block.appendTo(selectedSection);
					}

					// animate in
					block.slideDown('fast', function() {
						$(this).removeAttr('class').removeAttr('style');
					});
				} else {
					// remove the block from the 'selected' section
					block = $(this).parent().siblings('[for="selected"]').find("[srcIndex=\"" + $(this).index() + "\"]");
					block.addClass('removing');
					block.slideUp(function() {
						this.remove();
					});
				}
			});
			$('.f-item-preview').on('click', '.listbuilder [for="selected"] div', function(e) {
				if ($(e.target).attr('purpose') === "removeSelection") {
					$($(this).parent().siblings('[for="all"]').children()[$(this).attr('srcIndex')]).find('input').click();
				} else {
					if ($(this).hasClass('expanded')) {
						$(this).removeClass('expanded');
						$(this).find('aside').slideUp('fast');
					} else {
						$(this).addClass('expanded');
						$(this).find('aside').slideDown('fast');
					}
				}
			});
		});
	</script>
</sample>

<label class="form-check-label">
	<input class="form-check-input" type="radio" name="groupName" id="radio1" /> Radio 1
</label>

<label class="form-check-label">
	<input class="form-check-input" type="radio" name="groupName" id="radio2" /> Radio 2
</label>

<label class="form-check-label">
	<input class="form-check-input" type="radio" name="groupName" id="radio3" /> Radio 3
</label>

<select class="custom-select" name="" id="">
	<option value=""><sample>Option 1</option>
	<option value="">Option 2</option>
	<option value="">Option 3</option>
	<option value="">Option 4</option>
	<option value="">Option 5</sample></option>
</select>

<section class="slushbucket">
	<div>
		<label>All Documents</label>
		<select size="10" role="allList" multiple>
		<option><sample>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-First-Item-In-This-List-Version-One.DOC</option>
		<option>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Second-Item-In-This-List-Version-Two.DOC</option>
		<option>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Third-Item-In-This-List-Version-Three.DOC</option>
		<option>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Fourth-Item-In-This-List-Version-Four.DOC</option>
		<option>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Fifth-Item-In-This-List-Version-Five.DOC</option>
		<option>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Sixth-Item-In-This-List-Version-Six.DOC</option>
		<option>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Seventh-Item-In-This-List-Version-Seven.DOC</option>
		<option>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Eighth-Item-In-This-List-Version-Eight.DOC</option>
		<option>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Ninth-Item-In-This-List-Version-Nine.DOC</option>
		<option>ABC/ DEF/ GHI/ Super-Incredibly-Long-File-Name-for-the-Tenth-Item-In-This-List-Version-Ten.DOC</sample></option>
	</select>
	</div>

	<nav class="input-group">
		<button class="btn btn-primary btn-sm" role="add"><span class="stacked nav">Add Document <i class="fa fa-chevron-down"></i></span><i class="fa fa-chevron-right"></i></button>
		<button class="btn btn-sm" role="remove"><span class="stacked nav">Remove Document <i class="fa fa-chevron-up"></i></span></span><i class="fa fa-chevron-left"></i></button>
	</nav>

	<div>
		<label>Selected Documents</label>
		<select size="4" role="userList" multiple></select>
	</div>
</section>
<sample>
	<script type="text/javascript">
		// using "alternative" document.ready listener to compensate for jQuery loading after style guide page is built.
		// use standard ` $(document).ready(function(){ ... }) ` in production code.
		// ` DOMContentLoaded ` is not supported in IE8 or earlier.
		document.addEventListener("DOMContentLoaded", function(event) {
			$('.f-item-preview').on('click', '.slushbucket button', function(e) {
				var allList = $(this).parent().prev('div').find('[role="allList"]'),
					userList = $(this).parent().next('div').find('[role="userList"]');
				var selectedRows, srcRow;

				if ($(e.target).attr('role') === "add" || $(e.target).parents('button').attr('role') === "add") {
					if (allList[0].selectedIndex === -1) {
						return;
					}
					selectedRows = getSelectValues(allList[0]);
					// copy selected options to userList
					// mark options that have been moved
					for (var row in selectedRows) {
						userList.append($(selectedRows[row]).clone().attr('srcIndex', row));
						$(selectedRows[row]).after($('<span class="selected"/>').append($(selectedRows[row]).clone()));
						$(selectedRows[row]).remove();
					}
				} else {
					if (userList[0].selectedIndex === -1) {
						return;
					}
					selectedRows = getSelectValues(userList[0]);
					var allOptions = allList.find('> *');
					// un-mark options that have been removed
					// remove selected options from userList
					for (var row in selectedRows) {
						srcRow = $(selectedRows[row]).attr('srcIndex');

						$(allOptions[srcRow]).after($(allOptions[srcRow]).children());
						$(selectedRows[row]).remove();
						$(allOptions[srcRow]).remove();
					}
				}
			});

		});

		function getSelectValues(bucket) {
			var result = {};
			var options = bucket && $(bucket).children();

			for (var i = 0; i < options.length; i++) {
				if (options[i].selected) {
					result[i] = options[i];
				}
			}
			return result;
		}
	</script>
</sample>

<textarea class="form-control" name="" cols="30" rows="10"></textarea>

<input class="form-control" type="text" placeholder="Placeholder text" />

<a class="chip" tabindex="<sample></sample>">
	<sample>New Chip</sample>
	<i class="fa fa-times-circle" aria-hidden="true"></i>
</a>
<span class="add-chip"></span>
<sample>
	<script type="text/javascript">
		// using "alternative" document.ready listener to compensate for jQuery loading after style guide page is built.
		// use standard ` $(document).ready(function(){ ... }) ` in production code.
		// ` DOMContentLoaded ` is not supported in IE8 or earlier.
		document.addEventListener("DOMContentLoaded", function(event) {

			$('.f-item-preview').on('click', '.chip', function() {
				$(this).siblings().removeClass('active');
				$(this).addClass('active');
			});
			$('.f-item-preview').on('click', '.chip i', function() {
				$(this).parent().remove();
			});
			$('.f-item-preview').on('click', '.add-chip', function() {
				$(this).siblings('.chip:last-of-type').after($(this).siblings('.chip:last-of-type').clone());
				$(this).siblings('.chip:last-of-type').click();
			});
		});
	</script>
</sample>

<sample>
	<style>
		.relative-container {
			position: relative;
			width: 100%;
		}

		.relative-container .loading {
			position: absolute;
		}
	</style>
</sample>
<div class="relative-container">
	<div class="loading align-items-center justify-content-center">
		<img src="https://www.bluetooth.com/resources/images/loader.svg">
		<h3>Loading</h3>
	</div>
	<h2>
		<sample>Example content beneath loading</sample>
	</h2>
	<p>
		<sample>Lorem ipsum dolor amet lyft shabby chic you probably haven't heard of them, ramps distillery messenger bag normcore letterpress neutra everyday carry. Wolf pug salvia, taxidermy four dollar toast adaptogen green juice knausgaard succulents slow-carb
			bespoke cardigan banh mi pitchfork. Skateboard pinterest salvia YOLO. Jianbing messenger bag crucifix food truck meditation letterpress 8-bit raw denim bushwick snackwave twee four dollar toast waistcoat pug. Authentic copper mug vexillologist, quinoa
			DIY raw denim cred single-origin coffee yuccie. Shabby chic tilde put a bird on it flexitarian poutine chambray cornhole taxidermy fam bushwick distillery four loko.</sample>
	</p>
	<p>
		<sample>Enamel pin cloud bread craft beer, irony sartorial microdosing yuccie mustache unicorn. Small batch brunch distillery, vinyl man bun marfa try-hard kitsch tumblr poutine air plant pop-up. Ethical street art food truck chillwave copper mug coloring book
			edison bulb lomo tbh glossier banjo everyday carry four dollar toast hella. Hoodie chicharrones before they sold out, quinoa schlitz plaid jean shorts portland raw denim typewriter trust fund try-hard stumptown. Chicharrones gluten-free copper mug
			celiac, bushwick trust fund four dollar toast. Fam drinking vinegar four dollar toast, street art franzen coloring book man braid single-origin coffee pour-over mumblecore narwhal small batch austin venmo 3 wolf moon. Biodiesel seitan mustache unicorn
			paleo chartreuse.</sample>
	</p>
</div>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<a class="navbar-brand" href="https://www.bluetooth.com"><img src="https://apps.bluetooth.com/images/smallLogo.gif"></a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

	<div class="collapse navbar-collapse" id="navbarSupportedContent">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item active">
				<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Link</a>
			</li>
			<li class="nav-item">
				<a class="nav-link disabled" href="#">Disabled</a>
			</li>
		</ul>
	</div>
</nav>

<ol class="breadcrumb">
	<li class="breadcrumb-item"><a href="#">Home</a></li>
	<li class="breadcrumb-item"><a href="#">Library</a></li>
	<li class="breadcrumb-item active">Data</li>
</ol>

<nav class="nav nav-pills nav-fill">
	<a class="nav-item nav-link active" href="#">Active</a>
	<a class="nav-item nav-link" href="#">Link</a>
	<sample><a class="nav-item nav-link" href="#">Link</a></sample>
	<a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>

<ul class="list-group">
	<li class="list-group-item">
		<sample>Cras justo odio</sample>
	</li>
	<sample>
		<li class="list-group-item">Dapibus ac facilisis in</li>
		<li class="list-group-item">Morbi leo risus</li>
		<li class="list-group-item">Porta ac consectetur ac</li>
		<li class="list-group-item">Vestibulum at eros</li>
	</sample>
</ul>

<nav aria-label="Page navigation example">
	<div class="pull-left">
		<p>Showing <strong>1 to 10</strong> of <strong>20</strong> entries</p>
	</div>
	<div class="col-sm-4">

	</div>
	<ul class="pagination pull-right">
		<li class="page-item"><a class="page-link" href="#">Previous</a></li>
		<li class="page-item active"><a class="page-link" href="#">1</a></li>
		<li class="page-item"><a class="page-link" href="#">2</a></li>
		<li class="page-item"><a class="page-link" href="#">3</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul>
</nav>

<nav class="container progress-numbers">
	<ol class="nav nav-pills">
		<li class="nav-item completed">
			<a class="nav-link" href="#">Completed</a>
		</li>
		<li class="nav-item active">
			<a class="nav-link" href="#">Active</a>
		</li>
		<li class="nav-item">
			<a class="nav-link disabled" href="#">Disabled Next Step</a>
		</li>
		<li class="nav-item">
			<a class="nav-link disabled" href="#">Disabled Next Step</a>
		</li>
		<li class="nav-item">
			<a class="nav-link disabled" href="#">Disabled Next Step</a>
		</li>
		<li class="nav-item">
			<a class="nav-link disabled" href="#">Disabled Next Step</a>
		</li>
	</ol>
</nav>

<ul class="nav nav-tabs" role="tablist">
	<li class="nav-item">
		<a class="nav-link active" data-toggle="tab" role="tab" href="#one">Active</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" data-toggle="tab" role="tab" href="#two">Link</a>
	</li>
	<li class="nav-item">
		<a class="nav-link disabled" data-toggle="tab" role="tab" href="#three">Disabled</a>
	</li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
	<div class="tab-pane active" id="one" role="tabpanel">
		<sample>
			<h3>Some Great Sample Content</h3>
			<p>You have to see it to believe it</p>
		</sample>
	</div>
	<div class="tab-pane" id="two" role="tabpanel">...</div>
	<div class="tab-pane" id="three" role="tabpanel">...</div>
</div>
<sample>
	<script type="text/javascript">
		// using "alternative" document.ready listener to compensate for jQuery loading after style guide page is built.
		// use standard ` $(document).ready(function(){ ... }) ` in production code.
		// ` DOMContentLoaded ` is not supported in IE8 or earlier.

		document.addEventListener("DOMContentLoaded", function(event) {

			$('.f-item-preview').on('click', '.nav-tabs a:not(.disabled)', function(e) {
				e.preventDefault()
				var selectedTab = this.getAttribute('href'),
					tabs = $(this).parents('.nav-tabs').next().children();

				$(this).parents('.nav-tabs').find('a').removeClass('active');
				$(this).addClass('active');

				tabs.removeClass('active');
				tabs.each(function(i, tab) {
					if (tab === $(selectedTab)[0]) {
						$(tab).addClass('active');
					}
				});

			});
		});
	</script>
</sample>

<ul class="tree">
	<li><a href="#">Level One</a>
		<ul>
			<li><a href="#">Level Two</a>
				<ul>
					<li><a href="#">Level Three</a>
						<ul>
							<li><a href="#" class="active">Level Four (active)</a>
								<ul>
									<li><a href="#">Level Five - 1</a></li>
									<li><a href="#">Level Five - 2</a></li>
									<li><a href="#">Level Five - 3</a></li>
									<li><a href="#">Level Five - 4</a></li>
									<li><a href="#">Level Five - 5</a></li>
									<li><a href="#">Level Five - 6</a></li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

<nav class="nav flex-column">
	<a class="nav-link active" href="#">Active</a>
	<a class="nav-link" href="#">Link</a>
	<sample><a class="nav-link" href="#">Link</a></sample>
	<a class="nav-link disabled" href="#">Disabled</a>
</nav>

<div class="alert alert-warning alert-dismissible fade show" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
	<strong>Holy guacamole!</strong>
	<sample>You should check in on some of those fields below.</sample>
</div>
<sample>
	<!-- trick reset button into affecting this component -->
	<script type="text/javascript"></script>
</sample>

<div class="alert" role="alert">
	<sample>This is the base alert style—check it out!</sample>
</div>

<span class="badge">New</span>

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

<img src="https://www.bluetooth.com/~/media/images/news-events/ledsmeshnews071817.ashx" class="img-fluid" alt="Responsive image" />

<table class="table table-hover">
	<thead>
		<tr role="row">
			<th>Column Title</th>
			<th>Column Title</th>
			<th>Column Title</th>
		</tr>
	</thead>
	<tbody>
		<tr class="odd" id="trReview_145d5ad0-00a1-4cea-aeb6-c3da57cd7445" role="row">
			<td>
				<sample>GATT Caching Improvements [08]</sample>
			</td>
			<td>
				<sample>Core</sample>
			</td>
			<td>
				<sample>FIPD</sample>
			</td>
		</tr>
		<tr class="taskTable">
			<td class="taskTable" colspan="3">
				<table class="nestedTaskTable dataTable no-footer" role="grid">
					<thead>
						<tr role="row">
							<th>Nested Title</th>
							<th>Nested Title</th>
						</tr>
					</thead>
					<tbody>
						<tr class="odd" role="row">
							<td>
								<sample>Peter Hecke (Bluetooth SIG, Inc.)</sample>
							</td>
							<td>
								<sample>Not Started</sample>
							</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
		<sample>
			<tr class="even" role="row">
				<td>
					<a>Beacons for Mesh Channel Indication [01]</a>
				</td>
				<td>Core</td>
				<td>FRD</td>
			</tr>
			<tr class="odd" id="trReview_4d428ea2-ca1d-470c-b948-8bd49dcd46fa" role="row">
				<td>
					<a>Enhancement of Message Forward Feature [01]</a>
				</td>
				<td>NWP</td>
				<td>NWP</td>
			</tr>
		</sample>
	</tbody>
</table>
<sample>
	<!-- temporary styles until official ones are determined 9/21/17 -->
	<style type="text/css">
		.table .odd {
			background-color: #f5f5f5;
		}

		.taskTable {
			border-bottom: 2px solid #ccc;
		}

		.taskTable:hover {
			background-color: initial !important;
		}

		.taskTable td {
			border-top: none;
		}

		.nestedTaskTable.dataTable {
			width: 100%;
			font-size: 12px;
		}

		.nestedTaskTable.dataTable tr {
			background-color: transparent !important;
		}

		.nestedTaskTable.dataTable th {
			border-top: none;
		}
	</style>
</sample>

<table class="table">
	<thead>
		<tr>
			<th>
				<sample>Table Heading 1</th>
			<th>Table Heading 2</th>
			<th>Table Heading 3</sample>
			</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>
				<sample>Table Footer 1</th>
			<th>Table Footer 2</th>
			<th>Table Footer 3</sample>
			</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>
				<sample>Table Cell 1</td>
			<td>Table Cell 2</td>
			<td>Table Cell 3</sample>
			</td>
		</tr>
		<tr>
			<td>
				<sample>Table Cell 1</td>
			<td>Table Cell 2</td>
			<td>Table Cell 3</sample>
			</td>
		</tr>
	</tbody>
</table>

<div class="card">
	<div class="card-header" role="tab" id="heading-[object Object]">
		<h4 class="mb-0">
			<a data-toggle="collapse" href="#collapse-[object Object]" aria-expanded="true" aria-controls="collapse-[object Object]">Collapsible Group Item #[object Object]</a>
		</h4>
	</div>

	<div id="collapse-[object Object]" class="collapse show" role="tabpanel" aria-labelledby="heading-[object Object]" data-parent=".accordion">
		<div class="card-body">
			<p>
				<sample>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pulvinar sagittis. Proin fermentum dapibus felis non efficitur. Nunc tincidunt libero metus, bibendum suscipit nulla euismod vitae.</sample>
			</p>
			<a href="#">
				<sample>Anchor / Hyperlinked Text.</sample>
			</a>
		</div>
	</div>
</div>

<div class="accordion" role="tablist">
	<div class="card">
		<div class="card-header" role="tab" id="heading-0">
			<h4 class="mb-0">
				<a data-toggle="collapse" href="#collapse-0" aria-expanded="true" aria-controls="collapse-0">Collapsible Group Item #0</a>
			</h4>
		</div>

		<div id="collapse-0" class="collapse show" role="tabpanel" aria-labelledby="heading-0" data-parent=".accordion">
			<div class="card-body">
				<p>
					<sample>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pulvinar sagittis. Proin fermentum dapibus felis non efficitur. Nunc tincidunt libero metus, bibendum suscipit nulla euismod vitae.</sample>
				</p>
				<a href="#">
					<sample>Anchor / Hyperlinked Text.</sample>
				</a>
			</div>
		</div>
	</div>
	<div class="card">
		<div class="card-header" role="tab" id="heading-1">
			<h4 class="mb-0">
				<a data-toggle="collapse" href="#collapse-1" aria-expanded="true" aria-controls="collapse-1">Collapsible Group Item #1</a>
			</h4>
		</div>

		<div id="collapse-1" class="collapse show" role="tabpanel" aria-labelledby="heading-1" data-parent=".accordion">
			<div class="card-body">
				<p>
					<sample>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pulvinar sagittis. Proin fermentum dapibus felis non efficitur. Nunc tincidunt libero metus, bibendum suscipit nulla euismod vitae.</sample>
				</p>
				<a href="#">
					<sample>Anchor / Hyperlinked Text.</sample>
				</a>
			</div>
		</div>
	</div>
	<div class="card">
		<div class="card-header" role="tab" id="heading-2">
			<h4 class="mb-0">
				<a data-toggle="collapse" href="#collapse-2" aria-expanded="true" aria-controls="collapse-2">Collapsible Group Item #2</a>
			</h4>
		</div>

		<div id="collapse-2" class="collapse show" role="tabpanel" aria-labelledby="heading-2" data-parent=".accordion">
			<div class="card-body">
				<p>
					<sample>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pulvinar sagittis. Proin fermentum dapibus felis non efficitur. Nunc tincidunt libero metus, bibendum suscipit nulla euismod vitae.</sample>
				</p>
				<a href="#">
					<sample>Anchor / Hyperlinked Text.</sample>
				</a>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	// using "alternative" document.ready listener to compensate for jQuery loading after style guide page is built.
	// use standard ` $(document).ready(function(){ ... }) ` in production code.
	// ` DOMContentLoaded ` is not supported in IE8 or earlier.
	document.addEventListener("DOMContentLoaded", function(event) {

		$('.f-item-preview').find('.accordion [role="tabpanel"]').collapse();

		/* ENABLES CLICKING ANYWHERE ON TAB HEADER TO TRIGGER COLLAPSE-TOGGLE */
		$('.f-item-preview').on('click', '.accordion [role="tab"]', function() {
			// toggles + / - on tab header
			$(this).parent().siblings().find('[role="tab"]').removeClass('open');
			if ($(this).next().hasClass('collapsing')) {
				return;
			} else if ($(this).next().hasClass('show')) {
				$(this).removeClass('open');
			} else {
				$(this).addClass('open');
			}

			$(this).next('[role="tabpanel"]').collapse('toggle');
		});
	});
</script>

<div class="col-xl-3 col-md-4 col-sm-6">
	<div class="card">
		<img class="card-img-top" src="https://www.bluetooth.com/~/media/images/news-events/ledsmeshnews071817.ashx" alt="Card image cap">
		<div class="card-body">
			<h4 class="card-title">Card title</h4>
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
			<a href="#" class="btn btn-primary">Go somewhere</a>
		</div>
	</div>
</div>

<div class="col-xl-3 col-md-4 col-sm-6">
	<div class="card">
		<header class="card-header">
			Featured
		</header>
		<div class="card-body">
			<h4 class="card-title">Special title treatment</h4>
			<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
			<a href="#" class="btn btn-primary">Go somewhere</a>
		</div>
	</div>
</div>

<div class="col-sm-6">
	<div class="card">
		<header class="card-header with-arrow">
			<i class="fa fa-check-circle fa-2x text-primary pull-left" aria-hidden="true"></i>&nbsp;&nbsp;
			<h5 class="card-title pull-left">Longish Title For Training Module</h5>
			<button type="button" class="close" aria-label="Close">
		  <span aria-hidden="true">&times;</span>
		</button>
		</header>
		<div class="card-body">
			<h4 class="card-title">Special title treatment</h4>
			<p>
				<sample>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pulvinar sagittis. Proin fermentum dapibus felis non efficitur. Nunc tincidunt libero metus, bibendum suscipit nulla euismod vitae.</sample>
			</p>
			<p>
				<sample>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pulvinar sagittis. Proin fermentum dapibus felis non efficitur. Nunc tincidunt libero metus, bibendum suscipit nulla euismod vitae.</sample>
			</p>
		</div>
		<footer class="card-footer">
			<div class="row">
				<div class="col-sm-8">
					<div class="card-breadcrumb">
						<ul class="nav">
							<li class="nav-item">
								<h5 class="card-breadcrumb-title">Breadcrumb Title</h5>
							</li>
							<li class="nav-item small">
								<a class="nav-link active" href="#"></a>
							</li>
							<li class="nav-item small">
								<a class="nav-link" href="#"></a>
							</li>
							<li class="nav-item small">
								<a class="nav-link" href="#"></a>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-sm-4 text-right">
					<button type="button" class="btn btn-secondary btn-sm">Back</button>
					<button type="button" class="btn btn-primary btn-sm">Next</button>
				</div>
			</div>
		</footer>
	</div>
</div>

<footer class="container-fluid col-sm-10">
	<div class="row">
		<div class="col-sm-12 small">
			<p>© 2017 Bluetooth SIG, Inc. All rights reserved.</p>
			<nav>
				<ul class="nav">
					<li><a class="nav-link" href="https://www.bluetooth.com/privacy">Privacy</a></li>
					<li><a class="nav-link" href="https://www.bluetooth.com/terms-of-use">Terms Of Use</a></li>
					<li><a class="nav-link" href="https://www.bluetooth.com/user-code-of-conduct">Code Of Conduct</a></li>
					<li><a class="nav-link" href="https://www.bluetooth.com/copyright-policy">Copyright Policy</a></li>
					<li><a class="nav-link" href="https://www.bluetooth.com/sig-policies">SIG Policies and Rules</a></li>
				</ul>
			</nav>
		</div>
	</div>
</footer>

<header class="container-fluid col-sm-10">
	<div class="row">
		<div class="col-sm-6 header-logo">
			<!-- if the website is down will we be able to to reference the logo stored on .com? -->
			<a href="https://www.bluetooth.com"><img src="https://www.bluetooth.com/~/media/images/logos/logo.ashx"></a>
		</div>
		<div class="col-sm-6 text-right">
			<div class="dropdown localization">
				<a class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fa fa-globe" aria-hidden="true"></i>
        </a>
				<!-- not sure what the links would be for the login page localized versions -->
				<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
					<a class="dropdown-item" href="/">English</a>
					<a class="dropdown-item" href="/ja-jp">Japanese</a>
					<a class="dropdown-item" href="/ko-kr">Korean</a>
					<a class="dropdown-item" href="/zh-cn">Chinese</a>
				</div>
			</div>
		</div>
	</div>
</header>
<sample>
	<div style="height:170px"></div>
</sample>

<sample>
	<style>
		.row {
			margin: 0;
		}
	</style>
</sample>
<section class="container-fluid col-sm-10">
	<div class="row justify-content-center">
		<div class="col-sm-10 col-md-6 login-container">
			<h1>
				<sample>Log In</sample>
			</h1>
			<form id="loginForm">
				<div class="form-group">
					<label for="inputuser"><sample>Username:</sample></label>
					<input class="form-control" id="inputuser" type="username">
				</div>
				<div class="form-group">
					<label for="inputPassword"><sample>Password:</sample></label>
					<input class="form-control" id="inputPassword" type="password">
				</div>
				<div class="form-check">
					<label class="form-check-label" for="rememberMe">
            <input type="checkbox" class="form-check-input" id="rememberMe">
            <sample>Remember Me</sample>
          </label>
				</div>
				<p>
					<button type="button" class="btn btn-primary btn-block"><sample>Log In</sample></button>
				</p>
				<p class="small">
					<sample><a href="#">Forgot username or password</a></sample>
				</p>
				<p>
					<button type="button" class="btn btn-secondary btn-block"><sample>Not a Member? Join the SIG for Free</sample></button>
				</p>
				<p class="small">
					<sample><a href="#">Is your company already a member? Create a User Account.</a></sample>
				</p>
			</form>
		</div>
	</div>
</section>

<sample>
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<header class="modal-header">
				<h5 class="modal-title">Modal title</h5>
				<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			</header>
			<div class="modal-body">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pulvinar sagittis. Proin fermentum dapibus felis non efficitur. Nunc tincidunt libero metus, bibendum suscipit nulla euismod vitae.</p>
			</div>
			<footer class="modal-footer">
				<button class="btn btn-primary">Primary Button</button>
				<button class="btn btn-secondary">Secondary Button</button>
			</footer>
		</div>
	</div>
</sample>
<!-- Button trigger modal -->

<button type="button" class="btn f-ui-btn" data-toggle="modal" data-target="#exampleModal">Launch demo modal - large</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
				<button type="button" class="close bg-black text-white" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
			</div>
			<div class="modal-body">
				<p>
					<sample>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pulvinar sagittis. Proin fermentum dapibus felis non efficitur. Nunc tincidunt libero metus, bibendum suscipit nulla euismod vitae.</sample>
				</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary">Save changes</button>
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>
<sample>
	<script type="text/javascript">
		// using "alternative" document.ready listener to compensate for jQuery loading after style guide page is built.
		// use standard ` $(document).ready(function(){ ... }) ` in production code.
		// ` DOMContentLoaded ` is not supported in IE8 or earlier.
		document.addEventListener("DOMContentLoaded", function(event) {
			// Make sure the button data-target matches the ID of the modal you want to trigger.
			// Data-Target should start with a #

			// None of this javascript should be necessary outside of the `Fabricator` environment.
			// Please follow the bootstrap instructions instead of reusing this code.
			// https://getbootstrap.com/docs/4.0/components/modal/

			$('[data-toggle="modal"]').click(function() {
				$('body').addClass('modal-open').find('.modal').append($('<div class="modal-backdrop fade show"/>'));
				var modal = $(this).data('target');
				window.setTimeout(function() {
					$(modal).addClass('show');
				}, 100);

				// Add listeners to close modal
				$('[data-dismiss="modal"], .modal-backdrop').on('click', function() {
					$('.modal').removeClass('show');
					$('.modal-backdrop').remove();
					$('body').removeClass('modal-open');
				});
			});
		});
	</script>
</sample>

<sample>
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<header class="modal-header">
				<h5 class="modal-title">Modal title</h5>
				<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			</header>
			<div class="modal-body">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pulvinar sagittis. Proin fermentum dapibus felis non efficitur. Nunc tincidunt libero metus, bibendum suscipit nulla euismod vitae.</p>
			</div>
			<footer class="modal-footer">
				<button class="btn btn-primary">Primary Button</button>
				<button class="btn btn-secondary">Secondary Button</button>
			</footer>
		</div>
	</div>
</sample>
<!-- Button trigger modal -->

<button type="button" class="btn f-ui-btn" data-toggle="modal" data-target="#exampleModal">Launch demo modal</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
			</div>
			<div class="modal-body">
				<p>
					<sample>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus pulvinar sagittis. Proin fermentum dapibus felis non efficitur. Nunc tincidunt libero metus, bibendum suscipit nulla euismod vitae.</sample>
				</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary">Save changes</button>
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>
<sample>
	<script type="text/javascript">
		// using "alternative" document.ready listener to compensate for jQuery loading after style guide page is built.
		// use standard ` $(document).ready(function(){ ... }) ` in production code.
		// ` DOMContentLoaded ` is not supported in IE8 or earlier.
		document.addEventListener("DOMContentLoaded", function(event) {
			// Make sure the button data-target matches the ID of the modal you want to trigger.
			// Data-Target should start with a #

			// None of this javascript should be necessary outside of the `Fabricator` environment.
			// Please follow the bootstrap instructions instead of reusing this code.
			// https://getbootstrap.com/docs/4.0/components/modal/

			$('[data-toggle="modal"]').click(function() {
				$('body').addClass('modal-open').find('.modal').append($('<div class="modal-backdrop fade show"/>'));
				var modal = $(this).data('target');
				window.setTimeout(function() {
					$(modal).addClass('show');
				}, 100);

				// Add listeners to close modal
				$('[data-dismiss="modal"], .modal-backdrop').on('click', function() {
					$('.modal').removeClass('show');
					$('.modal-backdrop').remove();
					$('body').removeClass('modal-open');
				});
			});
		});
	</script>
</sample>