<div class="container-fluid">
<h2>HTML Generator Demo</h2>
<p>The HTML Live Generator uses a shorthand syntax for quickly prototyping and generating HTML snippets. ObjGen includes support for styling elements using the Bootstrap v4.x toolkit and is used in this demo example.</p>
<a href="https://getbootstrap.com" target="_blank">Click here for Bootstrap documentation and reference</a>
<hr></hr>
<h3 class="pb-3">Typography</h3>
<div class="row">
<div class="col bg-light border rounded p-2">
<h1>h1. Bootstrap Heading</h1>
<h2>h2. Bootstrap Heading</h2>
<h3>h3. Bootstrap Heading</h3>
</div>
</div>
<h3 class="pt-4">Grid Layout</h3>
<div class="row mb-3">
<div class="col bg-light border">
<div class="p-3">1 of 2</div>
</div>
<div class="col bg-light border">
<div class="p-3">2 of 2</div>
</div>
</div>
<div class="row">
<div class="col bg-light border">
<div class="p-3">1 of 3</div>
</div>
<div class="col bg-light border">
<div class="p-3">2 of 3</div>
</div>
<div class="col bg-light border">
<div class="p-3">3 of 3</div>
</div>
</div>
<h3 class="pt-4">Flex Layout</h3>
<div id="flexDemoContainer" class="d-flex bg-light">
<div class="mr-auto p-2 border">1 of 3</div>
<div class="p-2 border">2 of 3</div>
<div class="p-2 border">3 of 3</div>
</div>
<h3 class="pt-4">
Forms
<small>(Login Form)</small>
</h3>
<div class="row">
<div class="col">
<form class="bg-light border rounded p-3">
<div class="form-group">
<label>Email</label>
<input class="form-control" type="email", placeholder="someone@example.com"></input>
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" type="password", placeholder="********"></input>
</div>
<div class="form-group form-check">
<input class="form-check-input" type="checkbox"></input>
<label class="form-check-label">Remember me</label>
</div>
<button class="btn btn-primary" type="button">Submit</button>
</form>
</div>
</div>
<h3 class="pt-4">
Cards
<small>(with decks)</small>
</h3>
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"></img>
<div class="card-body">
<h5 class="card-title">Card 1 Title</h5>
<p>Card 1 Content</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 5 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"></img>
<div class="card-body">
<h5 class="card-title">Card 2 Title</h5>
<p>Card 2 Content</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 5 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"></img>
<div class="card-body">
<h5 class="card-title">Card 3 Title</h5>
<p>Card 3 Content</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 5 mins ago</small>
</div>
</div>
</div>
<h2 class="pt-4">
List Group
<small>(with badges)</small>
</h2>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center active">
Item 1
<span class="badge badge-danger badge-pill">100</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Item 2
<span class="badge badge-primary badge-pill">75</span>
</li>
<li class="list-group-item">Item 3</li>
<li class="list-group-item">Item 4</li>
</ul>
<h2 class="pt-4">Tables</h2>
<table class="table table-bordered">
<thead class="thead-light">
<tr>
<th>ID</th>
<th>First</th>
<th>Last</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
<td>john.doe@example.com</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>Doe</td>
<td>jane.doe@example.com</td>
</tr>
<tr>
<td>3</td>
<td>Dave</td>
<td>Kingman</td>
<td>dave@davekingman.com</td>
</tr>
</tbody>
</table>
<h2 class="mt-4">Alerts</h2>
<div class="alert alert-primary mt-3 mb-3">Primary Alert</div>
<div class="alert alert-secondary mt-3 mb-3">Secondary Alert</div>
<div class="alert alert-success mt-3 mb-3">Success! Thank you for viewing this demo!</div>
</div>