mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-17 14:54:30 +01:00
Remove 'xs' from text utilities (#21217)
This commit is contained in:
parent
eb5ad730ee
commit
b1e8d60348
@ -2,7 +2,7 @@
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="bd-pageheader text-xs-center text-sm-left">
|
||||
<div class="bd-pageheader text-center text-sm-left">
|
||||
<div class="container">
|
||||
<h1>{{ page.title }}</h1>
|
||||
<p class="lead">
|
||||
|
@ -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>
|
||||
|
@ -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… 0%</div>
|
||||
<div class="text-center" id="example-caption-1">Reticulating splines… 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… 25%</div>
|
||||
<div class="text-center" id="example-caption-2">Reticulating splines… 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… 50%</div>
|
||||
<div class="text-center" id="example-caption-3">Reticulating splines… 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… 75%</div>
|
||||
<div class="text-center" id="example-caption-4">Reticulating splines… 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… 100%</div>
|
||||
<div class="text-center" id="example-caption-5">Reticulating splines… 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… 25%</div>
|
||||
<div class="text-center" id="example-caption-6">Reticulating splines… 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>
|
||||
|
@ -21,6 +21,6 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl
|
||||
{% example html %}
|
||||
<figure class="figure">
|
||||
<img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
|
||||
<figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption>
|
||||
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
|
||||
</figure>
|
||||
{% endexample %}
|
||||
|
@ -65,13 +65,13 @@ Align images with the [helper float classes]({{ site.baseurl }}/utilities/respon
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
<div class="text-xs-center">
|
||||
<div class="text-center">
|
||||
<img data-src="holder.js/200x200" class="rounded" alt="A generic square placeholder image with rounded corners">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="text-xs-center">
|
||||
<div class="text-center">
|
||||
<img src="..." class="rounded" alt="...">
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
@ -43,7 +43,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="jumbotron text-xs-center">
|
||||
<section class="jumbotron text-center">
|
||||
<div class="container">
|
||||
<h1 class="jumbotron-heading">Album example</h1>
|
||||
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
|
||||
|
@ -51,7 +51,7 @@
|
||||
<div class="carousel-item active">
|
||||
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-xs-left">
|
||||
<div class="carousel-caption text-left">
|
||||
<h1>Example headline.</h1>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
|
||||
@ -71,7 +71,7 @@
|
||||
<div class="carousel-item">
|
||||
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-xs-right">
|
||||
<div class="carousel-caption text-right">
|
||||
<h1>One more for good measure.</h1>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
|
||||
|
@ -92,7 +92,7 @@
|
||||
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
|
||||
<h1>Dashboard</h1>
|
||||
|
||||
<section class="row text-xs-center placeholders">
|
||||
<section class="row text-center placeholders">
|
||||
<div class="col-6 col-sm-3 placeholder">
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
|
||||
<h4>Label</h4>
|
||||
|
@ -62,23 +62,23 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="text-xs-center">
|
||||
<th class="text-center">
|
||||
Extra small<br>
|
||||
<small><576px</small>
|
||||
</th>
|
||||
<th class="text-xs-center">
|
||||
<th class="text-center">
|
||||
Small<br>
|
||||
<small>≥576px</small>
|
||||
</th>
|
||||
<th class="text-xs-center">
|
||||
<th class="text-center">
|
||||
Medium<br>
|
||||
<small>≥768px</small>
|
||||
</th>
|
||||
<th class="text-xs-center">
|
||||
<th class="text-center">
|
||||
Large<br>
|
||||
<small>≥992px</small>
|
||||
</th>
|
||||
<th class="text-xs-center">
|
||||
<th class="text-center">
|
||||
Extra large<br>
|
||||
<small>≥1200px</small>
|
||||
</th>
|
||||
|
@ -30,9 +30,9 @@ Easily realign text to components with text alignment classes.
|
||||
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
|
||||
|
||||
{% example html %}
|
||||
<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
|
||||
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
|
||||
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
|
||||
<p class="text-left">Left aligned text on all viewport sizes.</p>
|
||||
<p class="text-center">Center aligned text on all viewport sizes.</p>
|
||||
<p class="text-right">Right aligned text on all viewport sizes.</p>
|
||||
|
||||
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
|
||||
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
|
||||
|
@ -12,9 +12,17 @@
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.text-#{$breakpoint}-left { text-align: left !important; }
|
||||
.text-#{$breakpoint}-right { text-align: right !important; }
|
||||
.text-#{$breakpoint}-center { text-align: center !important; }
|
||||
$min: breakpoint-min($breakpoint, $grid-breakpoints);
|
||||
|
||||
@if $min {
|
||||
.text-#{$breakpoint}-left { text-align: left !important; }
|
||||
.text-#{$breakpoint}-right { text-align: right !important; }
|
||||
.text-#{$breakpoint}-center { text-align: center !important; }
|
||||
} @else {
|
||||
.text-left { text-align: left !important; }
|
||||
.text-right { text-align: right !important; }
|
||||
.text-center { text-align: center !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user