aboutsummaryrefslogtreecommitdiff
path: root/css.html
diff options
context:
space:
mode:
authorElvis Ratzlaff <[email protected]>2013-08-19 03:14:38 -0400
committerElvis Ratzlaff <[email protected]>2013-08-19 03:14:38 -0400
commit7818c5e1868de501e2686ed1ff734c6f337bba79 (patch)
tree6051975a91207fefe9d322a8a34144e878ac220e /css.html
parent988c03d4621b921ea3bf17eb358b65eab4f1a627 (diff)
downloadbootstrap-7818c5e1868de501e2686ed1ff734c6f337bba79.tar.xz
bootstrap-7818c5e1868de501e2686ed1ff734c6f337bba79.zip
Add Test case to documentation
Diffstat (limited to 'css.html')
-rw-r--r--css.html56
1 files changed, 56 insertions, 0 deletions
diff --git a/css.html b/css.html
index 5dcf17c9f..e6a48ad40 100644
--- a/css.html
+++ b/css.html
@@ -2254,6 +2254,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<span class="visible-lg">&#10004; Visible on large</span>
</div>
</div>
+ <div class="row responsive-utilities-test hidden-on">
+ <div class="col-xs-6 col-sm-6">
+ <span class="hidden-xs hidden-sm">Extra small and small</span>
+ <span class="visible-xs visible-sm">&#10004; Visible on x-small and small</span>
+ </div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="hidden-md hidden-lg">Medium and large</span>
+ <span class="visible-md visible-lg">&#10004; Visible on medium and large</span>
+ </div>
+ <div class="clearfix visible-xs"></div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="hidden-xs hidden-md">Extra small and medium</span>
+ <span class="visible-xs visible-md">&#10004; Visible on x-small and medium</span>
+ </div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="hidden-sm hidden-lg">Small and large</span>
+ <span class="visible-sm visible-lg">&#10004; Visible on small and large</span>
+ </div>
+ <div class="clearfix visible-xs"></div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="hidden-xs hidden-lg">Extra small and large</span>
+ <span class="visible-xs visible-lg">&#10004; Visible on x-small and large</span>
+ </div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="hidden-sm hidden-md">Small and medium</span>
+ <span class="visible-sm visible-md">&#10004; Visible on small and medium</span>
+ </div>
+ </div>
<h4>Hidden on...</h4>
<p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p>
<div class="row responsive-utilities-test hidden-on">
@@ -2275,5 +2303,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<span class="hidden-lg">&#10004; Hidden on large</span>
</div>
</div>
+ <div class="row responsive-utilities-test hidden-on">
+ <div class="col-xs-6 col-sm-6">
+ <span class="visible-xs visible-sm">Extra small and small</span>
+ <span class="hidden-xs hidden-sm">&#10004; Hidden on x-small and small</span>
+ </div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="visible-md visible-lg">Medium and large</span>
+ <span class="hidden-md hidden-lg">&#10004; Hidden on medium and large</span>
+ </div>
+ <div class="clearfix visible-xs"></div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="visible-xs visible-md">Extra small and medium</span>
+ <span class="hidden-xs hidden-md">&#10004; Hidden on x-small and medium</span>
+ </div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="visible-sm visible-lg">Small and large</span>
+ <span class="hidden-sm hidden-lg">&#10004; Hidden on small and large</span>
+ </div>
+ <div class="clearfix visible-xs"></div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="visible-xs visible-lg">Extra small and large</span>
+ <span class="hidden-xs hidden-lg">&#10004; Hidden on x-small and large</span>
+ </div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="visible-sm visible-md">Small and medium</span>
+ <span class="hidden-sm hidden-md">&#10004; Hidden on small and medium</span>
+ </div>
+ </div>
</div>