diff --git a/docs/4.0/components/breadcrumb.md b/docs/4.0/components/breadcrumb.md
index 09ad731277..928ae101ff 100644
--- a/docs/4.0/components/breadcrumb.md
+++ b/docs/4.0/components/breadcrumb.md
@@ -10,7 +10,6 @@ group: components
 Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
 
 {% example html %}
-
 <nav aria-label="breadcrumb" role="navigation">
   <ol class="breadcrumb">
     <li class="breadcrumb-item active" aria-current="page">Home</li>
diff --git a/docs/4.0/components/navbar.md b/docs/4.0/components/navbar.md
index a40b68897b..76e09258f4 100644
--- a/docs/4.0/components/navbar.md
+++ b/docs/4.0/components/navbar.md
@@ -14,7 +14,7 @@ Here's what you need to know before getting started with the navbar:
 - Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
 - Use our [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) and [flex]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/) utility classes for controlling spacing and alignment within navbars.
 - Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
-- Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `.navbar`. See the [display]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/) utility class. 
+- Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `.navbar`. See the [display]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/) utility class.
 - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
 
 Read on for an example and list of supported sub-components.
diff --git a/docs/4.0/getting-started/javascript.md b/docs/4.0/getting-started/javascript.md
index a0094d154c..ed2d18bf9c 100644
--- a/docs/4.0/getting-started/javascript.md
+++ b/docs/4.0/getting-started/javascript.md
@@ -67,6 +67,7 @@ Each plugin also exposes its raw constructor on a `Constructor` property: `$.fn.
 All programmatic API methods are **asynchronous** and returns to the caller once the transition is started but **before it ends**.
 
 In order to execute an action once the transition is complete, you can listen to the corresponding event.
+
 {% highlight js %}
 $('#myCollapse').on('shown.bs.collapse', function (e) {
   // Action to execute once the collapsible area is expanded
@@ -74,6 +75,7 @@ $('#myCollapse').on('shown.bs.collapse', function (e) {
 {% endhighlight %}
 
 In addition a method call on a **transitioning component will be ignored**.
+
 {% highlight js %}
 $('#myCarousel').on('slid.bs.carousel', function (e) {
   $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
diff --git a/docs/4.0/getting-started/webpack.md b/docs/4.0/getting-started/webpack.md
index 04af8d4f63..082f835ad6 100644
--- a/docs/4.0/getting-started/webpack.md
+++ b/docs/4.0/getting-started/webpack.md
@@ -56,6 +56,7 @@ Notice that if you chose to **import plugins individually**, you must also insta
 To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project's bundling process.
 
 First, create your own `_custom.scss` and use it to override the [built-in custom variables]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/options/). Then, use your main sass file to import your custom variables, followed by Bootstrap:
+
 {% highlight scss %}
 @import "custom";
 @import "~bootstrap/scss/bootstrap";
diff --git a/docs/4.0/utilities/flex.md b/docs/4.0/utilities/flex.md
index 470a7db723..79a0e0618a 100644
--- a/docs/4.0/utilities/flex.md
+++ b/docs/4.0/utilities/flex.md
@@ -280,6 +280,7 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
     <div class="p-2 bd-highlight">Flex item</div>
   </div>
 </div>
+
 {% highlight html %}
 <div class="d-flex flex-nowrap">
   ...
@@ -305,6 +306,7 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
     <div class="p-2 bd-highlight">Flex item</div>
   </div>
 </div>
+
 {% highlight html %}
 <div class="d-flex flex-wrap">
   ...
@@ -330,6 +332,7 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
     <div class="p-2 bd-highlight">Flex item</div>
   </div>
 </div>
+
 {% highlight html %}
 <div class="d-flex flex-wrap-reverse">
   ...
@@ -337,9 +340,6 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
 {% endhighlight %}
 
 
-{% example html %}
-{% endexample %}
-
 Responsive variations also exist for `flex-wrap`.
 
 {% for bp in site.data.breakpoints %}
@@ -389,6 +389,7 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
     <div class="p-2 bd-highlight">Flex item</div>
   </div>
 </div>
+
 {% highlight html %}
 <div class="d-flex align-content-start flex-wrap">
   ...
@@ -414,6 +415,7 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
     <div class="p-2 bd-highlight">Flex item</div>
   </div>
 </div>
+
 {% highlight html %}
 <div class="d-flex align-content-end flex-wrap">...</div>
 {% endhighlight %}
@@ -437,6 +439,7 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
     <div class="p-2 bd-highlight">Flex item</div>
   </div>
 </div>
+
 {% highlight html %}
 <div class="d-flex align-content-center flex-wrap">...</div>
 {% endhighlight %}
@@ -460,6 +463,7 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
     <div class="p-2 bd-highlight">Flex item</div>
   </div>
 </div>
+
 {% highlight html %}
 <div class="d-flex align-content-between flex-wrap">...</div>
 {% endhighlight %}
@@ -483,6 +487,7 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
     <div class="p-2 bd-highlight">Flex item</div>
   </div>
 </div>
+
 {% highlight html %}
 <div class="d-flex align-content-around flex-wrap">...</div>
 {% endhighlight %}
@@ -506,6 +511,7 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
     <div class="p-2 bd-highlight">Flex item</div>
   </div>
 </div>
+
 {% highlight html %}
 <div class="d-flex align-content-stretch flex-wrap">...</div>
 {% endhighlight %}
diff --git a/docs/4.0/utilities/spacing.md b/docs/4.0/utilities/spacing.md
index 035a337afe..b374748e03 100644
--- a/docs/4.0/utilities/spacing.md
+++ b/docs/4.0/utilities/spacing.md
@@ -67,6 +67,7 @@ Here are some representative examples of these classes:
 {% endhighlight %}
 
 ### Horizontal centering
+
 Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a `width` set—by setting the horizontal margins to `auto`.
 
 <div class="bd-example">