How to make breadcrumbs responsive?

iphone responsive-design twitter-bootstrap-3 breadcrumbs
Smitha picture Smitha · Nov 15, 2013 · Viewed 8k times · Source

I have used bootstrap3 for RWD and customized my breadcrumb. But, it's not fitting in mobile size.
How can I make it responsive?
Attached screenshot of the problem.

Thanks enter image description here

Answer

Franck Valentin picture Franck Valentin · Jun 17, 2014

I have created a snippet on bootsnipp that may fit your needs.

http://bootsnipp.com/snippets/featured/responsive-breadcrumbs

You can configure this breadcrumb to

  • display only the last n elements. Ellipses are added at the beginning of the list if elements are hidden.
  • set a maximum size for each elements. Ellipses are added after the label if it's too long.

By setting breakpoints you can set the number of elements to display and their maximum size for different screen sizes and hence make sure there won't be any overflow.

Related questions

iPhone 5 CSS media query

The iPhone 5 has a longer screen and it's not catching my website's mobile view. What are the new responsive design queries for the iPhone 5 and can I combine with existing iPhone queries? My current media query is this: @media only …

Read More
What are the device-width css viewport sizes of the iPhone6 and iPhone 6 Plus

The iPhone 6 and iPhone 6 Plus were just announced. But as usual, phone specs never give the meta viewport device-width sizes in CSS Pixels or DPR at width=device-width,initial-scale=1. Predictions have been made, speculating on 375/414px viewport width, but that …

Read More
Responsive website on iPhone - unwanted white space on rotate from landscape to portrait

I am creating a responsive website, and have just noticed a strange behaviour in my content pages when viewed on the iPhone. It scales correctly when loaded in portrait mode, and also when rotated to landscape. However, when rotating back …

Read More