Remove btn-block

twbs · Mar 11, 2020 · 8d2b57e · 8d2b57e
1 parent 2a2b0b5
commit 8d2b57e
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 29 deletions.
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -107,18 +107,3 @@
 .btn-sm {
   @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
 }
-
-
-//
-// Block button
-//
-
-.btn-block {
-  display: block;
-  width: 100%;
-
-  // Vertically space out multiple block buttons
-  + .btn-block {
-    margin-top: $btn-block-spacing-y;
-  }
-}
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -544,8 +544,6 @@ $btn-link-color:              $link-color !default;
 $btn-link-hover-color:        $link-hover-color !default;
 $btn-link-disabled-color:     $gray-600 !default;
 
-$btn-block-spacing-y:         .5rem !default;
-
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           $border-radius !default;
 $btn-border-radius-lg:        $border-radius-lg !default;

diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md
@@ -68,11 +68,56 @@ Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes
 <button type="button" class="btn btn-secondary btn-sm">Small button</button>
 {{< /example >}}
 
-Create block level buttons—those that span the full width of a parent—by adding `.btn-block`.
+## Layout
+
+Layout of buttons can be changed responsively using the grid system.
+
+{{< example >}}
+<button type="button" class="btn btn-primary col-12 col-sm-auto">Full width when extra small screen</button>
+{{< /example >}}
+
+<div class="bd-example">
+  <div class="row g-2">
+    <div class="col-md-auto">
+      <button type="button" class="btn btn-primary w-100">Full width when smaller screen</button>
+    </div>
+    <div class="col-md-auto">
+      <button type="button" class="btn btn-secondary w-100">Full width when smaller screen</button>
+    </div>
+  </div>
+</div>
+
+{{< highlight html >}}
+<!-- Use column width class -->
+<div class="row g-2">
+  <div class="col-md-auto">
+    <button type="button" class="btn btn-primary w-100">Full width when smaller screen</button>
+  </div>
+  <div class="col-md-auto">
+    <button type="button" class="btn btn-secondary w-100">Full width when smaller screen</button>
+  </div>
+</div>
+
+<!-- Use row columns class -->
+<div class="row row-cols-1 row-cols-md-auto g-2">
+  <div class="col">
+    <button type="button" class="btn btn-primary w-100">Full width when smaller screen</button>
+  </div>
+  <div class="col">
+    <button type="button" class="btn btn-secondary w-100">Full width when smaller screen</button>
+  </div>
+</div>
+{{< /highlight >}}
 
 {{< example >}}
-<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
-<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
+<div class="row g-2 justify-content-end">
+  <div class="col-6 col-md-2">
+    <button type="button" class="btn btn-outline-secondary w-100">Prev</button>
+  </div>
+  <div class="col-6 col-md-2">
+    <button type="button" class="btn btn-outline-secondary w-100">Next</button>
+  </div>
+</div>
 {{< /example >}}
 
 ## Active state

diff --git a/site/content/docs/4.3/components/collapse.md b/site/content/docs/4.3/components/collapse.md
@@ -78,7 +78,7 @@ Using the [card]({{< docsref "/components/card" >}}) component, you can extend t
   <div class="card">
     <div class="card-header" id="headingOne">
       <h2 class="mb-0">
-        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+        <button class="btn btn-link d-block w-100 text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
           Collapsible Group Item #1
         </button>
       </h2>
@@ -93,7 +93,7 @@ Using the [card]({{< docsref "/components/card" >}}) component, you can extend t
   <div class="card">
     <div class="card-header" id="headingTwo">
       <h2 class="mb-0">
-        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+        <button class="btn btn-link d-block w-100 text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
           Collapsible Group Item #2
         </button>
       </h2>
@@ -107,7 +107,7 @@ Using the [card]({{< docsref "/components/card" >}}) component, you can extend t
   <div class="card">
     <div class="card-header" id="headingThree">
       <h2 class="mb-0">
-        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+        <button class="btn btn-link d-block w-100 text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
           Collapsible Group Item #3
         </button>
       </h2>

diff --git a/site/content/docs/4.3/examples/checkout/index.html b/site/content/docs/4.3/examples/checkout/index.html
@@ -218,7 +218,7 @@ <h4 class="mb-3">Payment</h4>
 
         <hr class="my-4">
 
-        <button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
+        <button class="btn btn-primary btn-lg w-100" type="submit">Continue to checkout</button>
       </form>
     </div>
   </div>

diff --git a/site/content/docs/4.3/examples/floating-labels/index.html b/site/content/docs/4.3/examples/floating-labels/index.html
@@ -28,6 +28,6 @@ <h1 class="h3 mb-3 font-weight-normal">Floating labels</h1>
       <input type="checkbox" value="remember-me"> Remember me
     </label>
   </div>
-  <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
+  <button class="btn btn-lg btn-primary w-100" type="submit">Sign in</button>
   <p class="mt-5 mb-3 text-muted text-center">&copy; 2017-{{< year >}}</p>
 </form>
diff --git a/site/content/docs/4.3/examples/pricing/index.html b/site/content/docs/4.3/examples/pricing/index.html
@@ -36,7 +36,7 @@ <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</sma
           <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>
+        <button type="button" class="btn btn-lg btn-outline-primary d-block">Sign up for free</button>
       </div>
     </div>
     <div class="card mb-4 shadow-sm">
@@ -51,7 +51,7 @@ <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</sm
           <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>
+        <button type="button" class="btn btn-lg btn-primary d-block">Get started</button>
       </div>
     </div>
     <div class="card mb-4 shadow-sm">
@@ -66,7 +66,7 @@ <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</sm
           <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>
+        <button type="button" class="btn btn-lg btn-primary d-block">Contact us</button>
       </div>
     </div>
   </div>

diff --git a/site/content/docs/4.3/examples/sign-in/index.html b/site/content/docs/4.3/examples/sign-in/index.html
@@ -19,6 +19,6 @@ <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
       <input type="checkbox" value="remember-me"> Remember me
     </label>
   </div>
-  <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
+  <button class="btn btn-lg btn-primary w-100" type="submit">Sign in</button>
   <p class="mt-5 mb-3 text-muted">&copy; 2017-{{< year >}}</p>
 </form>
diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md
@@ -118,6 +118,10 @@ Badges were overhauled to better differentiate themselves from buttons and to be
 - **Todo:** Removed `.badge-pill` for the `.rounded-pill` utility class
 - **Todo:** Removed badge's hover and focus styles for `a.badge` and `button.badge`.
 
+### Buttons
+
+- Removed `.btn-block`, you can now use our grid system alternatively for button layouts.
+
 ### Cards
 
 - Removed the card columns in favor of a Masonry grid [See #28922](https://github.com/twbs/bootstrap/pull/28922).