From: Mark Otto <markdotto@gmail.com>
Date: Mon, 16 Jul 2018 05:51:47 +0000 (-0700)
Subject: Improve responsive table docs
X-Git-Tag: v4.1.3~15
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=28b9bc068f502f01db1209b14133e492de0f7b8e;p=thirdparty%2Fbootstrap.git

Improve responsive table docs

- Splits the examples with code snippets
- Adds note about possible broken visuals

Closes #25813
---

diff --git a/site/docs/4.1/content/tables.md b/site/docs/4.1/content/tables.md
index e3303666b3..8799d47f25 100644
--- a/site/docs/4.1/content/tables.md
+++ b/site/docs/4.1/content/tables.md
@@ -764,8 +764,10 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
 
 Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
 
-<div class="bd-example">
+**These tables may appear broken until their responsive styles apply at specific viewport widths.**
+
 {% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %}
+<div class="bd-example">
 <div class="table-responsive{{ bp.abbr }}">
   <table class="table">
     <thead>
@@ -818,15 +820,12 @@ Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables u
     </tbody>
   </table>
 </div>
-{% endunless %}{% endfor %}
 </div>
-
 {% highlight html %}
-{% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %}
 <div class="table-responsive{{ bp.abbr }}">
   <table class="table">
     ...
   </table>
 </div>
-{% endunless %}{% endfor %}
 {% endhighlight %}
+{% endunless %}{% endfor %}