Bootstrap 4 Breadcrumb with style properties

There are three classes used , breadcrumb, breadcrumb-item, breadcrumb-item active

<ol class='breadcrumb'>
  <li class='breadcrumb-item'><a href='#'>Home</a></li>
  <li class='breadcrumb-item'><a href='#'>JQuery</a></li>
  <li class='breadcrumb-item active'>Breadcrumb Demo</li>
Without using list markup
<ol class='breadcrumb'>
  <a href='#' class='breadcrumb-item'>Home</a></li>
  <a href='#' class='breadcrumb-item'>JQuery</a>
  <span class='breadcrumb-item'>Breadcrumb Demo</span>

Changing height , width , border , background colour etc for a breadcrumb

We can override the default style of Bootstrap breadcrumb by declaring our own style.

Here is example of style properties.
ol.breadcrumb {
 background: #ffff00;
 color: #0000ff;
 font-size: 16px;
 width: 700;
 height: 60;
 border: 3px solid;
 border-color: #ff0000;
 border-radius: 10px;
Above code can be generated by using different options.


* indicates required
Subscribe to plus2net

    Most Popular JQuery Scripts


    Two dependant list boxes


    Calendar with Date Selection


    Data change by Slider


    Show & Hide element

    JQuery Video Tutorials

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer