diff options
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/card.md | 38 | ||||
| -rw-r--r-- | docs/components/progress.md | 12 |
2 files changed, 25 insertions, 25 deletions
diff --git a/docs/components/card.md b/docs/components/card.md index f876ccad2..8fd2276cb 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -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> diff --git a/docs/components/progress.md b/docs/components/progress.md index 2d8db33cb..50d1f1b55 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -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> |