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 
Asked
Active
Viewed 8,641 times
8
Smitha
- 6,110
- 24
- 90
- 161
-
could you add your breadcrumbs html and css code? Try to use media queries to change the css styles for smaller screens. – Bass Jobsen Nov 15 '13 at 07:42
-
Since I am using bootstrap, is it necessary to use media query? – Smitha Nov 15 '13 at 11:26
-
yes you will still need media queries to discriminate between your desktop and mobile version – Bass Jobsen Nov 15 '13 at 12:28
-
Maybe you on the wrong track :-) if your mobile site needs breadcrumbs, try read: http://ux.stackexchange.com/a/16211 – Henrik Stenbæk Nov 15 '13 at 12:59
2 Answers
4
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.
Franck Valentin
- 1,115
- 8
- 14
1
You are going to have to code that yourself. Without your specific code, no one will be able to give you specific answers. That being said, here is how I would get set up to add custom code to my Bootstrap website.
Using less
First, create a new .less file - this file will be your new primary style sheet. In that file, import in the bootstrap.less file. Compile that file and link it in your HTML files. You should now have an exact copy of the out-of-the-box Bootstrap CSS, with access to all of the Bootstrap variables.
To make any additions, add them to that file underneath the import statement. So in your case, I would grab the variables for the media queries and breadcrumbs (found in variables.less), and customize the style of the breadcrumbs at smaller screens.
Note that Bootstrap is mobile first, which means that the default styles will be applied at the smaller screen, and you override for larger.
Not using less
If you are not comfortable using less, I would say this is a great opportunity to start. That being said, if you want to do it the old fashioned way, then just create a second style sheet that you link in, add it underneath the Bootstrap sheet, and code away.
