Content Comparison

<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<style>
.breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-item.active {
  color: #666666;
}
</style>



<div class="card">
			<div class="card-header">Breadcrumbs <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre').toggle()">Toggle Markup</button></div>
			<div class="card-body">
				<form>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
						<div class="col-lg-4">
							<nav aria-label="breadcrumb">
							  <ol class="breadcrumb breadcrumb-sm">
							    <li class="breadcrumb-item"><a class="text-link" href="#">First Level</a></li>
							    <li class="breadcrumb-item"><a class="text-link" href="#">Second Level</a></li>
							    <li class="breadcrumb-item"><a class="text-link" href="#">Third Level</a></li>
							    <li class="breadcrumb-item active" aria-current="page">Current Location</li>
							  </ol>
							</nav>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-sm">
    <li class="breadcrumb-item"><a class="text-link" href="#">First Level</a></li>
    <li class="breadcrumb-item"><a class="text-link" href="#">Second Level</a></li>
    <li class="breadcrumb-item"><a class="text-link" href="#">Third Level</a></li>
    <li class="breadcrumb-item active" aria-current="page">Current Location</li>
  </ol>
</nav></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>