Responsive Abbreviations with Bootstrap's Utility Classes
31 Aug 2012I love media queries, but sometimes they are a bit much for when I just want to abbreviate an element’s content for small screens. Bootstrap’s utility classes are a very handy collection of classes that help you do just that.
Here are a few examples of how they can be used to abbreviate your content at small screen sizes.
Shorten button label:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <button class="btn"> | |
| Info<span class="hidden-phone">rmation</span> | |
| </button> |
Change date format:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h4 class="date"> | |
| <span class="hidden-phone">January 13th, 1986</span> | |
| <span class="visible-phone">1/13/1986</span> | |
| </h4> |
Abbreviate country select:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <select name="country"> | |
| <option> | |
| <span class="hidden-phone">United States of America</span> | |
| <span class="visible-phone">US</span> | |
| </option> | |
| </select> |