Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rename .text-xs-* to .text-* #21217

Merged
merged 1 commit into from
Nov 27, 2016
Merged

Rename .text-xs-* to .text-* #21217

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/_layouts/simple.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
38 changes: 19 additions & 19 deletions docs/components/card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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">
Expand All @@ -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">
Expand Down Expand Up @@ -333,39 +333,39 @@ 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>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</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>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</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>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</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>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</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>
Expand All @@ -383,47 +383,47 @@ 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>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</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>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</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>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</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>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</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>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</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>
Expand Down Expand Up @@ -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>
Expand All @@ -552,15 +552,15 @@ 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>
</div>
<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>
Expand Down
12 changes: 6 additions & 6 deletions docs/components/progress.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/content/figures.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
4 changes: 2 additions & 2 deletions docs/content/images.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
2 changes: 1 addition & 1 deletion docs/examples/album/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ <h4>Contact</h4>
</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>
Expand Down
4 changes: 2 additions & 2 deletions docs/examples/carousel/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -71,7 +71,7 @@ <h1>Another example headline.</h1>
<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>
Expand Down
2 changes: 1 addition & 1 deletion docs/examples/dashboard/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions docs/layout/grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>&lt;576px</small>
</th>
<th class="text-xs-center">
<th class="text-center">
Small<br>
<small>&ge;576px</small>
</th>
<th class="text-xs-center">
<th class="text-center">
Medium<br>
<small>&ge;768px</small>
</th>
<th class="text-xs-center">
<th class="text-center">
Large<br>
<small>&ge;992px</small>
</th>
<th class="text-xs-center">
<th class="text-center">
Extra large<br>
<small>&ge;1200px</small>
</th>
Expand Down
6 changes: 3 additions & 3 deletions docs/utilities/typography.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 11 additions & 3 deletions scss/utilities/_text.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opening curly brace { should be preceded by one space

.text-#{$breakpoint}-right { text-align: right !important; }
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opening curly brace { should be preceded by one space

.text-#{$breakpoint}-center { text-align: center !important; }
} @else {
.text-left { text-align: left !important; }
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opening curly brace { should be preceded by one space

.text-right { text-align: right !important; }
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opening curly brace { should be preceded by one space

.text-center { text-align: center !important; }
}
}
}

Expand Down