Header HTML

You should just be able to copy this entire section into your page. You'll need to update the things highlighted in red below, like the app name and any links you'll want in the header. 

<!doctype html>
<html lang="en">
	<!-- COH Style Template: v1.0 -->
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css"/>
		<link rel="stylesheet" href="https://apps.hillsboro-oregon.gov/Resources/css/style.css" />
		
		<title>APP NAME GOES HERE</title>
	</head>
	<body>
	<header>
	<nav class="navbar navbar-expand-lg navbar-light bg-white">
		<div class="container">
			<a href="https://www.hillsboro-oregon.gov" class="navbar-brand"><img src="https://apps.hillsboro-oregon.gov/Resources/images/logo.png" id="logo"></a>
			APP NAME GOES HERE
			<button class="navbar-toggler float-right" type="button" data-toggle="collapse" data-target="#main-navbar">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="main-navbar">
				<ul class="navbar-nav ml-auto">
					<li class="nav-item">
						<a class="nav-link" href="index.html">Demo</a> <!-- APP LINKS GO HERE --> 
					</li>
					<li class="nav-item">
						<a class="nav-link" href="html.html">Basic Template HTML</a> <!-- APP LINKS GO HERE --> 
					</li>
					<li class="nav-item">
						<a class="nav-link" href="elements.html">Additional Elements</a> <!-- APP LINKS GO HERE --> 
					</li>	
					<li class="nav-item">
						<a class="nav-link" href="changelog.html">Changelog</a> <!-- APP LINKS GO HERE --> 
					</li>
				</ul>
			</div>
		</div>
	</nav>
	</header>



Begin Page Content

First, start the main container of the page. We've created a flex container so it'll resize to mobile if needed. 

	<!-- START OF PAGE CONTENT -->
	<main role="main" class="container d-flex flex-column center flex-shrink-1">



Basic Page Rows and Form fields

Something about date choosing or other help information. 

	<!-- Creating a new bootstrap row here. -->	
	<div class="row">
	
		<!-- The "col-4" class means that this row will span, from left to right, 4 columns out of 12 allowed. -->
		<div class="form-group col-4">
			<label for="datein">Date In</label>
			<!-- The class "datepicker" for this input makes the calendar pop up when it has focus from the user. -->
			<input type="text" class="form-control datepicker" id="datein" placeholder="mm/dd/yyyy">
		</div>

		<!-- The "col-8" class means this column will span 8 columns. -->
		<div class="form-group col-8">
			<label for="projectName">Project Name</label>
			<input type="text" class="form-control" id="projectName" placeholder="The Hoover Dam">
		</div>
		
	<!-- End of first bootstrap row. -->
	</div>
The code above creates the basic bootstrap row elements for our page. This is where we'll put our form elements. Bootstrap segments a page into rows and then by 12 columns. Below, we're doing a ratio of 4+8, so the fields on the left are smaller than the right. But we could just as equally make it a single row of twelve columns, or four cells that each span three columns. Pick your poison. This renders like so.


Basic Buttons

	
	<!-- Start another bootstrap row. -->
	<div class="row">
	
		<!-- Four buttons using 3 columns each, with content center justified -->
		<div class="form-group col-3 text-center">
			<!-- The button has class "bg-hillsboro-primary" -->
			<button class="btn bg-hillsboro-primary">New</button> 
		</div>
		
		<div class="form-group col-3 text-center">
			<!-- The button has class "bg-hillsboro-secondary" -->
			<button class="btn bg-hillsboro-secondary">Save</button> 
		</div>
		<div class="form-group col-3 text-center">
			<!-- The button has class "bg-hillsboro-tertiary" -->
			<button class="btn bg-hillsboro-tertiary">Undo</button> 
		</div>
		<div class="form-group col-3 text-center">
			<!-- The button has class "bg-hillsboro-warning" -->
			<button class="btn bg-hillsboro-warning">Delete</button> 
		</div>
	</div>
In the code above, create four buttons, and we assign them three columns each. They each use a different color class: bg-hillsboro-primary, bg-hillsboro-secondary, bg-hillsboro-tertiary, bg-hillsboro-warning. These colors can be applied to other elements in the page if so desired, like text boxes, warning boxes, and the like.


End of Main Page Content

Make sure to close out the main container for the page. 
	
<!-- END OF PAGE CONTENT -->
</main>



Footer HTML

