diff options
13 files changed, 173 insertions, 124 deletions
diff --git a/site/content/docs/4.3/examples/album/index.html b/site/content/docs/4.3/examples/album/index.html index 748987e4a..05e80a032 100644 --- a/site/content/docs/4.3/examples/album/index.html +++ b/site/content/docs/4.3/examples/album/index.html @@ -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> diff --git a/site/content/docs/4.3/examples/blog/index.html b/site/content/docs/4.3/examples/blog/index.html index c41f7f9f6..4baee1942 100644 --- a/site/content/docs/4.3/examples/blog/index.html +++ b/site/content/docs/4.3/examples/blog/index.html @@ -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> diff --git a/site/content/docs/4.3/examples/carousel/index.html b/site/content/docs/4.3/examples/carousel/index.html index 3ce8367b8..2e824c4e0 100644 --- a/site/content/docs/4.3/examples/carousel/index.html +++ b/site/content/docs/4.3/examples/carousel/index.html @@ -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> diff --git a/site/content/docs/4.3/examples/checkout/index.html b/site/content/docs/4.3/examples/checkout/index.html index 204c95b6b..b351fda5c 100644 --- a/site/content/docs/4.3/examples/checkout/index.html +++ b/site/content/docs/4.3/examples/checkout/index.html @@ -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="[email protected]"> - <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="[email protected]"> + <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> diff --git a/site/content/docs/4.3/examples/grid/grid.css b/site/content/docs/4.3/examples/grid/grid.css index 8032c31c3..18e3568b1 100644 --- a/site/content/docs/4.3/examples/grid/grid.css +++ b/site/content/docs/4.3/examples/grid/grid.css @@ -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); } diff --git a/site/content/docs/4.3/examples/grid/index.html b/site/content/docs/4.3/examples/grid/index.html index 1440cb734..0d32279f3 100644 --- a/site/content/docs/4.3/examples/grid/index.html +++ b/site/content/docs/4.3/examples/grid/index.html @@ -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> diff --git a/site/content/docs/4.3/examples/navbar-bottom/index.html b/site/content/docs/4.3/examples/navbar-bottom/index.html index af8ffd53e..fadf35737 100644 --- a/site/content/docs/4.3/examples/navbar-bottom/index.html +++ b/site/content/docs/4.3/examples/navbar-bottom/index.html @@ -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> diff --git a/site/content/docs/4.3/examples/navbar-fixed/index.html b/site/content/docs/4.3/examples/navbar-fixed/index.html index a3e8a6768..382235645 100644 --- a/site/content/docs/4.3/examples/navbar-fixed/index.html +++ b/site/content/docs/4.3/examples/navbar-fixed/index.html @@ -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> diff --git a/site/content/docs/4.3/examples/navbar-static/index.html b/site/content/docs/4.3/examples/navbar-static/index.html index 07b36d37c..4043587f7 100644 --- a/site/content/docs/4.3/examples/navbar-static/index.html +++ b/site/content/docs/4.3/examples/navbar-static/index.html @@ -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> diff --git a/site/content/docs/4.3/examples/navbars/index.html b/site/content/docs/4.3/examples/navbars/index.html index 4879a96a8..ad2649cc3 100644 --- a/site/content/docs/4.3/examples/navbars/index.html +++ b/site/content/docs/4.3/examples/navbars/index.html @@ -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> diff --git a/site/content/docs/4.3/examples/offcanvas/index.html b/site/content/docs/4.3/examples/offcanvas/index.html index 442aa844e..bb26ffc58 100644 --- a/site/content/docs/4.3/examples/offcanvas/index.html +++ b/site/content/docs/4.3/examples/offcanvas/index.html @@ -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> diff --git a/site/content/docs/4.3/examples/starter-template/index.html b/site/content/docs/4.3/examples/starter-template/index.html index a53a033cc..91701691f 100644 --- a/site/content/docs/4.3/examples/starter-template/index.html +++ b/site/content/docs/4.3/examples/starter-template/index.html @@ -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> diff --git a/site/content/docs/4.3/examples/sticky-footer-navbar/index.html b/site/content/docs/4.3/examples/sticky-footer-navbar/index.html index 937fb8dc4..6620c6941 100644 --- a/site/content/docs/4.3/examples/sticky-footer-navbar/index.html +++ b/site/content/docs/4.3/examples/sticky-footer-navbar/index.html @@ -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> |