mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-20 17:54:23 +01:00
Add clear description and use case with example
This commit is contained in:
parent
b1b8aedf0e
commit
9706ce72c9
@ -19,17 +19,8 @@ Utilize the `.text-hide` class or mixin to help replace an element's text conten
|
|||||||
}
|
}
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
The `.text-hide` class is useful for when you want the benefits heading tags like accessibility and SEO, but want to utilize your brand's logo image instead of text.
|
Use the `.text-hide` class to maintain the accessibility and SEO benefits of heading tags, but want to utilize a `background-image` instead of text.
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<h1 class="text-hide" style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
|
<h1 class="text-hide" style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
{% highlight html %}
|
|
||||||
<h1 class="text-hide logo">Bootstrap</h1>
|
|
||||||
{% endhighlight %}
|
|
||||||
{% highlight scss %}
|
|
||||||
.logo {
|
|
||||||
background-image: url('/assets/brand/bootstrap-solid.svg');
|
|
||||||
}
|
|
||||||
{% endhighlight %}
|
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user