Here's how we close out the page. I've highlighted the areas below where we can customize content for apps. Or maybe add social media links? It seems useful for a variety of uses. 

	<!-- START OF FOOTER -->
	<footer class="bg-hillsboro-primary">
		<div class="container center">
			<div class="row">
				<div class="col-8">
				  &copy; 2021 - <a target="_blank" href="https://www.hillsboro-oregon.gov">City of Hillsboro Website</a> - <a href="https://www.hillsboro-oregon.gov/your-city-government/web-site-privacy-policy" target="_blank">City Privacy Policy</a>
				</div>
				
				<!-- Other content in the footer. Contact? Social media? -->
				<div class="col-4 text-right">
				Content to put on the right.
				</div>
			</div>
		</div>
	</footer>

	<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script src="https://apps.hillsboro-oregon.gov/Resources/js/main.js"></script>
		
	</body>
</html>



Full Template

We put it all together, along with some additional example rows just for good measure. 


<!doctype html>
<html lang="en">
<!-- COH Style Template: v1.0 -->
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css"/>
	<link rel="stylesheet" href="https://apps.hillsboro-oregon.gov/Resources/css/style.css" />
	
	<title>APP NAME GOES HERE</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
	<div class="container">
		<a href="https://www.hillsboro-oregon.gov" class="navbar-brand"><img src="https://apps.hillsboro-oregon.gov/Resources/images/logo.png" id="logo"></a>
		APP NAME GOES HERE
		<button class="navbar-toggler float-right" type="button" data-toggle="collapse" data-target="#main-navbar">
			<span class="navbar-toggler-icon"></span>
		</button>
			<div class="collapse navbar-collapse" id="main-navbar">
				<ul class="navbar-nav ml-auto">
					<li class="nav-item">
						<a class="nav-link" href="index.html">Demo</a> <!-- APP LINKS GO HERE --> 
					</li>
					<li class="nav-item">
						<a class="nav-link" href="html.html">Basic Template HTML</a> <!-- APP LINKS GO HERE --> 
					</li>
					<li class="nav-item">
						<a class="nav-link" href="elements.html">Additional Elements</a> <!-- APP LINKS GO HERE --> 
					</li>	
					<li class="nav-item">
						<a class="nav-link" href="changelog.html">Changelog</a> <!-- APP LINKS GO HERE --> 
					</li>
				</ul>
			</div>
	</div>
</nav>
</header>

<!-- START OF PAGE CONTENT -->
<main role="main" class="container d-flex flex-column center flex-shrink-1">

<!-- Creating a new bootstrap row here. -->	
<div class="row">

	<!-- The "col-4" class means that this row will span, from left to right, 4 columns out of 12 allowed. -->
	<div class="form-group col-4">
		<label for="datein">Date In</label>
		<!-- The class "datepicker" for this input makes the calendar pop up when it has focus from the user. -->
		<input type="text" class="form-control datepicker" id="datein" placeholder="mm/dd/yyyy">
	</div>

	<!-- The "col-8" class means this column will span 8 columns. -->
	<div class="form-group col-8">
		<label for="projectName">Project Name</label>
		<input type="text" class="form-control" id="projectName" placeholder="The Hoover Dam">
	</div>
	
<!-- End of first bootstrap row. -->
</div>

<!-- Start another bootstrap row. -->
<div class="row">

	<!-- Four buttons using 3 columns each, with content center justified -->
	<div class="form-group col-3 text-center">
		<!-- The button has class "bg-hillsboro-primary" -->
		<button class="btn bg-hillsboro-primary">New</button> 
	</div>
	
	<div class="form-group col-3 text-center">
		<!-- The button has class "bg-hillsboro-secondary" -->
		<button class="btn bg-hillsboro-secondary">Save</button> 
	</div>
	<div class="form-group col-3 text-center">
		<!-- The button has class "bg-hillsboro-tertiary" -->
		<button class="btn bg-hillsboro-tertiary">Undo</button> 
	</div>
	<div class="form-group col-3 text-center">
		<!-- The button has class "bg-hillsboro-warning" -->
		<button class="btn bg-hillsboro-warning">Delete</button> 
	</div>
</div>

<!-- END OF PAGE CONTENT -->
</main>

<!-- START OF FOOTER -->
<footer class="bg-hillsboro-primary">
	<div class="container center">
		<div class="row">
			<div class="col-8">
			  &copy; 2021 - <a target="_blank" href="https://www.hillsboro-oregon.gov">City of Hillsboro Website</a> - <a href="https://www.hillsboro-oregon.gov/your-city-government/web-site-privacy-policy" target="_blank">City Privacy Policy</a>
			</div>
			
			<!-- Other content in the footer. Contact? Social media? -->
			<div class="col-4 text-right">
			Content to put on the right.
			</div>
		</div>
	</div>
</footer>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://apps.hillsboro-oregon.gov/Resources/js/main.js"></script>
	
</body>
</html>