mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-30 15:24:08 +03:00
Code Activity

Remove 'xs' from text utilities (#21217)

Browse Source
This commit is contained in:
Starsam80
2016-11-26 21:33:46 -07:00
committed by Mark Otto
parent eb5ad730ee
commit b1e8d60348
11 changed files with 52 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/card.md
+19 -19
View File
@@ -151,13 +151,13 @@ You can quickly change the text alignment of any card—in its entirety or speci
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card card-block text-xs-center">
<div class="card card-block text-center">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card card-block text-xs-right">
<div class="card card-block text-right">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
@@ -209,7 +209,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
{% endexample %}
{% example html %}
<div class="card text-xs-center">
<div class="card text-center">
<div class="card-header">
Featured
</div>
@@ -229,7 +229,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
Use Bootstrap's nav pills or tabs within a card header. Be sure to always include a `.float-*-*` utility class for proper alignment.
{% example html %}
<div class="card text-xs-center">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs float-left">
<li class="nav-item">
@@ -252,7 +252,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
{% endexample %}
{% example html %}
<div class="card text-xs-center">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills float-left">
<li class="nav-item">
@@ -333,7 +333,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.**
{% example html %}
<div class="card card-inverse card-primary text-xs-center">
<div class="card card-inverse card-primary text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -341,7 +341,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote>
</div>
</div>
<div class="card card-inverse card-success text-xs-center">
<div class="card card-inverse card-success text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -349,7 +349,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote>
</div>
</div>
<div class="card card-inverse card-info text-xs-center">
<div class="card card-inverse card-info text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -357,7 +357,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote>
</div>
</div>
<div class="card card-inverse card-warning text-xs-center">
<div class="card card-inverse card-warning text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -365,7 +365,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote>
</div>
</div>
<div class="card card-inverse card-danger text-xs-center">
<div class="card card-inverse card-danger text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -383,7 +383,7 @@ Cards include their own variant classes for quickly changing the `background-col
In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card.
{% example html %}
<div class="card card-outline-primary text-xs-center">
<div class="card card-outline-primary text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -391,7 +391,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote>
</div>
</div>
<div class="card card-outline-secondary text-xs-center">
<div class="card card-outline-secondary text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -399,7 +399,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote>
</div>
</div>
<div class="card card-outline-success text-xs-center">
<div class="card card-outline-success text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -407,7 +407,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote>
</div>
</div>
<div class="card card-outline-info text-xs-center">
<div class="card card-outline-info text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -415,7 +415,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote>
</div>
</div>
<div class="card card-outline-warning text-xs-center">
<div class="card card-outline-warning text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -423,7 +423,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote>
</div>
</div>
<div class="card card-outline-danger text-xs-center">
<div class="card card-outline-danger text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -542,7 +542,7 @@ Only applies to small devices and above.
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card card-block card-inverse card-primary text-xs-center">
<div class="card card-block card-inverse card-primary text-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer>
@@ -552,7 +552,7 @@ Only applies to small devices and above.
</footer>
</blockquote>
</div>
<div class="card card-block text-xs-center">
<div class="card card-block text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
@@ -560,7 +560,7 @@ Only applies to small devices and above.
<div class="card">
<img class="card-img img-fluid" data-src="holder.js/100px260/" alt="Card image">
</div>
<div class="card card-block text-xs-right">
<div class="card card-block text-right">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
docs/components/progress.md
+6 -6
View File
@@ -18,19 +18,19 @@ To caption a progress bar, simply add a `<div>` with your caption text, [align t
{% example html %}
<div class="text-xs-center" id="example-caption-1">Reticulating splines&hellip; 0%</div>
<div class="text-center" id="example-caption-1">Reticulating splines&hellip; 0%</div>
<progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress>
<div class="text-xs-center" id="example-caption-2">Reticulating splines&hellip; 25%</div>
<div class="text-center" id="example-caption-2">Reticulating splines&hellip; 25%</div>
<progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress>
<div class="text-xs-center" id="example-caption-3">Reticulating splines&hellip; 50%</div>
<div class="text-center" id="example-caption-3">Reticulating splines&hellip; 50%</div>
<progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress>
<div class="text-xs-center" id="example-caption-4">Reticulating splines&hellip; 75%</div>
<div class="text-center" id="example-caption-4">Reticulating splines&hellip; 75%</div>
<progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress>
<div class="text-xs-center" id="example-caption-5">Reticulating splines&hellip; 100%</div>
<div class="text-center" id="example-caption-5">Reticulating splines&hellip; 100%</div>
<progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress>
{% endexample %}
@@ -39,7 +39,7 @@ To caption a progress bar, simply add a `<div>` with your caption text, [align t
Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can work around that.
{% example html %}
<div class="text-xs-center" id="example-caption-6">Reticulating splines&hellip; 25%</div>
<div class="text-center" id="example-caption-6">Reticulating splines&hellip; 25%</div>
<progress class="progress" value="25" max="100" aria-describedby="example-caption-6">
<div class="progress">
<span class="progress-bar" style="width: 25%;"></span>