"bread"
Bootstrap 3.3.0 Snippet by exigentinc

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Multi-line Pure CSS Breadcrumb Arrows</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> </head> <body> <div class="container"> <div class="breadcrumb"> <a href="#"> <span class="breadcrumb__inner"> <span class="breadcrumb__title">Exigent</span> <span class="breadcrumb__desc">Ebay Store</span> </span> </a> <a href="#"> <span class="breadcrumb__inner"> <span class="breadcrumb__title">Light Equipment & Tools</span> <span class="breadcrumb__desc">Business & Industrial</span> </span> </a> <a href="#"> <span class="breadcrumb__inner"> <span class="breadcrumb__title">Ebay Listing</span> <span class="breadcrumb__desc">8623749872</span> </span> </a> <a href="#"> <span class="breadcrumb__inner"> <span class="breadcrumb__title">Bosch Router</span> <span class="breadcrumb__desc">Model:324RE</span> </span> </a> </div> </div> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; background-color: #333; } .container { display: flex; flex-direction: column; height: 100%; width: 100%; min-width: 480px; padding: 10 10px; } .breadcrumb { display: flex; border-radius: 5px; overflow: hidden; margin: auto; text-align: center; top: 50%; width: 100%; height: 49.4px; -webkit-transform: translateY(-50%); transform: translateY(-50%); box-shadow: 0 1px 1px black, 0 4px 14px rgba(0, 0, 0, 0.7); z-index: 1; background-color: #ddd; font-size: 14px; } .breadcrumb a { position: relative; display: flex; flex-grow: 1; text-decoration: none; margin: auto; height: 100%; padding-left: 38px; padding-right: 0; color: #666; } .breadcrumb a:first-child { padding-left: 15.2px; } .breadcrumb a:last-child { padding-right: 15.2px; } .breadcrumb a:after { content: ""; position: absolute; display: inline-block; width: 57px; height: 57px; top: 0; right: -28.1481481481px; background-color: #ddd; border-top-right-radius: 5px; -webkit-transform: scale(0.707) rotate(45deg); transform: scale(0.707) rotate(45deg); box-shadow: 1px -1px rgba(0, 0, 0, 0.25); z-index: 1; } .breadcrumb a:last-child:after { content: none; } .breadcrumb__inner { display: flex; flex-direction: column; margin: auto; z-index: 2; } .breadcrumb__title { font-weight: bold; letter-spacing: -0.8px; } .breadcrumb a.active, .breadcrumb a:hover { background: #FDBC35; color: white; } .breadcrumb a.active:after, .breadcrumb a:hover:after { background: #FDBC35; color: white; } @media all and (max-width: 1000px) { .breadcrumb { font-size: 12px; } } @media all and (max-width: 710px) { .breadcrumb__desc { display: none; } .breadcrumb { height: 38px; } .breadcrumb a { padding-left: 25.3333333333px; } .breadcrumb a:after { content: ""; width: 38px; height: 38px; right: -19px; -webkit-transform: scale(0.707) rotate(45deg); transform: scale(0.707) rotate(45deg); } }

Related: See More

Paper Kit

Questions / Comments: