Originally posted on: http://geekswithblogs.net/MightyZot/archive/2013/11/12/responsive-inline-elements-with-twitter-bootstrap.aspxTwitter Boostrap is a responsive css platform created by some dudes affiliated with Twitter and since supported and maintained by an open source following. I absolutely love
the new version
of this css toolkit. They rebuilt it with a mobile first strategy and it’s very easy to layout pages once you get
the hang
of it. Using a css / javascript framework like bootstrap is certainly much easier than coding your layout by hand. And, you get a “leg up” when it comes to adding responsive features to your site. Bootstrap includes column layout classes that let you specify size and placement based upon
the viewport width. In addition, there are a handful
of responsive helpers to hide and show content based upon
the user’s device size. Most notably,
the visible-xs, visible-sm, visible-md, and visible-lg classes let you show content for devices corresponding to those sizes (they are listed in
the bootstrap docs.) hidden-xs, hidden-sm, hidden-md, and hidden-lg let you hide content for devices with those respective sizes. These helpers work great for showing and hiding block elements. Unfortunately, there isn’t a provision yet in Twitter Bootstrap (as
of the time
of this writing) for inline elements. We are using
the navbar classes to create a navigation bar at
the top
of our website, www.crowdit.com. When you shrink
the width
of the screen to tablet or phone size,
the tools in
the navbar are turned into a drop down menu, and a button appears on
the right side
of the navbar. This is great! But, we wanted different content to display based upon whether
the items were on
the navbar versus when they were in
the dropdown menu.
The visible-?? and hidden-?? classes make this easy for images and block elements. In our case, we wanted our anchors to show different text depending upon whether they’re in
the navbar, or in
the dropdown. span is inherently inline and it can be a block element. My first approach was to create two anchors for each options, one set visible when
the navbar is on a desktop or laptop with a wide display and another set visible when
the elements converted to a dropdown menu. That works fine with
the visible-?? and hidden-?? classes, but it just doesn’t seem that clean to me. I put up with that for about a week…last night I created
the following classes to augment
the block-based classes provided by bootstrap. .cdt-hidden-xs, .cdt-hidden-sm, .cdt-hidden-md, .cdt-hidden-lg { display: inline !important; } @media (max-width:767px) { .cdt-hidden-xs, .cdt-hidden-sm.cdt-hidden-xs, .cdt-hidden-md.cdt-hidden-xs, .cdt-hidden-lg.cdt-hidden-xs { display: none !important; } } @media (min-width:768px) and (max-width:991px) { .cdt-hidden-xs.cdt-hidden-sm, .cdt-hidden-sm, .cdt-hidden-md.cdt-hidden-sm, .cdt-hidden-lg.cdt-hidden-sm { display: none !important; } } @media (min-width:992px) and (max-width:1199px) { .cdt-hidden-xs.cdt-hidden-md, .cdt-hidden-sm.cdt-hidden-md, .cdt-hidden-md, .cdt-hidden-lg.cdt-hidden-md { display: none !important; } } @media (min-width:1200px) { .cdt-hidden-xs.cdt-hidden-lg, .cdt-hidden-sm.cdt-hidden-lg, .cdt-hidden-md.cdt-hidden-lg, .cdt-hidden-lg { display: none !important; } } .cdt-visible-xs, .cdt-visible-sm, .cdt-visible-md, .cdt-visible-lg { display: none !important; } @media (max-width:767px) { .cdt-visible-xs, .cdt-visible-sm.cdt-visible-xs, .cdt-visible-md.cdt-visible-xs, .cdt-visible-lg.cdt-visible-xs { display: inline !important; } } @media (min-width:768px) and (max-width:991px) { .cdt-visible-xs.cdt-visible-sm, .cdt-visible-sm, .cdt-visible-md.cdt-visible-sm, .cdt-visible-lg.cdt-visible-sm { display: inline !important; } } @media (min-width:992px) and (max-width:1199px) { .cdt-visible-xs.cdt-visible-md, .cdt-visible-sm.cdt-visible-md, .cdt-visible-md, .cdt-visible-lg.cdt-visible-md { display: inline !important; } } @media (min-width:1200px) { .cdt-visible-xs.cdt-visible-lg, .cdt-visible-sm.cdt-visible-lg, .cdt-visible-md.cdt-visible-lg, .cdt-visible-lg { display: inline !important; } } I created these by looking at
the example provided by bootstrap and consolidating
the styles. “cdt” is just a prefix that I’m using to distinguish these classes from
the block-based classes in bootstrap. You are welcome to change
the prefix to whatever feels right for you. These classes can be applied to spans in textual content to hide and show text based upon
the browser width. Applying
the styles is simple… <span class=”cdt-visible-xs”>This text is visible in extra small</span> <span class=”cdt-visible-sm”>This text is visible in small</span> Why would you want to do this? Here are a couple
of examples, shown in screen shots. This is
the CrowdIt navbar on larger displays. Notice how
the text is two line and certain words are capitalized? Now, check this out! Here is a screen shot showing
the dropdown menu that’s displayed when
the browser window is tablet or phone sized.
The markup to make this happen is quite simple…take a look. <li> <a href="@Url.Action("what-is-crowdit","home")" title="Learn about what CrowdIt can do for your Small Business"> <span class="cdt-hidden-xs">WHAT<br /><small>is CrowdIt?</small></span> <span class="cdt-visible-xs">What is CrowdIt?</span> </a> </li> There is a single anchor tag in this example and only
the spans change visibility based on browser width. I left them separate for readability and because I wanted to use
the small tag; however, you could just as easily hide
the “WHAT” and
the br tag on small displays and replace them with “What “, consolidating this even further to text containing a single span. <span class=”cdt-hidden-xs”>WHAT<br /></span><span class=”cdt-visible-xs”>What </span>is CrowdIt? You might be a master
of css and have a better method
of handling this problem. If so, I’d love to hear about your solution…leave me some feedback! You’ll be entered into a drawing for a chance to win an autographed picture
of ME! Yay!
