Restyle code element, remove docs example overflow, improve docs examples (#25054)

* Restyle code element, clean up variables

- Removes the padding and background-color
- Changes the color to a brand color ()
- Add new variables to kbd element styles to account for removing the code ones
- Remove overrides that were needed previously

* only break between words, and override it in the pre

* make file inputs 100% wide

* scope custom file changes in input group for sizing

* shorter button labels for responsive

* narrower cards

* button was too wide

* downsize

* fewer links in pagination

* redo cell text

* improve overflow docs

docs/4.0/components/jumbotron.md

@@ -9,7 +9,7 @@ A lightweight, flexible component that can optionally extend the entire viewport
 
 {% example html %}
 <div class="jumbotron">
-  <h1 class="display-3">Hello, world!</h1>
+  <h1 class="display-4">Hello, world!</h1>
   <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
   <hr class="my-4">
   <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
@@ -24,7 +24,7 @@ To make the jumbotron full width, and without rounded corners, add the `.jumbotr
 {% example html %}
 <div class="jumbotron jumbotron-fluid">
   <div class="container">
-    <h1 class="display-3">Fluid jumbotron</h1>
+    <h1 class="display-4">Fluid jumbotron</h1>
     <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
   </div>
 </div>