Menu
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 
434
HTML lists like <ol>,<ul>,<li> are used to create the navigation links. Breadcrumbs dynamic navigation is implemented using various JavaScript functions like jQuery prepend(),clone() and click() methods.
Step 1: We simply add aria-label=”breadcrumb” to the nav element. Step 2: We next add class=”breadcrumb-item” in the list elements. Step 3: Add class=”breadcrumb-item active” in the current list element.
Dividers. Dividers are automatically added in CSS through ::before and content . They can be changed by modifying a local CSS custom property --bs-breadcrumb-divider , or through the $breadcrumb-divider Sass variable — and $breadcrumb-divider-flipped for its RTL counterpart, if needed.
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
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.
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
