Primary Alert, dismissable

		
<div class="alert bg-hillsboro-warning alert-dismissible fade show" role="alert">
	This is a bootstrap alert, using the "bg-hillsboro-warning" class.
	
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">&times;</span>
	</button>
</div>
		
		

Icons

		
<i class="bi bi-alarm"></i>
<i class="bi bi-bookmark-heart"></i>
<i class="bi bi-calendar"></i>
<i class="bi bi-clock"></i>
<i class="bi bi-controller"></i>
<i class="bi bi-credit-card-2-back"></i>
<i class="bi bi-droplet"></i>
<i class="bi bi-download"></i>
<i class="bi bi-eyedropper"></i>
<i class="bi bi-file-earmark-text"></i>
<i class="bi bi-files"></i>
<i class="bi bi-hand-thumbs-up"></i>
		
		

Basic Form

	
<form>
  <div class="form-row">
	<div class="form-group col-md-6">
	  <label for="inputEmail4">Email</label>
	  <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
	</div>
	<div class="form-group col-md-6">
	  <label for="inputPassword4">Password</label>
	  <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
	</div>
  </div>
  <div class="form-group">
	<label for="inputAddress">Address</label>
	<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
	<label for="inputAddress2">Address 2</label>
	<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
	<div class="form-group col-md-6">
	  <label for="inputCity">City</label>
	  <input type="text" class="form-control" id="inputCity">
	</div>
	<div class="form-group col-md-4">
	  <label for="inputState">State</label>
	  <select id="inputState" class="form-control">
		<option selected>Choose...</option>
		<option>...</option>
	  </select>
	</div>
	<div class="form-group col-md-2">
	  <label for="inputZip">Zip</label>
	  <input type="text" class="form-control" id="inputZip">
	</div>
  </div>
  <div class="form-group">
	<div class="form-check">
	  <input class="form-check-input" type="checkbox" id="gridCheck">
	  <label class="form-check-label" for="gridCheck">
		Check me out
	  </label>
	</div>
  </div>
  <button type="submit" class="btn bg-hillsboro-primary">Register</button>
</form>
	
	

Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

		
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
		
		

More Badges

	
<button type="button" class="btn bg-hillsboro-primary">
  Notifications <span class="badge badge-light">4</span>
</button>	
	
	

Pill Badges

	
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

	

Image Cards

Dan Dias Wears Masks

We can put text here to explain something about the image, or make it even like an employee biography or whatever.

• More stuff here!
• Something compelling here

Google CNN

	
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="images/card.jpg" alt="Card image cap">
  <div class="card-body">
	<h5 class="card-title">Dan Dias Wears Masks</h5>
	<p class="card-text">We can put text here to explain something about the image, or make it even like an employee biography or whatever.</p>
  </div>
  <ul class="list-group list-group-flush">
	<li class="list-group-item">More stuff here!</li>
	<li class="list-group-item">Something compelling here</li>
  </ul>
  <div class="card-body">
	<a href="https://www.google.com" class="card-link">Google</a>
	<a href="https://www.cnn.com" class="card-link">CNN</a>
  </div>
</div>

	

Monopoly Cards

	
<div class="card">
  <h5 class="card-header bg-hillsboro-primary">Featured Article!</h5>
  <div class="card-body">
	<h5 class="card-title">Something something go crazy?</h5>
	<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
	<a href="#" class="btn btn-secondary">Go somewhere cool!</a>
  </div>
</div>	
	
	
	

Accordions

	
<div id="accordion">
  <div class="card">
	<div class="card-header bg-hillsboro-secondary cursor-pointer" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
		Collapsible Group Item #1
	</div>

	<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
	  <div class="card-body">
		Stuff in the first accordion.
	  </div>
	</div>
  </div>
  <div class="card">
	<div class="card-header bg-hillsboro-secondary cursor-pointer" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
		Collapsible Group Item #2
	</div>

	<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
	  <div class="card-body">
		Stuff in the second accordion. 
	  </div>
	</div>
  </div>
</div>	
	
	
	

Modal

	
<button type="button" class="btn bg-hillsboro-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch modal
</button>

<div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" style="display: none;">
  <div class="modal-dialog modal-dialog-centered" role="document">
	<div class="modal-content">
	  <div class="modal-header">
		<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
		<button type="button" class="close" data-dismiss="modal" aria-label="Close">
		  <span aria-hidden="true">×</span>
		</button>
	  </div>
	  <div class="modal-body">
		<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
	  </div>
	  <div class="modal-footer">
		<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
		<button type="button" class="btn btn-primary">Save changes</button>
	  </div>
	</div>
  </div>
</div>	
	
	

Popover Alerts

	
<button type="button" class="btn btn-lg bg-hillsboro-warning" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>