<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 ----------> <!-- muchos disgustimos --> <div class="breadcrumb-pagination"> <div class="completed"> <span></span> <p>Items in order</p> </div> <div class="active"> <span>2</span> <p>Customer information</p> </div> <div class="todo"> <span>3</span> <p>Shipping</p> </div> </div>

/* -- just styling for this mockup */ body {background-color:#F8F9FB; padding: 80px 0 80px 30px;} .clearfix {clear:both;min-height:15px;} body { font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; -webkit-font-smoothing:antialiased; font-size:14px; } .breadcrumb-pagination { width:100%; border-bottom:1px solid #E1E6EB; text-align:center; float:left; color:#B3B7C1; } .breadcrumb-pagination div { width: 25%; display:inline-block; } .breadcrumb-pagination div span { margin:0 auto; display:block; border-radius:100%; height:30px; width:36px; padding:6px 0 0 0px; font-size:20px; } .completed span { background-color:NONE; color:#95db89; border:2px solid #95db89; } .active span { background-color:#00abc9; color:#fff; } .todo span { background-color:none; color:#E1E6EB; border:2px solid #E1E6EB; } .breadcrumb-pagination div p { text-align:center; line-height:0; margin:30px auto 25px; } .active p { border-bottom:2px solid #00abc9; padding-bottom:27px; margin-bottom:0px !important; color: #3c4043; font-weight:700; } .completed p { color:#bsb7c1; } .completed span::before { content: '\2713' }