<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <div class="breadcrumbs"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-8"> <a class="fileTrail" href="https://www.solodev.com/">Home</a> <span class="fileTrailDividers">></span> <a class="fileTrail" href="https://www.solodev.com/product/create.stml">Product</a> <span class="fileTrailDividers">></span> <span class="fileTrailCurrent">Pricing</span> </div> <div class="col-xs-12 col-sm-4"> <ul class="breadcrumbs-socials list-inline list-unstyled mt-3 mt-sm-0"> <li> <a href="https://www.facebook.com/Solodev" aria-label="Solodev on Facebook" target="_blank"> <i class="fa fa-facebook"> </i> </a> </li> <li> <a href="https://twitter.com/solodev" aria-label="Solodev on Twitter" target="_blank"> <i class="fa fa-twitter"> </i> </a> </li> <li> <a href="https://www.linkedin.com/company/solodev" aria-label="Solodev on LinkedIn" target="_blank"> <i class="fa fa-linkedin"> </i> </a> </li> <li> <a href="https://github.com/solodev" aria-label="Solodev on Github" target="_blank"> <i class="fa fa-github"> </i> </a> </li> </ul> </div> </div> </div> </div>

.breadcrumbs { padding: 24px 0; background-color: #f8f8f8; } .breadcrumbs .fa { font-size: 1.5rem !important; } .breadcrumbs a, .breadcrumbs span { font-size: 1rem; font-weight: 600; color: #091f2f; text-transform: uppercase; text-decoration: none ; margin-right: 15px; position: relative; display: inline-block; line-height: 10.5px; } .breadcrumbs .fileTrailCurrent { color: #d9262c; border-bottom: 0; } /* ============================== # Social Share ============================== */ .breadcrumbs-socials > li { width: 100%; width: inherit; float: left; } .breadcrumbs-socials .social-share { font-weight: 600; } .breadcrumbs-socials a { font-size: 2.5rem; border-bottom: 0px; margin-right: 14px; } .breadcrumbs-socials a:hover { color: #4a606f; } li.social-share { padding-right: 20px; } @media (max-width: 991px){ .breadcrumbs-socials a { margin-right: 6px; } .breadcrumbs a:before, .breadcrumbs span:before { display: none; } }