Update examples to the Bootstrap 5 grid
This commit is contained in:
Martijn Cuppens
parent
9daf36fdb7
commit
df8f64d195
|
|
@ -53,9 +53,9 @@ title: Album example
|
|||
<div class="album py-5 bg-light">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
||||
<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>
|
||||
|
|
@ -69,8 +69,8 @@ title: Album example
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
||||
<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>
|
||||
|
|
@ -84,8 +84,8 @@ title: Album example
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
||||
<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>
|
||||
|
|
@ -100,8 +100,8 @@ title: Album example
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
||||
<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>
|
||||
|
|
@ -115,8 +115,8 @@ title: Album example
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
||||
<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>
|
||||
|
|
@ -130,8 +130,8 @@ title: Album example
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
||||
<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>
|
||||
|
|
@ -146,8 +146,8 @@ title: Album example
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
||||
<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>
|
||||
|
|
@ -161,8 +161,8 @@ title: Album example
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
||||
<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>
|
||||
|
|
@ -176,8 +176,8 @@ title: Album example
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ include_js: false
|
|||
|
||||
<div class="row mb-2">
|
||||
<div class="col-md-6">
|
||||
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
|
||||
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
|
||||
<div class="col p-4 d-flex flex-column position-static">
|
||||
<strong class="d-inline-block mb-2 text-primary">World</strong>
|
||||
<h3 class="mb-0">Featured post</h3>
|
||||
|
|
@ -66,7 +66,7 @@ include_js: false
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
|
||||
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
|
||||
<div class="col p-4 d-flex flex-column position-static">
|
||||
<strong class="d-inline-block mb-2 text-success">Design</strong>
|
||||
<h3 class="mb-0">Post title</h3>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ extra_css:
|
|||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
|
|
@ -24,9 +24,9 @@ extra_css:
|
|||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</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 class="d-flex">
|
||||
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
layout: examples
|
||||
title: Checkout example
|
||||
extra_css:
|
||||
- "form-validation.css"
|
||||
- "form-validation.css"
|
||||
extra_js:
|
||||
- src: "form-validation.js"
|
||||
body_class: "bg-light"
|
||||
|
|
@ -15,8 +15,8 @@ body_class: "bg-light"
|
|||
<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">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-5 col-lg-4 order-md-last">
|
||||
<h4 class="d-flex justify-content-between align-items-center mb-3">
|
||||
<span class="text-muted">Your cart</span>
|
||||
<span class="badge bg-secondary rounded-pill">3</span>
|
||||
|
|
@ -65,62 +65,61 @@ body_class: "bg-light"
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-8 order-md-1">
|
||||
<div class="col-md-7 col-lg-8">
|
||||
<h4 class="mb-3">Billing address</h4>
|
||||
<form class="needs-validation" novalidate>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="row g-3">
|
||||
<div class="col-sm-6">
|
||||
<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">
|
||||
|
||||
<div class="col-sm-6">
|
||||
<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 w-100">
|
||||
Your username is required.
|
||||
<div class="col-12">
|
||||
<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 w-100">
|
||||
Your username is required.
|
||||
</div>
|
||||
</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 class="col-12">
|
||||
<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>
|
||||
|
||||
<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 class="col-12">
|
||||
<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>
|
||||
|
||||
<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="col-12">
|
||||
<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">
|
||||
<div class="col-md-5">
|
||||
<label for="country">Country</label>
|
||||
<select class="form-select" id="country" required>
|
||||
<option value="">Choose...</option>
|
||||
|
|
@ -130,7 +129,8 @@ body_class: "bg-light"
|
|||
Please select a valid country.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
|
||||
<div class="col-md-4">
|
||||
<label for="state">State</label>
|
||||
<select class="form-select" id="state" required>
|
||||
<option value="">Choose...</option>
|
||||
|
|
@ -140,7 +140,8 @@ body_class: "bg-light"
|
|||
Please provide a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
|
||||
<div class="col-md-3">
|
||||
<label for="zip">Zip</label>
|
||||
<input type="text" class="form-control" id="zip" placeholder="" required>
|
||||
<div class="invalid-feedback">
|
||||
|
|
@ -148,20 +149,24 @@ body_class: "bg-light"
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mb-4">
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="same-address">
|
||||
<label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="save-info">
|
||||
<label class="form-check-label" for="save-info">Save this information for next time</label>
|
||||
</div>
|
||||
<hr class="mb-4">
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<h4 class="mb-3">Payment</h4>
|
||||
|
||||
<div class="d-block my-3">
|
||||
<div class="my-3">
|
||||
<div class="form-check">
|
||||
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
|
||||
<label class="form-check-label" for="credit">Credit card</label>
|
||||
|
|
@ -175,8 +180,9 @@ body_class: "bg-light"
|
|||
<label class="form-check-label" for="paypal">PayPal</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
|
||||
<div class="row gy-3">
|
||||
<div class="col-md-6">
|
||||
<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>
|
||||
|
|
@ -184,23 +190,24 @@ body_class: "bg-light"
|
|||
Name on card is required
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
|
||||
<div class="col-md-6">
|
||||
<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">
|
||||
|
||||
<div class="col-md-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">
|
||||
|
||||
<div class="col-md-3">
|
||||
<label for="cc-cvv">CVV</label>
|
||||
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
|
||||
<div class="invalid-feedback">
|
||||
|
|
@ -208,7 +215,9 @@ body_class: "bg-light"
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mb-4">
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.themed-grid-col {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(86, 61, 124, .15);
|
||||
border: 1px solid rgba(86, 61, 124, .2);
|
||||
}
|
||||
|
||||
.themed-container {
|
||||
padding: 15px;
|
||||
margin-bottom: 30px;
|
||||
padding: .75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
background-color: rgba(0, 123, 255, .15);
|
||||
border: 1px solid rgba(0, 123, 255, .2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,6 +54,14 @@ include_js: false
|
|||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4">Three equal columns alternative</h2>
|
||||
<p>By using the <code>.row-cols-*</code> classes, you can easily create a grid with equal columns.</p>
|
||||
<div class="row row-cols-md-3 mb-3">
|
||||
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
|
||||
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
|
||||
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4">Three unequal columns</h2>
|
||||
<p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
|
||||
<div class="row mb-3">
|
||||
|
|
@ -124,9 +132,41 @@ include_js: false
|
|||
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<h2 class="mt-4">Gutters</h2>
|
||||
<p>With <code>.gx-*</code> classes, the horizontal gutters can be adjusted.</p>
|
||||
<div class="row row-cols-1 row-cols-md-3 gx-4">
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
</div>
|
||||
<p class="mt-4">Use the <code>.gy-*</code> classes to control the vertical gutters.</p>
|
||||
<div class="row row-cols-1 row-cols-md-3 gy-4">
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
</div>
|
||||
<p class="mt-4">With <code>.g-*</code> classes, the gutters in both directions can be adjusted.</p>
|
||||
<div class="row row-cols-1 row-cols-md-3 g-3">
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="containers">
|
||||
<hr class="my-4">
|
||||
|
||||
<h2 class="mt-4">Containers</h2>
|
||||
<p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ title: Bottom navbar example
|
|||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ extra_css:
|
|||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
|
|
@ -23,9 +23,9 @@ extra_css:
|
|||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</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 class="d-flex">
|
||||
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ extra_css:
|
|||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
|
|
@ -23,9 +23,9 @@ extra_css:
|
|||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</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 class="d-flex">
|
||||
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ extra_css:
|
|||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample01">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav mr-auto mb-2">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
|
|
@ -32,7 +32,7 @@ extra_css:
|
|||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -55,7 +55,7 @@ extra_css:
|
|||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -70,7 +70,7 @@ extra_css:
|
|||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample03">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-sm-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
|
|
@ -89,7 +89,7 @@ extra_css:
|
|||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -104,7 +104,7 @@ extra_css:
|
|||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample04">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
|
|
@ -123,7 +123,7 @@ extra_css:
|
|||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -138,7 +138,7 @@ extra_css:
|
|||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample05">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
|
|
@ -157,7 +157,7 @@ extra_css:
|
|||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -172,7 +172,7 @@ extra_css:
|
|||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample06">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-xl-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
|
|
@ -191,7 +191,7 @@ extra_css:
|
|||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -206,7 +206,7 @@ extra_css:
|
|||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample07">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
|
|
@ -225,7 +225,7 @@ extra_css:
|
|||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -240,7 +240,7 @@ extra_css:
|
|||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample07XL">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
|
|
@ -259,7 +259,7 @@ extra_css:
|
|||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -309,7 +309,7 @@ extra_css:
|
|||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample09">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
|
|
@ -328,7 +328,7 @@ extra_css:
|
|||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ body_class: "bg-light"
|
|||
</button>
|
||||
|
||||
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Dashboard</a>
|
||||
</li>
|
||||
|
|
@ -38,9 +38,9 @@ body_class: "bg-light"
|
|||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-lg-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 class="d-flex">
|
||||
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -73,24 +73,24 @@ body_class: "bg-light"
|
|||
</div>
|
||||
|
||||
<div class="my-3 p-3 bg-white rounded shadow-sm">
|
||||
<h6 class="border-bottom border-gray pb-2 mb-0">Recent updates</h6>
|
||||
<h6 class="border-bottom pb-2 mb-0">Recent updates</h6>
|
||||
<div class="d-flex text-muted pt-3">
|
||||
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
|
||||
<p class="pb-3 mb-0 small lh-sm border-bottom border-gray">
|
||||
<p class="pb-3 mb-0 small lh-sm border-bottom">
|
||||
<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="d-flex text-muted pt-3">
|
||||
{{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 mr-2 rounded" >}}
|
||||
<p class="pb-3 mb-0 small lh-sm border-bottom border-gray">
|
||||
<p class="pb-3 mb-0 small lh-sm border-bottom">
|
||||
<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="d-flex text-muted pt-3">
|
||||
{{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 mr-2 rounded" >}}
|
||||
<p class="pb-3 mb-0 small lh-sm border-bottom border-gray">
|
||||
<p class="pb-3 mb-0 small lh-sm border-bottom">
|
||||
<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>
|
||||
|
|
@ -101,10 +101,10 @@ body_class: "bg-light"
|
|||
</div>
|
||||
|
||||
<div class="my-3 p-3 bg-white rounded shadow-sm">
|
||||
<h6 class="border-bottom border-gray pb-2 mb-0">Suggestions</h6>
|
||||
<h6 class="border-bottom pb-2 mb-0">Suggestions</h6>
|
||||
<div class="d-flex text-muted pt-3">
|
||||
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
|
||||
<div class="pb-3 mb-0 small lh-sm border-bottom border-gray w-100">
|
||||
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
|
||||
<div class="d-flex justify-content-between">
|
||||
<strong class="text-gray-dark">Full Name</strong>
|
||||
<a href="#">Follow</a>
|
||||
|
|
@ -114,7 +114,7 @@ body_class: "bg-light"
|
|||
</div>
|
||||
<div class="d-flex text-muted pt-3">
|
||||
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
|
||||
<div class="pb-3 mb-0 small lh-sm border-bottom border-gray w-100">
|
||||
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
|
||||
<div class="d-flex justify-content-between">
|
||||
<strong class="text-gray-dark">Full Name</strong>
|
||||
<a href="#">Follow</a>
|
||||
|
|
@ -124,7 +124,7 @@ body_class: "bg-light"
|
|||
</div>
|
||||
<div class="d-flex text-muted pt-3">
|
||||
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
|
||||
<div class="pb-3 mb-0 small lh-sm border-bottom border-gray w-100">
|
||||
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
|
||||
<div class="d-flex justify-content-between">
|
||||
<strong class="text-gray-dark">Full Name</strong>
|
||||
<a href="#">Follow</a>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ extra_css:
|
|||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
|
|
@ -32,9 +32,9 @@ extra_css:
|
|||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-lg-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
|
||||
<form class="d-flex">
|
||||
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ body_class: "d-flex flex-column h-100"
|
|||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<ul class="navbar-nav mr-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
|
|
@ -27,9 +27,9 @@ body_class: "d-flex flex-column h-100"
|
|||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</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 class="d-flex">
|
||||
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue