changes the order of the close btn on alerts to improve accecibility

diff --git a/docs/4.0/components/alerts.md b/docs/4.0/components/alerts.md
index 90c146362e36b5758c55bc29d0bd9bcf13b9ebf5..b8bb0c2168ef3f854de1a2de0c23a075caa2ad31 100644 (file)
--- a/docs/4.0/components/alerts.md
+++ b/docs/4.0/components/alerts.md
@@ -59,10 +59,10 @@ You can see this in action with a live demo:
 
 {% example html %}
 <div class="alert alert-warning alert-dismissible fade show" role="alert">
+  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
   <button type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true">&times;</span>
   </button>
-  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
 </div>
 {% endexample %}
 

diff --git a/scss/_alert.scss b/scss/_alert.scss
index 3dfd13f56ac14e29dc3db9995a2bcb134bfe387a..66fba24ead2b33a4844c5884fee8dca10ff727f5 100644 (file)
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -3,6 +3,7 @@
 //
 
 .alert {
+  position: relative;
   padding: $alert-padding-y $alert-padding-x;
   margin-bottom: $alert-margin-bottom;
   border: $alert-border-width solid transparent;
@@ -28,9 +29,9 @@
 .alert-dismissible {
   // Adjust close link position
   .close {
-    position: relative;
-    top: -$alert-padding-y;
-    right: -$alert-padding-x;
+    position: absolute;
+    top: 0;
+    right: 0;
     padding: $alert-padding-y $alert-padding-x;
     color: inherit;
   }