Unverified Commit 3918f026 authored by David Haynes's avatar David Haynes
Browse files

Finish containers and indicators

- mostly formatting, some minor updates
parent 8e492d8c
Pipeline #1053 passed with stage
in 58 seconds
......@@ -2,6 +2,7 @@
<!DOCTYPE html>
<html lang="en">
<!-- Header content -->
<head>
<!-- Metatags -->
<meta charset="utf-8">
......@@ -37,6 +38,7 @@
</head>
<!-- Body content -->
<body>
<!-- Define the navbar with the primary background color -->
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary fixed-top">
......@@ -230,7 +232,7 @@
</div>
<p class="bs-component">
<button type="button" class="btn btn-primary">Primary</button>
<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-info">Info</button>
......@@ -412,7 +414,8 @@
<small class="text-muted">with muted text</small>
</h3>
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.</p>
auctor.
</p>
</div>
</div>
......@@ -704,8 +707,8 @@
</form>
</div>
</div>
<div class="col-lg-4 col-lg-offset-1">
<div class="col-lg-4 col-lg-offset-1">
<form class="bs-component">
<div class="form-group">
......@@ -796,8 +799,7 @@
</div>
</div>
<!-- Navs
================================================== -->
<!-- Navs ================================================== -->
<div class="bs-docs-section">
<div class="row">
......@@ -813,20 +815,26 @@
<div class="row" style="margin-bottom: 2rem;">
<div class="col-lg-6">
<h2 id="nav-tabs">Tabs</h2>
<div class="bs-component">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown</a>
<a class="nav-link dropdown-toggle" data-toggle="dropdown"
href="#" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown</a>
<div class="rounded dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
......@@ -836,6 +844,7 @@
</div>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active show in" id="home">
<p>Raw denim you probably haven't heard of them jean shorts Austin.
......@@ -847,6 +856,7 @@
cardigan american apparel, butcher voluptate nisi qui.
</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla
single-origin coffee squid. Exercitation +1 labore velit,
......@@ -856,6 +866,7 @@
shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,
assumenda labore aesthetic magna delectus mollit.</p>
</div>
<div class="tab-pane fade" id="dropdown1">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they
sold out mcsweeney's organic lomo retro fanny pack lo-fi
......@@ -864,6 +875,7 @@
salvia banksy hoodie helvetica. DIY synth PBR banksy irony.
Leggings gentrify squid 8-bit cred pitchfork.</p>
</div>
<div class="tab-pane fade" id="dropdown2">
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy
art party before they sold out master cleanse gluten-free
......@@ -871,7 +883,8 @@
seitan DIY, art party locavore wolf cliche high life echo
park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi
before they sold out farm-to-table VHS viral locavore cosby
sweater.</p>
sweater.
</p>
</div>
</div>
</div>
......@@ -881,12 +894,15 @@
<h2 id="nav-pills">Pills</h2>
<div class="bs-component">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown</a>
<a class="nav-link dropdown-toggle" data-toggle="dropdown"
href="#" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown</a>
<div class="rounded dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
......@@ -895,9 +911,11 @@
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
......@@ -909,9 +927,11 @@
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown</a>
<a class="nav-link dropdown-toggle" data-toggle="dropdown"
href="#" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown</a>
<div class="rounded dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
......@@ -920,9 +940,11 @@
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
......@@ -935,13 +957,16 @@
<div class="col-lg-6">
<h2 id="nav-breadcrumbs">Breadcrumbs</h2>
<div class="bs-component">
<ol class="breadcrumb">
<li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Library</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
......@@ -950,94 +975,93 @@
</div>
</div>
<!--<div class="col-lg-6">
<h2 id="pagination">Pagination</h2>
<div class="bs-component">
<div>
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#">&laquo;</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#">&raquo;</a>
</li>
</ul>
</div>
<div class="col-lg-6">
<h2 id="pagination">Pagination</h2>
<div class="bs-component">
<div>
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#">&laquo;</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#">&raquo;</a>
</li>
</ul>
</div>
<div>
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<a class="page-link" href="#">&laquo;</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#">&raquo;</a>
</li>
</ul>
</div>
<div>
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<a class="page-link" href="#">&laquo;</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#">&raquo;</a>
</li>
</ul>
</div>
<div>
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="#">&laquo;</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#">&raquo;</a>
</li>
</ul>
</div>
<div>
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="#">&laquo;</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#">&raquo;</a>
</li>
</ul>
</div>
</div>
</div>-->
</div>
</div>
</div>
</div>
<!-- Indicators
================================================== -->
<!-- Indicators ================================================== -->
<div class="bs-docs-section">
<div class="row">
......@@ -1055,43 +1079,57 @@
<h2>Alerts</h2>
<div class="bs-component">
<div class="alert alert-dismissible alert-warning">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<button type="button" class="close" data-dismiss="alert">
&times;
</button>
<h4>Warning!</h4>
<p>Best check yo self, you're not looking too good. Nulla vitae
elit libero, a pharetra augue. Praesent commodo cursus magna,
<a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
<a href="#" class="alert-link">vel scelerisque nisl consectetur
et</a>.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="bs-component">
<div class="alert alert-dismissible alert-danger">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
<button type="button" class="close" data-dismiss="alert">
&times;
</button>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change
a few things up</a> and try submitting again.
</div>
</div>
</div>
<div class="col-lg-4">
<div class="bs-component">
<div class="alert alert-dismissible alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<button type="button" class="close" data-dismiss="alert">
&times;
</button>
<strong>Well done!</strong> You successfully read <a href="#"
class="alert-link">this important alert message</a>.
</div>
</div>
</div>
<div class="col-lg-4">
<div class="bs-component">
<div class="alert alert-dismissible alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>,
<button type="button" class="close"
data-dismiss="alert">&times;</button>
<strong>Heads up!</strong> This <a href="#"
class="alert-link">alert needs your attention</a>,
but it's not super important.
</div>
</div>
</div>
</div>
<div>
<h2>Badges</h2>
<div class="bs-component" style="margin-bottom: 40px;">
......@@ -1102,6 +1140,7 @@
<span class="badge badge-danger">Danger</span>
<span class="badge badge-info">Info</span>
</div>
<div class="bs-component">
<span class="badge badge-pill badge-default">Default</span>
<span class="badge badge-pill badge-primary">Primary</span>
......@@ -1113,8 +1152,7 @@
</div>
</div>
<!-- Progress
================================================== -->
<!-- Progress ================================================== -->
<div class="bs-docs-section">
<div class="row">
......@@ -1125,10 +1163,18 @@
</h1>
</div>
<h3 id="progress-tiny">Controlled Size</h3>
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width: 15%; height: 1px;" aria-valuenow="15"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h3 id="progress-basic">Basic</h3>
<div class="bs-component">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%; height: 20px;" aria-valuenow="25"
<div class="progress-bar" role="progressbar"
style="width: 25%; height: 20px;" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
......@@ -1200,8 +1246,7 @@
</div>
</div>
<!-- Containers
================================================== -->
<!-- Containers ================================================== -->
<div class="bs-docs-section">
<div class="row">
......@@ -1222,7 +1267,6 @@
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h2>List groups</h2>
......@@ -1233,18 +1277,25 @@
<div class="col-lg-4">
<div class="bs-component">
<ul class="list-group">
<li class="list-group-item">
<span class="tag tag-default tag-pill float-xs-right">14</span> Cras justo odio
<li class="list-group-item justify-content-between">
Cras justo odio
<span class="badge badge-default badge-pill">14</span>
</li>
<li class="list-group-item">
<span class="tag tag-default tag-pill float-xs-right">2</span> Dapibus ac facilisis in
<li class="list-group-item justify-content-between">
Dapibus ac facilisis in
<span class="badge badge-default badge-pill">2</span>
</li>
<li class="list-group-item">
<span class="tag tag-default tag-pill float-xs-right">1</span> Morbi leo risus
<li class="list-group-item justify-content-between">
Morbi leo risus
<span class="badge badge-default badge-pill">1</span>
</li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="bs-component">
<div class="list-group">
......@@ -1258,14 +1309,17 @@
</div>
</div>
</div>
<div class="col-lg-4">
<div class="bs-component">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item list-group-item-action">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas
......@@ -1275,13 +1329,19 @@
</div>
</div>
</div>
</div>
<!-- Cards ================================================== -->
<div class="bs-docs-section">
<!-- Cards
================================================== -->
<div class="row">
<div class="col-lg-12">
<h1 id="cards">Cards</h1>
</div>
<div class="page-header">
<h1 id="cards">Cards
<hr />
</h1>
</div>
</div>
<div class="row">
......@@ -1407,8 +1467,8 @@
</div>
</div>
</div>
</div>
</div>
<!-- Dialogs
================================================== -->
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment