Eli Ribble
38d492e9da
I already had most of it anyway. This also fixes our buttons to have the correct contrast.
77 lines
2.3 KiB
HTML
77 lines
2.3 KiB
HTML
{{template "authenticated.html" . }}
|
|
{{define "title"}}Layout Test{{end}}
|
|
{{define "extraheader"}}
|
|
<style>
|
|
.bd-example {
|
|
padding: 1.5rem;
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
border-width: 1px;
|
|
border-top-left-radius: .25rem;
|
|
border-top-right-radius: .25rem;
|
|
}
|
|
</style>
|
|
{{end}}
|
|
{{define "content"}}
|
|
<!-- Main Content -->
|
|
<div id="content">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="bd-example">
|
|
<button type="button" class="btn btn-primary">Primary</button>
|
|
<button type="button" class="btn btn-secondary">Secondary</button>
|
|
<button type="button" class="btn btn-success">Success</button>
|
|
<button type="button" class="btn btn-danger">Danger</button>
|
|
<button type="button" class="btn btn-warning">Warning</button>
|
|
<button type="button" class="btn btn-info">Info</button>
|
|
<button type="button" class="btn btn-light">Light</button>
|
|
<button type="button" class="btn btn-dark">Dark</button>
|
|
|
|
<button type="button" class="btn btn-link">Link</button>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Card 1</h5>
|
|
<p class="card-text">Some example content for the first card.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Card 2</h5>
|
|
<p class="card-text">Some example content for the second card.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="p-3 mb-3 bg-primary text-white">Primary</div>
|
|
<div class="p-3 mb-3 bg-primary-100 text-white">Primary-100</div>
|
|
<div class="p-3 mb-3 bg-primary-200 text-white">Primary-200</div>
|
|
<div class="p-3 mb-3 bg-primary-300 text-white">Primary-300</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="p-3 mb-3 bg-secondary text-white">Secondary</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="p-3 mb-3 bg-success text-white">Success</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="p-3 mb-3 bg-danger text-white">Danger</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="p-3 mb-3 bg-warning text-white">Warning</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="p-3 mb-3 bg-info text-white">Info</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|