--- /dev/null
+- category: Custom components
+ description: "Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework."
+ examples:
+ - name: Album
+ description: "Simple one-page template for photo galleries, portfolios, and more."
+ - name: Pricing
+ description: "Example pricing page built with Cards and featuring a custom header and footer."
+ - name: Checkout
+ description: "Custom checkout form showing our form components and their validation features."
+ - name: Product
+ description: "Lean product-focused marketing page with extensive grid and image work."
+ - name: Cover
+ description: "A one-page template for building simple and beautiful home pages."
+ - name: Carousel
+ description: "Customize the navbar and carousel, then add some new components."
+ - name: Blog
+ description: "Magazine like blog template with header, navigation, featured content."
+ - name: Dashboard
+ description: "Basic admin dashboard shell with fixed sidebar and navbar."
+ - name: Sign-in
+ description: "Custom form layout and design for a simple sign in form."
+ - name: Sticky footer
+ description: "Attach a footer to the bottom of the viewport when page content is short."
+ - name: Sticky footer navbar
+ description: "Attach a footer to the bottom of the viewport with a fixed top navbar."
+
+- category: Framework
+ description: "Examples that focus on implementing uses of built-in components provided by Bootstrap."
+ examples:
+ - name: "Starter template"
+ description: "Nothing but the basics: compiled CSS and JavaScript."
+ - name: Grid
+ description: "Multiple examples of grid layouts with all four tiers, nesting, and more."
+ - name: Jumbotron
+ description: "Build around the jumbotron with a navbar and some basic grid columns."
+
+- category: Navbars
+ description: "Taking the default navbar component and showing how it can be moved, placed, and extended."
+ examples:
+ - name: Navbars
+ description: "Demonstration of all responsive and container options for the navbar."
+ - name: Navbar static
+ description: "Single navbar example of a static top navbar along with some additional content."
+ - name: Navbar fixed
+ description: "Single navbar example with a fixed top navbar along with some additional content."
+ - name: Navbar bottom
+ description: "Single navbar example with a bottom navbar along with some additional content."
+
+- category: Experiments
+ description: "Examples that focus on future-friendly features or techniques."
+ examples:
+ - name: Floating labels
+ description: "Beautifully simple forms with floating labels over your inputs."
+ - name: Offcanvas
+ description: "Turn your expandable navbar into a sliding offcanvas menu."
--- /dev/null
+---
+layout: default
+---
+
+<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
+ <div class="pt-md-3 pb-md-4">
+ <h1 class="bd-title mt-0">{{ page.title | smartify }}</h1>
+ <p class="bd-lead">{{ page.description | smartify }}</p>
+ <a href="{{ site.download.source }}" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
+ </div>
+ {% include ads.html %}
+</header>
+
+<main class="bd-content p-5" role="main">
+ {{ content }}
+</main>
-body {
- min-height: 75rem; /* Can be removed; just added for demo purposes */
-}
-
-.navbar {
- margin-bottom: 0;
+:root {
+ --jumbotron-padding-y: 3rem;
}
.jumbotron {
- padding-top: 6rem;
- padding-bottom: 6rem;
+ padding-top: var(--jumbotron-padding-y);
+ padding-bottom: var(--jumbotron-padding-y);
margin-bottom: 0;
background-color: #fff;
}
+@media (min-width: 768px) {
+ .jumbotron {
+ padding-top: calc(var(--jumbotron-padding-y) * 2);
+ padding-bottom: calc(var(--jumbotron-padding-y) * 2);
+ }
+}
.jumbotron p:last-child {
margin-bottom: 0;
max-width: 40rem;
}
-.album {
- min-height: 50rem; /* Can be removed; just added for demo purposes */
- padding-top: 3rem;
- padding-bottom: 3rem;
- background-color: #f7f7f7;
-}
-
-.card {
- float: left;
- width: 33.333%;
- padding: .75rem;
- margin-bottom: 2rem;
- border: 0;
-}
-
-.card > img {
- margin-bottom: .75rem;
-}
-
-.card-text {
- font-size: 85%;
-}
-
footer {
padding-top: 3rem;
padding-bottom: 3rem;
footer p {
margin-bottom: .25rem;
}
+
+.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
- <div class="col-sm-8 py-4">
+ <div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
</div>
- <div class="col-sm-4 py-4">
+ <div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">Follow on Twitter</a></li>
</div>
</div>
</div>
- <div class="navbar navbar-dark bg-dark">
+ <div class="navbar navbar-dark bg-dark box-shadow">
<div class="container d-flex justify-content-between">
- <a href="#" class="navbar-brand">Album</a>
+ <a href="#" class="navbar-brand d-flex align-items-center">
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
+ <strong>Album</strong>
+ </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
<p>
- <a href="#" class="btn btn-primary">Main call to action</a>
- <a href="#" class="btn btn-secondary">Secondary action</a>
+ <a href="#" class="btn btn-primary my-2">Main call to action</a>
+ <a href="#" class="btn btn-secondary my-2">Secondary action</a>
</p>
</div>
</section>
- <div class="album text-muted">
+ <div class="album py-5 bg-light">
<div class="container">
<div class="row">
- <div class="card">
- <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <div class="col-md-4">
+ <div class="card mb-4 box-shadow">
+ <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
+ <div class="card-body">
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <div class="d-flex justify-content-between align-items-center">
+ <div class="btn-group">
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+ </div>
+ <small class="text-muted">9 mins</small>
+ </div>
+ </div>
+ </div>
</div>
- <div class="card">
- <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <div class="col-md-4">
+ <div class="card mb-4 box-shadow">
+ <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
+ <div class="card-body">
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <div class="d-flex justify-content-between align-items-center">
+ <div class="btn-group">
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+ </div>
+ <small class="text-muted">9 mins</small>
+ </div>
+ </div>
+ </div>
</div>
- <div class="card">
- <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <div class="col-md-4">
+ <div class="card mb-4 box-shadow">
+ <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
+ <div class="card-body">
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <div class="d-flex justify-content-between align-items-center">
+ <div class="btn-group">
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+ </div>
+ <small class="text-muted">9 mins</small>
+ </div>
+ </div>
+ </div>
</div>
- <div class="card">
- <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <div class="col-md-4">
+ <div class="card mb-4 box-shadow">
+ <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
+ <div class="card-body">
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <div class="d-flex justify-content-between align-items-center">
+ <div class="btn-group">
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+ </div>
+ <small class="text-muted">9 mins</small>
+ </div>
+ </div>
+ </div>
</div>
- <div class="card">
- <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <div class="col-md-4">
+ <div class="card mb-4 box-shadow">
+ <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
+ <div class="card-body">
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <div class="d-flex justify-content-between align-items-center">
+ <div class="btn-group">
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+ </div>
+ <small class="text-muted">9 mins</small>
+ </div>
+ </div>
+ </div>
</div>
- <div class="card">
- <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <div class="col-md-4">
+ <div class="card mb-4 box-shadow">
+ <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
+ <div class="card-body">
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <div class="d-flex justify-content-between align-items-center">
+ <div class="btn-group">
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+ </div>
+ <small class="text-muted">9 mins</small>
+ </div>
+ </div>
+ </div>
</div>
- <div class="card">
- <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <div class="col-md-4">
+ <div class="card mb-4 box-shadow">
+ <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
+ <div class="card-body">
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <div class="d-flex justify-content-between align-items-center">
+ <div class="btn-group">
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+ </div>
+ <small class="text-muted">9 mins</small>
+ </div>
+ </div>
+ </div>
</div>
- <div class="card">
- <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <div class="col-md-4">
+ <div class="card mb-4 box-shadow">
+ <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
+ <div class="card-body">
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <div class="d-flex justify-content-between align-items-center">
+ <div class="btn-group">
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+ </div>
+ <small class="text-muted">9 mins</small>
+ </div>
+ </div>
+ </div>
</div>
- <div class="card">
- <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <div class="col-md-4">
+ <div class="card mb-4 box-shadow">
+ <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
+ <div class="card-body">
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ <div class="d-flex justify-content-between align-items-center">
+ <div class="btn-group">
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+ </div>
+ <small class="text-muted">9 mins</small>
+ </div>
+ </div>
+ </div>
</div>
</div>
-
</div>
</div>
-/*
- * Globals
- */
-@media (min-width: 48em) {
- html {
- font-size: 18px;
- }
+/* stylelint-disable selector-list-comma-newline-after */
+
+.blog-header {
+ line-height: 1;
+ border-bottom: 1px solid #e5e5e5;
}
-body {
- font-family: Georgia, "Times New Roman", Times, serif;
- color: #555;
-}
-
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-weight: 400;
- color: #333;
+.blog-header-logo {
+ font-family: "Playfair Display", Georgia, "Times New Roman", serif;
+ font-size: 2.25rem;
}
-/*
- * Override Bootstrap's default container.
- */
-.container {
- max-width: 60rem;
+.blog-header-logo:hover {
+ text-decoration: none;
}
-/*
- * Masthead for nav
- */
-.blog-masthead {
- margin-bottom: 3rem;
- background-color: #428bca;
- box-shadow: inset 0 -.1rem .25rem rgba(0, 0, 0, .1);
+h1, h2, h3, h4, h5, h6 {
+ font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}
-/* Nav links */
-.nav-link {
+.display-4 {
+ font-size: 2.5rem;
+}
+@media (min-width: 768px) {
+ .display-4 {
+ font-size: 3rem;
+ }
+}
+
+.nav-scroller {
position: relative;
- padding: 1rem;
- font-weight: 500;
- color: #cdddeb;
-}
-.nav-link:hover,
-.nav-link:focus {
- color: #fff;
- background-color: transparent;
-}
-
-/* Active state gets a caret at the bottom */
-.nav-link.active {
- color: #fff;
-}
-.nav-link.active::after {
- position: absolute;
- bottom: 0;
- left: 50%;
- width: 0;
- height: 0;
- margin-left: -.3rem;
- vertical-align: middle;
- content: "";
- border-right: .3rem solid transparent;
- border-bottom: .3rem solid;
- border-left: .3rem solid transparent;
+ z-index: 2;
+ height: 2.75rem;
+ overflow-y: hidden;
+}
+
+.nav-scroller .nav {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ padding-bottom: 1rem;
+ margin-top: -1px;
+ overflow-x: auto;
+ text-align: center;
+ white-space: nowrap;
+ -webkit-overflow-scrolling: touch;
+}
+
+.nav-scroller .nav-link {
+ padding-top: .75rem;
+ padding-bottom: .75rem;
+ font-size: .875rem;
+}
+
+.card-img-right {
+ height: 100%;
+ border-radius: 0 3px 3px 0;
+}
+
+.flex-auto {
+ -ms-flex: 0 0 auto;
+ -webkit-box-flex: 0;
+ flex: 0 0 auto;
}
+.h-250 { height: 250px; }
+@media (min-width: 768px) {
+ .h-md-250 { height: 250px; }
+}
+
+.border-top { border-top: 1px solid #e5e5e5; }
+.border-bottom { border-bottom: 1px solid #e5e5e5; }
+
+.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
+
/*
* Blog name and description
*/
-.blog-header {
- padding-bottom: 1.25rem;
- margin-bottom: 2rem;
- border-bottom: .05rem solid #eee;
-}
.blog-title {
margin-bottom: 0;
font-size: 2rem;
}
}
-/*
- * Main column and sidebar layout
- */
-
-/* Sidebar modules for boxing content */
-.sidebar-module {
- padding: 1rem;
-}
-.sidebar-module-inset {
- padding: 1rem;
- background-color: #f5f5f5;
- border-radius: .25rem;
-}
-.sidebar-module-inset p:last-child,
-.sidebar-module-inset ul:last-child,
-.sidebar-module-inset ol:last-child {
- margin-bottom: 0;
-}
-
/* Pagination */
.blog-pagination {
margin-bottom: 4rem;
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
+ <link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet">
<link href="blog.css" rel="stylesheet">
</head>
<body>
- <header>
- <div class="blog-masthead">
- <div class="container">
- <nav class="nav">
- <a class="nav-link active" href="#">Home</a>
- <a class="nav-link" href="#">New features</a>
- <a class="nav-link" href="#">Press</a>
- <a class="nav-link" href="#">New hires</a>
- <a class="nav-link" href="#">About</a>
- </nav>
+ <div class="container">
+ <header class="blog-header py-3">
+ <div class="row flex-nowrap justify-content-between align-items-center">
+ <div class="col-4 pt-1">
+ <a class="text-muted" href="#">Subscribe</a>
+ </div>
+ <div class="col-4 text-center">
+ <a class="blog-header-logo text-dark" href="#">Large</a>
+ </div>
+ <div class="col-4 d-flex justify-content-end align-items-center">
+ <a class="text-muted" href="#">
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
+ </a>
+ <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
+ </div>
</div>
+ </header>
+
+ <div class="nav-scroller py-1 mb-2">
+ <nav class="nav d-flex justify-content-between">
+ <a class="p-2 text-muted" href="#">World</a>
+ <a class="p-2 text-muted" href="#">U.S.</a>
+ <a class="p-2 text-muted" href="#">Technology</a>
+ <a class="p-2 text-muted" href="#">Design</a>
+ <a class="p-2 text-muted" href="#">Culture</a>
+ <a class="p-2 text-muted" href="#">Business</a>
+ <a class="p-2 text-muted" href="#">Politics</a>
+ <a class="p-2 text-muted" href="#">Opinion</a>
+ <a class="p-2 text-muted" href="#">Science</a>
+ <a class="p-2 text-muted" href="#">Health</a>
+ <a class="p-2 text-muted" href="#">Style</a>
+ <a class="p-2 text-muted" href="#">Travel</a>
+ </nav>
</div>
- <div class="blog-header">
- <div class="container">
- <h1 class="blog-title">The Bootstrap Blog</h1>
- <p class="lead blog-description">An example blog template built with Bootstrap.</p>
+ <div class="jumbotron p-3 p-md-5 text-white rounded bg-dark">
+ <div class="col-md-6 px-0">
+ <h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
+ <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what's most interesting in this post's contents.</p>
+ <p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Continue reading...</a></p>
</div>
</div>
- </header>
- <main role="main" class="container">
+ <div class="row mb-2">
+ <div class="col-md-6">
+ <div class="card flex-md-row mb-4 box-shadow h-md-250">
+ <div class="card-body d-flex flex-column align-items-start">
+ <strong class="d-inline-block mb-2 text-primary">World</strong>
+ <h3 class="mb-0">
+ <a class="text-dark" href="#">Featured post</a>
+ </h3>
+ <div class="mb-1 text-muted">Nov 12</div>
+ <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
+ <a href="#">Continue reading</a>
+ </div>
+ <img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Card image cap">
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="card flex-md-row mb-4 box-shadow h-md-250">
+ <div class="card-body d-flex flex-column align-items-start">
+ <strong class="d-inline-block mb-2 text-success">Design</strong>
+ <h3 class="mb-0">
+ <a class="text-dark" href="#">Post title</a>
+ </h3>
+ <div class="mb-1 text-muted">Nov 11</div>
+ <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
+ <a href="#">Continue reading</a>
+ </div>
+ <img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Card image cap">
+ </div>
+ </div>
+ </div>
+ </div>
+ <main role="main" class="container">
<div class="row">
-
- <div class="col-sm-8 blog-main">
+ <div class="col-md-8 blog-main">
+ <h3 class="pb-3 mb-4 font-italic border-bottom">
+ From the Firehose
+ </h3>
<div class="blog-post">
<h2 class="blog-post-title">Sample blog post</h2>
</div><!-- /.blog-main -->
- <aside class="col-sm-3 ml-sm-auto blog-sidebar">
- <div class="sidebar-module sidebar-module-inset">
- <h4>About</h4>
- <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
+ <aside class="col-md-4 blog-sidebar">
+ <div class="p-3 mb-3 bg-light rounded">
+ <h4 class="font-italic">About</h4>
+ <p class="mb-0">Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
- <div class="sidebar-module">
- <h4>Archives</h4>
- <ol class="list-unstyled">
+
+ <div class="p-3">
+ <h4 class="font-italic">Archives</h4>
+ <ol class="list-unstyled mb-0">
<li><a href="#">March 2014</a></li>
<li><a href="#">February 2014</a></li>
<li><a href="#">January 2014</a></li>
<li><a href="#">April 2013</a></li>
</ol>
</div>
- <div class="sidebar-module">
- <h4>Elsewhere</h4>
+
+ <div class="p-3">
+ <h4 class="font-italic">Elsewhere</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
+ <script src="../../../../assets/js/vendor/holder.min.js"></script>
+ <script>
+ Holder.addTheme('thumb', {
+ bg: '#55595c',
+ fg: '#eceeef',
+ text: 'Thumbnail'
+ });
+ </script>
</body>
</html>
--- /dev/null
+.container {
+ max-width: 960px;
+}
+
+.border-top { border-top: 1px solid #e5e5e5; }
+.border-bottom { border-bottom: 1px solid #e5e5e5; }
+.border-top-gray { border-top-color: #adb5bd; }
+
+.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
+
+.lh-condensed { line-height: 1.25; }
--- /dev/null
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="description" content="">
+ <meta name="author" content="">
+ <link rel="icon" href="../../../../favicon.ico">
+
+ <title>Checkout example for Bootstrap</title>
+
+ <!-- Bootstrap core CSS -->
+ <link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
+
+ <!-- Custom styles for this template -->
+ <link href="form-validation.css" rel="stylesheet">
+ </head>
+
+ <body class="bg-light">
+
+ <div class="container">
+ <div class="py-5 text-center">
+ <img class="d-block mx-auto mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
+ <h2>Checkout form</h2>
+ <p class="lead">Below is an example form built entirely with Bootstrap's form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
+ </div>
+
+ <div class="row">
+ <div class="col-md-4 order-md-2 mb-4">
+ <h4 class="d-flex justify-content-between align-items-center mb-3">
+ <span class="text-muted">Your cart</span>
+ <span class="badge badge-secondary badge-pill">3</span>
+ </h4>
+ <ul class="list-group mb-3">
+ <li class="list-group-item d-flex justify-content-between lh-condensed">
+ <div>
+ <h6 class="my-0">Product name</h6>
+ <small class="text-muted">Brief description</small>
+ </div>
+ <span class="text-muted">$12</span>
+ </li>
+ <li class="list-group-item d-flex justify-content-between lh-condensed">
+ <div>
+ <h6 class="my-0">Second product</h6>
+ <small class="text-muted">Brief description</small>
+ </div>
+ <span class="text-muted">$8</span>
+ </li>
+ <li class="list-group-item d-flex justify-content-between lh-condensed">
+ <div>
+ <h6 class="my-0">Third item</h6>
+ <small class="text-muted">Brief description</small>
+ </div>
+ <span class="text-muted">$5</span>
+ </li>
+ <li class="list-group-item d-flex justify-content-between bg-light">
+ <div class="text-success">
+ <h6 class="my-0">Promo code</h6>
+ <small>EXAMPLECODE</small>
+ </div>
+ <span class="text-success">-$5</span>
+ </li>
+ <li class="list-group-item d-flex justify-content-between">
+ <span>Total (USD)</span>
+ <strong>$20</strong>
+ </li>
+ </ul>
+
+ <form class="card p-2">
+ <div class="input-group">
+ <input type="text" class="form-control" placeholder="Promo code">
+ <div class="input-group-append">
+ <button type="submit" class="btn btn-secondary">Redeem</button>
+ </div>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-8 order-md-1">
+ <h4 class="mb-3">Billing address</h4>
+ <form class="needs-validation" novalidate>
+ <div class="row">
+ <div class="col-md-6 mb-3">
+ <label for="firstName">First name</label>
+ <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
+ <div class="invalid-feedback">
+ Valid first name is required.
+ </div>
+ </div>
+ <div class="col-md-6 mb-3">
+ <label for="lastName">Last name</label>
+ <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
+ <div class="invalid-feedback">
+ Valid last name is required.
+ </div>
+ </div>
+ </div>
+
+ <div class="mb-3">
+ <label for="username">Username</label>
+ <div class="input-group">
+ <div class="input-group-prepend">
+ <span class="input-group-text">@</span>
+ </div>
+ <input type="text" class="form-control" id="username" placeholder="Username" required>
+ <div class="invalid-feedback" style="width: 100%;">
+ Your username is required.
+ </div>
+ </div>
+ </div>
+
+ <div class="mb-3">
+ <label for="email">Email <span class="text-muted">(Optional)</span></label>
+ <input type="email" class="form-control" id="email" placeholder="you@example.com">
+ <div class="invalid-feedback">
+ Please enter a valid email address for shipping updates.
+ </div>
+ </div>
+
+ <div class="mb-3">
+ <label for="address">Address</label>
+ <input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
+ <div class="invalid-feedback">
+ Please enter your shipping address.
+ </div>
+ </div>
+
+ <div class="mb-3">
+ <label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>
+ <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
+ </div>
+
+ <div class="row">
+ <div class="col-md-5 mb-3">
+ <label for="country">Country</label>
+ <select class="custom-select d-block w-100" id="country" required>
+ <option value="">Choose...</option>
+ <option>United States</option>
+ </select>
+ <div class="invalid-feedback">
+ Please select a valid country.
+ </div>
+ </div>
+ <div class="col-md-4 mb-3">
+ <label for="state">State</label>
+ <select class="custom-select d-block w-100" id="state" required>
+ <option value="">Choose...</option>
+ <option>California</option>
+ </select>
+ <div class="invalid-feedback">
+ Please provide a valid state.
+ </div>
+ </div>
+ <div class="col-md-3 mb-3">
+ <label for="zip">Zip</label>
+ <input type="text" class="form-control" id="zip" placeholder="" required>
+ <div class="invalid-feedback">
+ Zip code required.
+ </div>
+ </div>
+ </div>
+ <hr class="mb-4">
+ <div class="custom-control custom-checkbox">
+ <input type="checkbox" class="custom-control-input" id="same-address">
+ <label class="custom-control-label" for="same-address">Shipping address is the same as my billing address</label>
+ </div>
+ <div class="custom-control custom-checkbox">
+ <input type="checkbox" class="custom-control-input" id="save-info">
+ <label class="custom-control-label" for="save-info">Save this information for next time</label>
+ </div>
+ <hr class="mb-4">
+
+ <h4 class="mb-3">Payment</h4>
+
+ <div class="d-block my-3">
+ <div class="custom-control custom-radio">
+ <input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked required>
+ <label class="custom-control-label" for="credit">Credit card</label>
+ </div>
+ <div class="custom-control custom-radio">
+ <input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required>
+ <label class="custom-control-label" for="debit">Debit card</label>
+ </div>
+ <div class="custom-control custom-radio">
+ <input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required>
+ <label class="custom-control-label" for="paypal">Paypal</label>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6 mb-3">
+ <label for="cc-name">Name on card</label>
+ <input type="text" class="form-control" id="cc-name" placeholder="" required>
+ <small class="text-muted">Full name as displayed on card</small>
+ <div class="invalid-feedback">
+ Name on card is required
+ </div>
+ </div>
+ <div class="col-md-6 mb-3">
+ <label for="cc-number">Credit card number</label>
+ <input type="text" class="form-control" id="cc-number" placeholder="" required>
+ <div class="invalid-feedback">
+ Credit card number is required
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-3 mb-3">
+ <label for="cc-expiration">Expiration</label>
+ <input type="text" class="form-control" id="cc-expiration" placeholder="" required>
+ <div class="invalid-feedback">
+ Expiration date required
+ </div>
+ </div>
+ <div class="col-md-3 mb-3">
+ <label for="cc-expiration">CVV</label>
+ <input type="text" class="form-control" id="cc-cvv" placeholder="" required>
+ <div class="invalid-feedback">
+ Security code required
+ </div>
+ </div>
+ </div>
+ <hr class="mb-4">
+ <button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
+ </form>
+ </div>
+ </div>
+
+ <footer class="my-5 pt-5 text-muted text-center text-small">
+ <p class="mb-1">© 2017 Company Name</p>
+ <ul class="list-inline">
+ <li class="list-inline-item"><a href="#">Privacy</a></li>
+ <li class="list-inline-item"><a href="#">Terms</a></li>
+ <li class="list-inline-item"><a href="#">Support</a></li>
+ </ul>
+ </footer>
+ </div>
+
+ <!-- Bootstrap core JavaScript
+ ================================================== -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
+ <script src="../../../../assets/js/vendor/popper.min.js"></script>
+ <script src="../../../../dist/js/bootstrap.min.js"></script>
+ <script src="../../../../assets/js/vendor/holder.min.js"></script>
+ <script>
+ // Example starter JavaScript for disabling form submissions if there are invalid fields
+ (function() {
+ 'use strict';
+
+ window.addEventListener('load', function() {
+ // Fetch all the forms we want to apply custom Bootstrap validation styles to
+ var forms = document.getElementsByClassName('needs-validation');
+
+ // Loop over them and prevent submission
+ var validation = Array.prototype.filter.call(forms, function(form) {
+ form.addEventListener('submit', function(event) {
+ if (form.checkValidity() === false) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ form.classList.add('was-validated');
+ }, false);
+ });
+ }, false);
+ })();
+ </script>
+ </body>
+</html>
/*
* Base structure
*/
+
html,
body {
height: 100%;
background-color: #333;
}
+
body {
+ display: -ms-flexbox;
+ display: -webkit-box;
+ display: flex;
+ -ms-flex-pack: center;
+ -webkit-box-pack: center;
+ justify-content: center;
color: #fff;
- text-align: center;
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
-}
-
-/* Extra markup and styles for table-esque vertical and horizontal centering */
-.site-wrapper {
- display: table;
- width: 100%;
- height: 100%; /* For at least Firefox */
- min-height: 100%;
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
-.site-wrapper-inner {
- display: table-cell;
- vertical-align: top;
-}
-.cover-container {
- margin-right: auto;
- margin-left: auto;
-}
-/* Padding for spacing */
-.inner {
- padding: 2rem;
+.cover-container {
+ max-width: 42em;
}
.mastfoot {
color: rgba(255, 255, 255, .5);
}
-
-
-/*
- * Affix and center
- */
-@media (min-width: 40em) {
- /* Pull out the header and footer */
- .masthead {
- position: fixed;
- top: 0;
- }
- .mastfoot {
- position: fixed;
- bottom: 0;
- }
-
- /* Start the vertical centering */
- .site-wrapper-inner {
- vertical-align: middle;
- }
-
- /* Handle the widths */
- .masthead,
- .mastfoot,
- .cover-container {
- width: 100%; /* Must be percentage or pixels for horizontal alignment */
- }
-}
-
-@media (min-width: 62em) {
- .masthead,
- .mastfoot,
- .cover-container {
- width: 42rem;
- }
-}
<link href="cover.css" rel="stylesheet">
</head>
- <body>
-
- <div class="site-wrapper">
-
- <div class="site-wrapper-inner">
-
- <div class="cover-container">
-
- <header class="masthead clearfix">
- <div class="inner">
- <h3 class="masthead-brand">Cover</h3>
- <nav class="nav nav-masthead">
- <a class="nav-link active" href="#">Home</a>
- <a class="nav-link" href="#">Features</a>
- <a class="nav-link" href="#">Contact</a>
- </nav>
- </div>
- </header>
-
- <main role="main" class="inner cover">
- <h1 class="cover-heading">Cover your page.</h1>
- <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
- <p class="lead">
- <a href="#" class="btn btn-lg btn-secondary">Learn more</a>
- </p>
- </main>
-
- <footer class="mastfoot">
- <div class="inner">
- <p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
- </div>
- </footer>
-
+ <body class="text-center">
+
+ <div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
+ <header class="masthead mb-auto">
+ <div class="inner">
+ <h3 class="masthead-brand">Cover</h3>
+ <nav class="nav nav-masthead justify-content-center">
+ <a class="nav-link active" href="#">Home</a>
+ <a class="nav-link" href="#">Features</a>
+ <a class="nav-link" href="#">Contact</a>
+ </nav>
</div>
-
- </div>
-
+ </header>
+
+ <main role="main" class="inner cover">
+ <h1 class="cover-heading">Cover your page.</h1>
+ <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
+ <p class="lead">
+ <a href="#" class="btn btn-lg btn-secondary">Learn more</a>
+ </p>
+ </main>
+
+ <footer class="mastfoot mt-auto">
+ <div class="inner">
+ <p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
+ </div>
+ </footer>
</div>
+
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
-/*
- * Base structure
- */
-
-/* Move down content because we have a fixed navbar that is 3.5rem tall */
body {
- padding-top: 3.5rem;
+ font-size: .875rem;
}
-/*
- * Typography
- */
-
-h1 {
- padding-bottom: 9px;
- margin-bottom: 20px;
- border-bottom: 1px solid #eee;
+.feather {
+ width: 16px;
+ height: 16px;
+ vertical-align: text-bottom;
}
/*
.sidebar {
position: fixed;
- top: 51px;
+ top: 0;
bottom: 0;
left: 0;
- z-index: 1000;
- padding: 20px 0;
+ z-index: 100; /* Behind the navbar */
+ padding: 0;
+ box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+}
+
+.sidebar-sticky {
+ position: -webkit-sticky;
+ position: sticky;
+ top: 48px; /* Height of navbar */
+ height: calc(100vh - 48px);
+ padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
- border-right: 1px solid #eee;
}
-.sidebar .nav {
- margin-bottom: 20px;
+.sidebar .nav-link {
+ font-weight: 500;
+ color: #333;
}
-.sidebar .nav-item {
- width: 100%;
+.sidebar .nav-link .feather {
+ margin-right: 4px;
+ color: #999;
}
-.sidebar .nav-item + .nav-item {
- margin-left: 0;
+.sidebar .nav-link.active {
+ color: #007bff;
}
-.sidebar .nav-link {
- border-radius: 0;
+.sidebar .nav-link:hover .feather,
+.sidebar .nav-link.active .feather {
+ color: inherit;
+}
+
+.sidebar-heading {
+ font-size: .75rem;
+ text-transform: uppercase;
}
/*
- * Dashboard
+ * Navbar
*/
-/* Placeholders */
-.placeholders {
- padding-bottom: 3rem;
+.navbar-brand {
+ padding-top: .75rem;
+ padding-bottom: .75rem;
+ font-size: 1rem;
+ background-color: rgba(0, 0, 0, .25);
+ box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
+}
+
+.navbar .form-control {
+ padding: .75rem 1rem;
+ border-width: 0;
+ border-radius: 0;
}
-.placeholder img {
- padding-top: 1.5rem;
- padding-bottom: 1.5rem;
+.form-control-dark {
+ color: #fff;
+ background-color: rgba(255, 255, 255, .1);
+ border-color: rgba(255, 255, 255, .1);
}
+
+.form-control-dark:focus {
+ border-color: transparent;
+ box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
+}
+
+/*
+ * Utilities
+ */
+
+.border-top { border-top: 1px solid #e5e5e5; }
+.border-bottom { border-bottom: 1px solid #e5e5e5; }
</head>
<body>
- <header>
- <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
- <a class="navbar-brand" href="#">Dashboard</a>
- <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
-
- <div class="collapse navbar-collapse" id="navbarsExampleDefault">
- <ul class="navbar-nav mr-auto">
- <li class="nav-item active">
- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Settings</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Profile</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Help</a>
- </li>
- </ul>
- <form class="form-inline mt-2 mt-md-0">
- <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
- </form>
- </div>
- </nav>
- </header>
+ <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
+ <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
+ <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
+ <ul class="navbar-nav px-3">
+ <li class="nav-item text-nowrap">
+ <a class="nav-link" href="#">Sign out</a>
+ </li>
+ </ul>
+ </nav>
<div class="container-fluid">
<div class="row">
- <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
- <ul class="nav nav-pills flex-column">
- <li class="nav-item">
- <a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Reports</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Analytics</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Export</a>
- </li>
- </ul>
-
- <ul class="nav nav-pills flex-column">
- <li class="nav-item">
- <a class="nav-link" href="#">Nav item</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Nav item again</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">One more nav</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Another nav item</a>
- </li>
- </ul>
+ <nav class="col-md-2 d-none d-md-block bg-light sidebar">
+ <div class="sidebar-sticky">
+ <ul class="nav flex-column">
+ <li class="nav-item">
+ <a class="nav-link active" href="#">
+ <span data-feather="home"></span>
+ Dashboard <span class="sr-only">(current)</span>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">
+ <span data-feather="file"></span>
+ Orders
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">
+ <span data-feather="shopping-cart"></span>
+ Products
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">
+ <span data-feather="users"></span>
+ Customers
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">
+ <span data-feather="bar-chart-2"></span>
+ Reports
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">
+ <span data-feather="layers"></span>
+ Integrations
+ </a>
+ </li>
+ </ul>
- <ul class="nav nav-pills flex-column">
- <li class="nav-item">
- <a class="nav-link" href="#">Nav item again</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">One more nav</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Another nav item</a>
- </li>
- </ul>
+ <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
+ <span>Saved reports</span>
+ <a class="d-flex align-items-center text-muted" href="#">
+ <span data-feather="plus-circle"></span>
+ </a>
+ </h6>
+ <ul class="nav flex-column mb-2">
+ <li class="nav-item">
+ <a class="nav-link" href="#">
+ <span data-feather="file-text"></span>
+ Current month
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">
+ <span data-feather="file-text"></span>
+ Last quarter
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">
+ <span data-feather="file-text"></span>
+ Social engagement
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">
+ <span data-feather="file-text"></span>
+ Year-end sale
+ </a>
+ </li>
+ </ul>
+ </div>
</nav>
- <main role="main" class="col-sm-9 ml-sm-auto col-md-10 pt-3">
- <h1>Dashboard</h1>
-
- <section class="row text-center placeholders">
- <div class="col-6 col-sm-3 placeholder">
- <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
- <h4>Label</h4>
- <div class="text-muted">Something else</div>
- </div>
- <div class="col-6 col-sm-3 placeholder">
- <img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
- <h4>Label</h4>
- <span class="text-muted">Something else</span>
- </div>
- <div class="col-6 col-sm-3 placeholder">
- <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
- <h4>Label</h4>
- <span class="text-muted">Something else</span>
+ <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
+ <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+ <h1 class="h2">Dashboard</h1>
+ <div class="btn-toolbar mb-2 mb-md-0">
+ <div class="btn-group mr-2">
+ <button class="btn btn-sm btn-outline-secondary">Share</button>
+ <button class="btn btn-sm btn-outline-secondary">Export</button>
+ </div>
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle">
+ <span data-feather="calendar"></span>
+ This week
+ </button>
</div>
- <div class="col-6 col-sm-3 placeholder">
- <img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
- <h4>Label</h4>
- <span class="text-muted">Something else</span>
- </div>
- </section>
+ </div>
+
+ <canvas class="my-4" id="myChart" width="900" height="380"></canvas>
<h2>Section title</h2>
<div class="table-responsive">
- <table class="table table-striped">
+ <table class="table table-striped table-sm">
<thead>
<tr>
<th>#</th>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
+
+ <!-- Icons -->
+ <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
+ <script>
+ feather.replace()
+ </script>
+
+ <!-- Graphs -->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
+ <script>
+ var ctx = document.getElementById("myChart");
+ var myChart = new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+ datasets: [{
+ data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
+ lineTension: 0,
+ backgroundColor: 'transparent',
+ borderColor: '#007bff',
+ borderWidth: 4,
+ pointBackgroundColor: '#007bff'
+ }]
+ },
+ options: {
+ scales: {
+ yAxes: [{
+ ticks: {
+ beginAtZero: false
+ }
+ }]
+ },
+ legend: {
+ display: false,
+ }
+ }
+ });
+ </script>
</body>
</html>
--- /dev/null
+:root {
+ --input-padding-x: .75rem;
+ --input-padding-y: .75rem;
+}
+
+html,
+body {
+ height: 100%;
+}
+
+body {
+ display: -ms-flexbox;
+ display: -webkit-box;
+ display: flex;
+ -ms-flex-align: center;
+ -ms-flex-pack: center;
+ -webkit-box-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ justify-content: center;
+ padding-top: 40px;
+ padding-bottom: 40px;
+ background-color: #f5f5f5;
+}
+
+.form-signin {
+ width: 100%;
+ max-width: 420px;
+ padding: 15px;
+ margin: 0 auto;
+}
+
+.form-label-group {
+ position: relative;
+ margin-bottom: 1rem;
+}
+
+.form-label-group > input,
+.form-label-group > label {
+ padding: var(--input-padding-y) var(--input-padding-x);
+}
+
+.form-label-group > label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: block;
+ width: 100%;
+ margin-bottom: 0; /* Override default `<label>` margin */
+ line-height: 1.5;
+ color: #495057;
+ border: 1px solid transparent;
+ border-radius: .25rem;
+ transition: all .1s ease-in-out;
+}
+
+.form-label-group input::-webkit-input-placeholder {
+ color: transparent;
+}
+
+.form-label-group input:-ms-input-placeholder {
+ color: transparent;
+}
+
+.form-label-group input::-ms-input-placeholder {
+ color: transparent;
+}
+
+.form-label-group input::-moz-placeholder {
+ color: transparent;
+}
+
+.form-label-group input::placeholder {
+ color: transparent;
+}
+
+.form-label-group input:not(:placeholder-shown) {
+ padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
+ padding-bottom: calc(var(--input-padding-y) / 3);
+}
+
+.form-label-group input:not(:placeholder-shown) ~ label {
+ padding-top: calc(var(--input-padding-y) / 3);
+ padding-bottom: calc(var(--input-padding-y) / 3);
+ font-size: 12px;
+ color: #777;
+}
--- /dev/null
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="description" content="">
+ <meta name="author" content="">
+ <link rel="icon" href="../../../../favicon.ico">
+
+ <title>Floating labels example for Bootstrap</title>
+
+ <!-- Bootstrap core CSS -->
+ <link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
+
+ <!-- Custom styles for this template -->
+ <link href="floating-labels.css" rel="stylesheet">
+ </head>
+
+ <body>
+ <form class="form-signin">
+ <div class="text-center mb-4">
+ <img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
+ <h1 class="h3 mb-3 font-weight-normal">Floating labels</h1>
+ <p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, and Firefox.</a></p>
+ </div>
+
+ <div class="form-label-group">
+ <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
+ <label for="inputEmail">Email address</label>
+ </div>
+
+ <div class="form-label-group">
+ <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
+ <label for="inputPassword">Password</label>
+ </div>
+
+ <div class="checkbox mb-3">
+ <label>
+ <input type="checkbox" value="remember-me"> Remember me
+ </label>
+ </div>
+ <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
+ <p class="mt-5 mb-3 text-muted text-center">© 2017</p>
+ </form>
+ </body>
+</html>
--- /dev/null
+---
+layout: examples
+title: Examples
+description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
+redirect_from: "/examples/"
+---
+
+{% for entry in site.data.examples %}
+ <h2>{{ entry.category | capitalize }}</h2>
+ <p>{{ entry.description }}</p>
+ {% for example in entry.examples %}
+ {% if forloop.first %}<div class="row">{% endif %}
+ <div class="col-6 col-md-4 col-xl-3 mb-3">
+ <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/{{ example.name | slugify }}/">
+ <img class="img-thumbnail mb-3" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/{{ example.name | slugify }}.png" alt="{{ example.name }} screenshot" width="800" height="600">
+ <h5 class="mb-1">{{ example.name }}</h5>
+ </a>
+ <p class="text-muted">{{ example.description }}</p>
+ </div>
+ {% if forloop.last %}</div>{% endif %}
+ {% endfor %}
+{% endfor %}
+++ /dev/null
----
-layout: simple
-title: Examples
-description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
-redirect_from: "/examples/"
----
-
-[Download the Bootstrap source code]({{ site.download.source }}) to snag these examples.
-
-## Framework
-
-Examples that focus on implementing uses of built-in components provided by Bootstrap.
-
-<div class="row bd-examples">
- <div class="col-6 col-md-4">
- <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/starter-template/">
- <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/starter-template.png" alt="" width="800" height="600">
- <h4>Starter template</h4>
- </a>
- <p>Nothing but the basics: compiled CSS and JavaScript.</p>
- </div>
- <div class="col-6 col-md-4">
- <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/grid/">
- <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/grid.png" alt="" width="800" height="600">
- <h4>Grids</h4>
- </a>
- <p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
- </div>
- <div class="clearfix hidden-md-up"></div>
-
- <div class="col-6 col-md-4">
- <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/jumbotron/">
- <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/jumbotron.png" alt="" width="800" height="600">
- <h4>Jumbotron</h4>
- </a>
- <p>Build around the jumbotron with a navbar and some basic grid columns.</p>
- </div>
- <div class="col-6 col-md-4">
- <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/narrow-jumbotron/">
- <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/jumbotron-narrow.png" alt="" width="800" height="600">
- <h4>Narrow jumbotron</h4>
- </a>
- <p>Build a more custom page by narrowing the default container and jumbotron.</p>
- </div>
-</div>
-
-## Navbars
-
-Taking the default navbar component and showing how it can be moved, placed, and extended.
-
-<div class="row bd-examples">
- <div class="col-6 col-md-4">
- <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbars/">
- <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar.png" alt="" width="800" height="600">
- <h4>Navbar</h4>
- </a>
- <p>Super basic template that includes the navbar along with some additional content.</p>
- </div>
- <div class="col-6 col-md-4">
- <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbar-top/">
- <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar-static.png" alt="" width="800" height="600">
- <h4>Static top navbar</h4>
- </a>
- <p>Super basic template with a static top navbar along with some additional content.</p>
- </div>
- <div class="clearfix hidden-md-up"></div>
-
- <div class="col-6 col-md-4">
- <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbar-top-fixed/">
- <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar-fixed.png" alt="" width="800" height="600">
- <h4>Fixed navbar</h4>
- </a>
- <p>Super basic template with a fixed top navbar along with some additional content.</p>
- </div>
- <div class="col-6 col-md-4">
- <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbar-bottom/">
- <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar-bottom.png" alt="">
- <h4>Bottom navbar</h4>
- </a>
- <p>Super basic template with a bottom navbar along with some additional content.</p>
- </div>
-</div>
-
-## Custom components
-
-Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.
-
-<div class="row bd-examples">
- <div class="col-6 col-md-4">
- <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/album/">
- <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/album.png" alt="" width="800" height="600">
- <h4>Album</h4>
- </a>
- <p>Simple one-page template for photo galleries, portfolios, and more.</p>
- </div>
- <div class="col-6 col-md-4">
- <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/cover/">
- <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/cover.png" alt="" width="800" height="600">
- <h4>Cover</h4>
- </a>
- <p>A one-page template for building simple and beautiful home pages.</p>
- </div>
- <div class="clearfix hidden-md-up"></div>
-
- <div class="col-6 col-md-4">
- <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/carousel/">
- <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/carousel.png" alt="" width="800" height="600">
- <h4>Carousel</h4>
- </a>
- <p>Customize the navbar and carousel, then add some new components.</p>
- </div>
- <div class="col-6 col-md-4">
- <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/blog/">
- <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/blog.png" alt="" width="800" height="600">
- <h4>Blog</h4>
- </a>
- <p>Simple two-column blog layout with custom navigation, header, and type.</p>
- </div>
- <div class="clearfix hidden-md-up"></div>
-
- <div class="col-6 col-md-4">
- <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/dashboard/">
- <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/dashboard.png" alt="" width="800" height="600">
- <h4>Dashboard</h4>
- </a>
- <p>Basic admin dashboard shell with fixed sidebar and navbar.</p>
- </div>
- <div class="col-6 col-md-4">
- <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/signin/">
- <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/sign-in.png" alt="" width="800" height="600">
- <h4>Sign-in page</h4>
- </a>
- <p>Custom form layout and design for a simple sign in form.</p>
- </div>
- <div class="clearfix hidden-md-up"></div>
-
- <div class="col-6 col-md-4">
- <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/justified-nav/">
- <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/justified-nav.png" alt="" width="800" height="600">
- <h4>Justified nav</h4>
- </a>
- <p>Create a custom navbar with justified links. Heads up! Not too Safari friendly.</p>
- </div>
- <div class="col-6 col-md-4">
- <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/sticky-footer/">
- <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/sticky-footer.png" alt="" width="800" height="600">
- <h4>Sticky footer</h4>
- </a>
- <p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
- </div>
- <div class="clearfix hidden-md-up"></div>
-
- <div class="col-6 col-md-4">
- <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/sticky-footer-navbar/">
- <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/sticky-footer-navbar.png" alt="" width="800" height="600">
- <h4>Sticky footer w/ navbar</h4>
- </a>
- <p>Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
- </div>
-</div>
-
-## Experiments
-
-Examples that focus on future-friendly features or techniques.
-
-<div class="row bd-examples">
- <div class="col-6 col-md-4">
- <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/offcanvas/">
- <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/offcanvas.png" alt="" width="800" height="600">
- <h4>Offcanvas</h4>
- </a>
- <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
- </div>
-</div>
+++ /dev/null
-<!doctype html>
-<html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <meta name="description" content="">
- <meta name="author" content="">
- <link rel="icon" href="../../../../favicon.ico">
-
- <title>Justified Nav Template for Bootstrap</title>
-
- <!-- Bootstrap core CSS -->
- <link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
-
- <!-- Custom styles for this template -->
- <link href="justified-nav.css" rel="stylesheet">
- </head>
-
- <body>
-
- <div class="container">
-
- <header class="masthead">
- <h3 class="text-muted">Project name</h3>
-
- <nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3">
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarCollapse">
- <ul class="navbar-nav text-md-center nav-justified w-100">
- <li class="nav-item active">
- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Projects</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Services</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Downloads</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">About</a>
- </li>
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
- <div class="dropdown-menu" aria-labelledby="dropdown01">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <a class="dropdown-item" href="#">Something else here</a>
- </div>
- </li>
- </ul>
- </div>
- </nav>
- </header>
-
- <main role="main">
-
- <!-- Jumbotron -->
- <div class="jumbotron">
- <h1>Marketing stuff!</h1>
- <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
- <p><a class="btn btn-lg btn-success" href="#" role="button">Get started today</a></p>
- </div>
-
- <!-- Example row of columns -->
- <div class="row">
- <div class="col-lg-4">
- <h2>Heading</h2>
- <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
- <p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
- </div>
- <div class="col-lg-4">
- <h2>Heading</h2>
- <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
- <p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
- </div>
- <div class="col-lg-4">
- <h2>Heading</h2>
- <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
- <p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
- </div>
- </div>
-
- </main>
-
- <!-- Site footer -->
- <footer class="footer">
- <p>© Company 2017</p>
- </footer>
-
- </div> <!-- /container -->
-
- <!-- Bootstrap core JavaScript
- ================================================== -->
- <!-- Placed at the end of the document so the pages load faster -->
- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
- <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
- <script src="../../../../assets/js/vendor/popper.min.js"></script>
- <script src="../../../../dist/js/bootstrap.min.js"></script>
- </body>
-</html>
+++ /dev/null
-body {
- padding-top: 20px;
-}
-
-.footer {
- padding-top: 40px;
- padding-bottom: 40px;
- margin-top: 40px;
- border-top: 1px solid #eee;
-}
-
-/* Main marketing message and sign up button */
-.jumbotron {
- text-align: center;
- background-color: transparent;
-}
-.jumbotron .btn {
- padding: 14px 24px;
- font-size: 21px;
-}
-
-.navbar {
- background-image: linear-gradient(to bottom, #f7f7f7 0%, #eee 100%);
- border: 1px solid #e5e5e5;
-}
-
-@media (min-width: 768px) {
- .navbar-nav {
- display: -ms-flexbox;
- display: -webkit-box;
- display: flex;
- }
-
- .navbar-nav .nav-item {
- -ms-flex: 1 0 auto;
- -webkit-box-flex: 1;
- flex: 1 0 auto;
- }
-}
-
-/* Responsive: Portrait tablets and up */
-@media screen and (min-width: 768px) {
- /* Remove the padding we set earlier */
- .masthead,
- .marketing,
- .footer {
- padding-right: 0;
- padding-left: 0;
- }
-}
+++ /dev/null
-<!doctype html>
-<html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <meta name="description" content="">
- <meta name="author" content="">
- <link rel="icon" href="../../../../favicon.ico">
-
- <title>Narrow Jumbotron Template for Bootstrap</title>
-
- <!-- Bootstrap core CSS -->
- <link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
-
- <!-- Custom styles for this template -->
- <link href="narrow-jumbotron.css" rel="stylesheet">
- </head>
-
- <body>
-
- <div class="container">
- <header class="header clearfix">
- <nav>
- <ul class="nav nav-pills float-right">
- <li class="nav-item">
- <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">About</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Contact</a>
- </li>
- </ul>
- </nav>
- <h3 class="text-muted">Project name</h3>
- </header>
-
- <main role="main">
-
- <div class="jumbotron">
- <h1 class="display-3">Jumbotron heading</h1>
- <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
- <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
- </div>
-
- <div class="row marketing">
- <div class="col-lg-6">
- <h4>Subheading</h4>
- <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
-
- <h4>Subheading</h4>
- <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
-
- <h4>Subheading</h4>
- <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
- </div>
-
- <div class="col-lg-6">
- <h4>Subheading</h4>
- <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
-
- <h4>Subheading</h4>
- <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
-
- <h4>Subheading</h4>
- <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
- </div>
- </div>
-
- </main>
-
- <footer class="footer">
- <p>© Company 2017</p>
- </footer>
-
- </div> <!-- /container -->
- </body>
-</html>
+++ /dev/null
-/* Space out content a bit */
-body {
- padding-top: 1.5rem;
- padding-bottom: 1.5rem;
-}
-
-/* Everything but the jumbotron gets side spacing for mobile first views */
-.header,
-.marketing,
-.footer {
- padding-right: 1rem;
- padding-left: 1rem;
-}
-
-/* Custom page header */
-.header {
- padding-bottom: 1rem;
- border-bottom: .05rem solid #e5e5e5;
-}
-
-/* Make the masthead heading the same height as the navigation */
-.header h3 {
- margin-top: 0;
- margin-bottom: 0;
- line-height: 3rem;
-}
-
-/* Custom page footer */
-.footer {
- padding-top: 1.5rem;
- color: #777;
- border-top: .05rem solid #e5e5e5;
-}
-
-/* Customize container */
-@media (min-width: 48em) {
- .container {
- max-width: 46rem;
- }
-}
-.container-narrow > hr {
- margin: 2rem 0;
-}
-
-/* Main marketing message and sign up button */
-.jumbotron {
- text-align: center;
- border-bottom: .05rem solid #e5e5e5;
-}
-.jumbotron .btn {
- padding: .75rem 1.5rem;
- font-size: 1.5rem;
-}
-
-/* Supporting marketing content */
-.marketing {
- margin: 3rem 0;
-}
-.marketing p + h4 {
- margin-top: 1.5rem;
-}
-
-/* Responsive: Portrait tablets and up */
-@media screen and (min-width: 48em) {
- /* Remove the padding we set earlier */
- .header,
- .marketing,
- .footer {
- padding-right: 0;
- padding-left: 0;
- }
-
- /* Space out the masthead */
- .header {
- margin-bottom: 2rem;
- }
-
- /* Remove the bottom border on the jumbotron for visual effect */
- .jumbotron {
- border-bottom: 0;
- }
-}
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
- <title>Off Canvas Template for Bootstrap</title>
+ <title>Offcanvas template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<link href="offcanvas.css" rel="stylesheet">
</head>
- <body>
+ <body class="bg-light">
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
- <a class="navbar-brand" href="#">Navbar</a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+ <a class="navbar-brand" href="#">Offcanvas navbar</a>
+ <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+ <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+ <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
- <a class="nav-link" href="#">Link</a>
+ <a class="nav-link" href="#">Notifications</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled" href="#">Disabled</a>
+ <a class="nav-link" href="#">Profile</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Switch account</a>
</li>
<li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+ <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</nav>
- <main role="main" class="container">
+ <div class="nav-scroller bg-white box-shadow">
+ <nav class="nav nav-underline">
+ <a class="nav-link active" href="#">Dashboard</a>
+ <a class="nav-link" href="#">
+ Friends
+ <span class="badge badge-pill bg-light align-text-bottom">27</span>
+ </a>
+ <a class="nav-link" href="#">Explore</a>
+ <a class="nav-link" href="#">Suggestions</a>
+ <a class="nav-link" href="#">Link</a>
+ <a class="nav-link" href="#">Link</a>
+ <a class="nav-link" href="#">Link</a>
+ <a class="nav-link" href="#">Link</a>
+ <a class="nav-link" href="#">Link</a>
+ </nav>
+ </div>
- <div class="row row-offcanvas row-offcanvas-right">
+ <main role="main" class="container">
+ <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
+ <img class="mr-3" src="https://getbootstrap.com/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
+ <div class="lh-100">
+ <h6 class="mb-0 text-white lh-100">Bootstrap</h6>
+ <small>Since 2011</small>
+ </div>
+ </div>
- <div class="col-12 col-md-9">
- <p class="float-right d-md-none">
- <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
+ <div class="my-3 p-3 bg-white rounded box-shadow">
+ <h6 class="border-bottom border-gray pb-2 mb-0">Recent updates</h6>
+ <div class="media text-muted pt-3">
+ <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
+ <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
+ <strong class="d-block text-gray-dark">@username</strong>
+ Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>
- <div class="jumbotron">
- <h1>Hello, world!</h1>
- <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
- </div>
- <div class="row">
- <div class="col-6 col-lg-4">
- <h2>Heading</h2>
- <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
- <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
- </div><!--/span-->
- <div class="col-6 col-lg-4">
- <h2>Heading</h2>
- <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
- <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
- </div><!--/span-->
- <div class="col-6 col-lg-4">
- <h2>Heading</h2>
- <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
- <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
- </div><!--/span-->
- <div class="col-6 col-lg-4">
- <h2>Heading</h2>
- <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
- <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
- </div><!--/span-->
- <div class="col-6 col-lg-4">
- <h2>Heading</h2>
- <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
- <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
- </div><!--/span-->
- <div class="col-6 col-lg-4">
- <h2>Heading</h2>
- <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
- <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
- </div><!--/span-->
- </div><!--/row-->
- </div><!--/span-->
+ </div>
+ <div class="media text-muted pt-3">
+ <img data-src="holder.js/32x32?theme=thumb&bg=e83e8c&fg=e83e8c&size=1" alt="" class="mr-2 rounded">
+ <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
+ <strong class="d-block text-gray-dark">@username</strong>
+ Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+ </p>
+ </div>
+ <div class="media text-muted pt-3">
+ <img data-src="holder.js/32x32?theme=thumb&bg=6f42c1&fg=6f42c1&size=1" alt="" class="mr-2 rounded">
+ <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
+ <strong class="d-block text-gray-dark">@username</strong>
+ Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+ </p>
+ </div>
+ <small class="d-block text-right mt-3">
+ <a href="#">All updates</a>
+ </small>
+ </div>
- <div class="col-6 col-md-3 sidebar-offcanvas" id="sidebar">
- <div class="list-group">
- <a href="#" class="list-group-item active">Link</a>
- <a href="#" class="list-group-item">Link</a>
- <a href="#" class="list-group-item">Link</a>
- <a href="#" class="list-group-item">Link</a>
- <a href="#" class="list-group-item">Link</a>
- <a href="#" class="list-group-item">Link</a>
- <a href="#" class="list-group-item">Link</a>
- <a href="#" class="list-group-item">Link</a>
- <a href="#" class="list-group-item">Link</a>
- <a href="#" class="list-group-item">Link</a>
+ <div class="my-3 p-3 bg-white rounded box-shadow">
+ <h6 class="border-bottom border-gray pb-2 mb-0">Suggestions</h6>
+ <div class="media text-muted pt-3">
+ <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
+ <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
+ <div class="d-flex justify-content-between align-items-center w-100">
+ <strong class="text-gray-dark">Full Name</strong>
+ <a href="#">Follow</a>
+ </div>
+ <span class="d-block">@username</span>
</div>
- </div><!--/span-->
- </div><!--/row-->
-
- <hr>
-
- </main><!--/.container-->
-
- <footer>
- <p>© Company 2017</p>
- </footer>
+ </div>
+ <div class="media text-muted pt-3">
+ <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
+ <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
+ <div class="d-flex justify-content-between align-items-center w-100">
+ <strong class="text-gray-dark">Full Name</strong>
+ <a href="#">Follow</a>
+ </div>
+ <span class="d-block">@username</span>
+ </div>
+ </div>
+ <div class="media text-muted pt-3">
+ <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
+ <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
+ <div class="d-flex justify-content-between align-items-center w-100">
+ <strong class="text-gray-dark">Full Name</strong>
+ <a href="#">Follow</a>
+ </div>
+ <span class="d-block">@username</span>
+ </div>
+ </div>
+ <small class="d-block text-right mt-3">
+ <a href="#">All suggestions</a>
+ </small>
+ </div>
+ </main>
<!-- Bootstrap core JavaScript
================================================== -->
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
+ <script src="../../../../assets/js/vendor/holder.min.js"></script>
<script src="offcanvas.js"></script>
</body>
</html>
-/*
- * Style tweaks
- * --------------------------------------------------
- */
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
+
body {
- padding-top: 70px;
-}
-footer {
- padding: 30px 0;
+ padding-top: 56px;
}
-/*
- * Off Canvas
- * --------------------------------------------------
- */
-@media screen and (max-width: 767.98px) {
- .row-offcanvas {
- position: relative;
- transition: all .25s ease-out;
+@media (max-width: 767.98px) {
+ .offcanvas-collapse {
+ position: fixed;
+ top: 56px; /* Height of navbar */
+ bottom: 0;
+ width: 100%;
+ padding-right: 1rem;
+ padding-left: 1rem;
+ overflow-y: auto;
+ background-color: var(--gray-dark);
+ transition: -webkit-transform .3s ease-in-out;
+ transition: transform .3s ease-in-out;
+ transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
+ -webkit-transform: translateX(100%);
+ transform: translateX(100%);
}
-
- .row-offcanvas-right {
- right: 0;
+ .offcanvas-collapse.open {
+ -webkit-transform: translateX(-1rem);
+ transform: translateX(-1rem); /* Account for horizontal padding on navbar */
}
+}
- .row-offcanvas-left {
- left: 0;
- }
+.nav-scroller {
+ position: relative;
+ z-index: 2;
+ height: 2.75rem;
+ overflow-y: hidden;
+}
- .row-offcanvas-right .sidebar-offcanvas {
- right: -100%; /* 12 columns */
- }
+.nav-scroller .nav {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ padding-bottom: 1rem;
+ margin-top: -1px;
+ overflow-x: auto;
+ color: rgba(255, 255, 255, .75);
+ text-align: center;
+ white-space: nowrap;
+ -webkit-overflow-scrolling: touch;
+}
- .row-offcanvas-right.active .sidebar-offcanvas {
- right: -50%; /* 6 columns */
- }
+.nav-underline .nav-link {
+ padding-top: .75rem;
+ padding-bottom: .75rem;
+ font-size: .875rem;
+ color: var(--secondary);
+}
- .row-offcanvas-left .sidebar-offcanvas {
- left: -100%; /* 12 columns */
- }
+.nav-underline .nav-link:hover {
+ color: var(--blue);
+}
- .row-offcanvas-left.active .sidebar-offcanvas {
- left: -50%; /* 6 columns */
- }
+.nav-underline .active {
+ font-weight: 500;
+ color: var(--gray-dark);
+}
- .row-offcanvas-right.active {
- right: 50%; /* 6 columns */
- }
+.text-white-50 { color: rgba(255, 255, 255, .5); }
- .row-offcanvas-left.active {
- left: 50%; /* 6 columns */
- }
+.bg-purple { background-color: var(--purple); }
- .sidebar-offcanvas {
- position: absolute;
- top: 0;
- width: 50%; /* 6 columns */
- }
-}
+.border-bottom { border-bottom: 1px solid #e5e5e5; }
+
+.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
+
+.lh-100 { line-height: 1; }
+.lh-125 { line-height: 1.25; }
+.lh-150 { line-height: 1.5; }
'use strict'
$('[data-toggle="offcanvas"]').on('click', function () {
- $('.row-offcanvas').toggleClass('active')
+ $('.offcanvas-collapse').toggleClass('open')
})
})
--- /dev/null
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="description" content="">
+ <meta name="author" content="">
+ <link rel="icon" href="../../../../favicon.ico">
+
+ <title>Pricing example for Bootstrap</title>
+
+ <!-- Bootstrap core CSS -->
+ <link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
+
+ <!-- Custom styles for this template -->
+ <link href="pricing.css" rel="stylesheet">
+ </head>
+
+ <body>
+
+ <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
+ <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
+ <nav class="my-2 my-md-0 mr-md-3">
+ <a class="p-2 text-dark" href="#">Features</a>
+ <a class="p-2 text-dark" href="#">Enterprise</a>
+ <a class="p-2 text-dark" href="#">Support</a>
+ <a class="p-2 text-dark" href="#">Pricing</a>
+ </nav>
+ <a class="btn btn-outline-primary" href="#">Sign up</a>
+ </div>
+
+ <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
+ <h1 class="display-4">Pricing</h1>
+ <p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.</p>
+ </div>
+
+ <div class="container">
+ <div class="card-deck mb-3 text-center">
+ <div class="card mb-4 box-shadow">
+ <div class="card-header">
+ <h4 class="my-0 font-weight-normal">Free</h4>
+ </div>
+ <div class="card-body">
+ <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
+ <ul class="list-unstyled mt-3 mb-4">
+ <li>10 users included</li>
+ <li>2 GB of storage</li>
+ <li>Email support</li>
+ <li>Help center access</li>
+ </ul>
+ <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
+ </div>
+ </div>
+ <div class="card mb-4 box-shadow">
+ <div class="card-header">
+ <h4 class="my-0 font-weight-normal">Pro</h4>
+ </div>
+ <div class="card-body">
+ <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
+ <ul class="list-unstyled mt-3 mb-4">
+ <li>20 users included</li>
+ <li>10 GB of storage</li>
+ <li>Priority email support</li>
+ <li>Help center access</li>
+ </ul>
+ <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
+ </div>
+ </div>
+ <div class="card mb-4 box-shadow">
+ <div class="card-header">
+ <h4 class="my-0 font-weight-normal">Enterprise</h4>
+ </div>
+ <div class="card-body">
+ <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
+ <ul class="list-unstyled mt-3 mb-4">
+ <li>30 users included</li>
+ <li>15 GB of storage</li>
+ <li>Phone and email support</li>
+ <li>Help center access</li>
+ </ul>
+ <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
+ </div>
+ </div>
+ </div>
+
+ <footer class="pt-4 my-md-5 pt-md-5 border-top">
+ <div class="row">
+ <div class="col-12 col-md">
+ <img class="mb-2" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
+ <small class="d-block mb-3 text-muted">© 2017</small>
+ </div>
+ <div class="col-6 col-md">
+ <h5>Features</h5>
+ <ul class="list-unstyled text-small">
+ <li><a class="text-muted" href="#">Cool stuff</a></li>
+ <li><a class="text-muted" href="#">Random feature</a></li>
+ <li><a class="text-muted" href="#">Team feature</a></li>
+ <li><a class="text-muted" href="#">Stuff for developers</a></li>
+ <li><a class="text-muted" href="#">Another one</a></li>
+ <li><a class="text-muted" href="#">Last time</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md">
+ <h5>Resources</h5>
+ <ul class="list-unstyled text-small">
+ <li><a class="text-muted" href="#">Resource</a></li>
+ <li><a class="text-muted" href="#">Resource name</a></li>
+ <li><a class="text-muted" href="#">Another resource</a></li>
+ <li><a class="text-muted" href="#">Final resource</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md">
+ <h5>About</h5>
+ <ul class="list-unstyled text-small">
+ <li><a class="text-muted" href="#">Team</a></li>
+ <li><a class="text-muted" href="#">Locations</a></li>
+ <li><a class="text-muted" href="#">Privacy</a></li>
+ <li><a class="text-muted" href="#">Terms</a></li>
+ </ul>
+ </div>
+ </div>
+ </footer>
+ </div>
+
+
+ <!-- Bootstrap core JavaScript
+ ================================================== -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
+ <script src="../../../../assets/js/vendor/popper.min.js"></script>
+ <script src="../../../../dist/js/bootstrap.min.js"></script>
+ <script src="../../../../assets/js/vendor/holder.min.js"></script>
+ <script>
+ Holder.addTheme('thumb', {
+ bg: '#55595c',
+ fg: '#eceeef',
+ text: 'Thumbnail'
+ });
+ </script>
+ </body>
+</html>
--- /dev/null
+html {
+ font-size: 14px;
+}
+@media (min-width: 768px) {
+ html {
+ font-size: 16px;
+ }
+}
+
+.container {
+ max-width: 960px;
+}
+
+.pricing-header {
+ max-width: 700px;
+}
+
+.card-deck .card {
+ min-width: 220px;
+}
+
+.border-top { border-top: 1px solid #e5e5e5; }
+.border-bottom { border-bottom: 1px solid #e5e5e5; }
+
+.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
--- /dev/null
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="description" content="">
+ <meta name="author" content="">
+ <link rel="icon" href="../../../../favicon.ico">
+
+ <title>Product example for Bootstrap</title>
+
+ <!-- Bootstrap core CSS -->
+ <link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
+
+ <!-- Custom styles for this template -->
+ <link href="product.css" rel="stylesheet">
+ </head>
+
+ <body>
+
+ <nav class="site-header sticky-top py-1">
+ <div class="container d-flex flex-column flex-md-row justify-content-between">
+ <a class="py-2" href="#">
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
+ </a>
+ <a class="py-2 d-none d-md-inline-block" href="#">Tour</a>
+ <a class="py-2 d-none d-md-inline-block" href="#">Product</a>
+ <a class="py-2 d-none d-md-inline-block" href="#">Features</a>
+ <a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a>
+ <a class="py-2 d-none d-md-inline-block" href="#">Support</a>
+ <a class="py-2 d-none d-md-inline-block" href="#">Pricing</a>
+ <a class="py-2 d-none d-md-inline-block" href="#">Cart</a>
+ </div>
+ </nav>
+
+ <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
+ <div class="col-md-5 p-lg-5 mx-auto my-5">
+ <h1 class="display-4 font-weight-normal">Punny headline</h1>
+ <p class="lead font-weight-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple's marketing pages.</p>
+ <a class="btn btn-outline-secondary" href="#">Coming soon</a>
+ </div>
+ <div class="product-device box-shadow d-none d-md-block"></div>
+ <div class="product-device product-device-2 box-shadow d-none d-md-block"></div>
+ </div>
+
+ <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
+ <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
+ <div class="my-3 py-3">
+ <h2 class="display-5">Another headline</h2>
+ <p class="lead">And an even wittier subheading.</p>
+ </div>
+ <div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+ </div>
+ <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+ <div class="my-3 p-3">
+ <h2 class="display-5">Another headline</h2>
+ <p class="lead">And an even wittier subheading.</p>
+ </div>
+ <div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+ </div>
+ </div>
+
+ <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
+ <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+ <div class="my-3 p-3">
+ <h2 class="display-5">Another headline</h2>
+ <p class="lead">And an even wittier subheading.</p>
+ </div>
+ <div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+ </div>
+ <div class="bg-primary mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
+ <div class="my-3 py-3">
+ <h2 class="display-5">Another headline</h2>
+ <p class="lead">And an even wittier subheading.</p>
+ </div>
+ <div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+ </div>
+ </div>
+
+ <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
+ <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+ <div class="my-3 p-3">
+ <h2 class="display-5">Another headline</h2>
+ <p class="lead">And an even wittier subheading.</p>
+ </div>
+ <div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+ </div>
+ <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+ <div class="my-3 py-3">
+ <h2 class="display-5">Another headline</h2>
+ <p class="lead">And an even wittier subheading.</p>
+ </div>
+ <div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+ </div>
+ </div>
+
+ <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
+ <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+ <div class="my-3 p-3">
+ <h2 class="display-5">Another headline</h2>
+ <p class="lead">And an even wittier subheading.</p>
+ </div>
+ <div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+ </div>
+ <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+ <div class="my-3 py-3">
+ <h2 class="display-5">Another headline</h2>
+ <p class="lead">And an even wittier subheading.</p>
+ </div>
+ <div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+ </div>
+ </div>
+
+ <footer class="container py-5">
+ <div class="row">
+ <div class="col-12 col-md">
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mb-2"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
+ <small class="d-block mb-3 text-muted">© 2017</small>
+ </div>
+ <div class="col-6 col-md">
+ <h5>Features</h5>
+ <ul class="list-unstyled text-small">
+ <li><a class="text-muted" href="#">Cool stuff</a></li>
+ <li><a class="text-muted" href="#">Random feature</a></li>
+ <li><a class="text-muted" href="#">Team feature</a></li>
+ <li><a class="text-muted" href="#">Stuff for developers</a></li>
+ <li><a class="text-muted" href="#">Another one</a></li>
+ <li><a class="text-muted" href="#">Last time</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md">
+ <h5>Resources</h5>
+ <ul class="list-unstyled text-small">
+ <li><a class="text-muted" href="#">Resource</a></li>
+ <li><a class="text-muted" href="#">Resource name</a></li>
+ <li><a class="text-muted" href="#">Another resource</a></li>
+ <li><a class="text-muted" href="#">Final resource</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md">
+ <h5>Resources</h5>
+ <ul class="list-unstyled text-small">
+ <li><a class="text-muted" href="#">Business</a></li>
+ <li><a class="text-muted" href="#">Education</a></li>
+ <li><a class="text-muted" href="#">Government</a></li>
+ <li><a class="text-muted" href="#">Gaming</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md">
+ <h5>About</h5>
+ <ul class="list-unstyled text-small">
+ <li><a class="text-muted" href="#">Team</a></li>
+ <li><a class="text-muted" href="#">Locations</a></li>
+ <li><a class="text-muted" href="#">Privacy</a></li>
+ <li><a class="text-muted" href="#">Terms</a></li>
+ </ul>
+ </div>
+ </div>
+ </footer>
+
+
+ <!-- Bootstrap core JavaScript
+ ================================================== -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+ <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
+ <script src="../../../../assets/js/vendor/popper.min.js"></script>
+ <script src="../../../../dist/js/bootstrap.min.js"></script>
+ <script src="../../../../assets/js/vendor/holder.min.js"></script>
+ <script>
+ Holder.addTheme('thumb', {
+ bg: '#55595c',
+ fg: '#eceeef',
+ text: 'Thumbnail'
+ });
+ </script>
+ </body>
+</html>
--- /dev/null
+.container {
+ max-width: 960px;
+}
+
+/*
+ * Custom translucent site header
+ */
+
+.site-header {
+ background-color: rgba(0, 0, 0, .85);
+ -webkit-backdrop-filter: saturate(180%) blur(20px);
+ backdrop-filter: saturate(180%) blur(20px);
+}
+.site-header a {
+ color: #999;
+ transition: ease-in-out color .15s;
+}
+.site-header a:hover {
+ color: #fff;
+ text-decoration: none;
+}
+
+/*
+ * Dummy devices (replace them with your own or something else entirely!)
+ */
+
+.product-device {
+ position: absolute;
+ right: 10%;
+ bottom: -30%;
+ width: 300px;
+ height: 540px;
+ background-color: #333;
+ border-radius: 21px;
+ -webkit-transform: rotate(30deg);
+ transform: rotate(30deg);
+}
+
+.product-device::before {
+ position: absolute;
+ top: 10%;
+ right: 10px;
+ bottom: 10%;
+ left: 10px;
+ content: "";
+ background-color: rgba(255, 255, 255, .1);
+ border-radius: 5px;
+}
+
+.product-device-2 {
+ top: -25%;
+ right: auto;
+ bottom: 0;
+ left: 5%;
+ background-color: #e5e5e5;
+}
+
+
+/*
+ * Extra utilities
+ */
+
+.border-top { border-top: 1px solid #e5e5e5; }
+.border-bottom { border-bottom: 1px solid #e5e5e5; }
+
+.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
+
+.flex-equal > * {
+ -ms-flex: 1;
+ -webkit-box-flex: 1;
+ flex: 1;
+}
+@media (min-width: 768px) {
+ .flex-md-equal > * {
+ -ms-flex: 1;
+ -webkit-box-flex: 1;
+ flex: 1;
+ }
+}
+
+.overflow-hidden { overflow: hidden; }
--- /dev/null
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="description" content="">
+ <meta name="author" content="">
+ <link rel="icon" href="../../../../favicon.ico">
+
+ <title>Signin Template for Bootstrap</title>
+
+ <!-- Bootstrap core CSS -->
+ <link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
+
+ <!-- Custom styles for this template -->
+ <link href="signin.css" rel="stylesheet">
+ </head>
+
+ <body class="text-center">
+ <form class="form-signin">
+ <img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
+ <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
+ <label for="inputEmail" class="sr-only">Email address</label>
+ <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
+ <label for="inputPassword" class="sr-only">Password</label>
+ <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
+ <div class="checkbox mb-3">
+ <label>
+ <input type="checkbox" value="remember-me"> Remember me
+ </label>
+ </div>
+ <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
+ <p class="mt-5 mb-3 text-muted">© 2017</p>
+ </form>
+ </body>
+</html>
+html,
body {
+ height: 100%;
+}
+
+body {
+ display: -ms-flexbox;
+ display: -webkit-box;
+ display: flex;
+ -ms-flex-align: center;
+ -ms-flex-pack: center;
+ -webkit-box-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
- background-color: #eee;
+ background-color: #f5f5f5;
}
.form-signin {
+ width: 100%;
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
-.form-signin .form-signin-heading,
-.form-signin .checkbox {
- margin-bottom: 10px;
-}
.form-signin .checkbox {
font-weight: 400;
}
+++ /dev/null
-<!doctype html>
-<html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <meta name="description" content="">
- <meta name="author" content="">
- <link rel="icon" href="../../../../favicon.ico">
-
- <title>Signin Template for Bootstrap</title>
-
- <!-- Bootstrap core CSS -->
- <link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
-
- <!-- Custom styles for this template -->
- <link href="signin.css" rel="stylesheet">
- </head>
-
- <body>
-
- <div class="container">
-
- <form class="form-signin">
- <h2 class="form-signin-heading">Please sign in</h2>
- <label for="inputEmail" class="sr-only">Email address</label>
- <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
- <label for="inputPassword" class="sr-only">Password</label>
- <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
- <div class="checkbox">
- <label>
- <input type="checkbox" value="remember-me"> Remember me
- </label>
- </div>
- <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
- </form>
-
- </div> <!-- /container -->
- </body>
-</html>
<!-- Begin page content -->
<main role="main" class="container">
- <div class="mt-3">
- <h1>Sticky footer with fixed navbar</h1>
- </div>
+ <h1 class="mt-5">Sticky footer with fixed navbar</h1>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
</main>
<!-- Begin page content -->
<main role="main" class="container">
- <div class="mt-1">
- <h1>Sticky footer</h1>
- </div>
+ <h1 class="mt-5">Sticky footer</h1>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</main>
projects / thirdparty / bootstrap.git / commitdiff
