<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="line text-center"> <h1>This is title</h1> <div class="lines"></div> </div> <div class="line text-center"> <h1>This is title</h1> <div class="linesa"></div> </div> <div class="line text-center"> <h1>This is title</h1> <div class="linesb"></div> </div> <div class="line text-center"> <h1>This is title</h1> <div class="linesc"></div> </div> <div class="line text-center"> <h1>This is title</h1> <div class="linesd"></div> </div> </div>

body { background: #eee; font-family: 'Open Sans',sans-serif; } h1 { font-size:30px; margin:5px; } .lines { border-bottom: 3px solid #8e2800; width:200px; position:relative; left:42%; } .linesa{ border-bottom: 3px solid #225378; width:200px; position:relative; left:42%; } .linesa:before { content:""; position:absolute; height:5px; width:100px; background:#eb7f00; left:25%; margin-top:-1px; } .linesb { border-bottom: 3px solid #225378; width:200px; position:relative; left:42%; margin-top:30px; margin-bottom:20px; } .linesb:before { content:""; position:absolute; height:40px; width:40px; background:#00a008; left:40%; margin-top:-17px; transform:rotate(45deg); } .linesc { border-bottom: 3px solid #225378; width:200px; position:relative; left:42%; margin-top:20px; } .linesc:before { content:"\f004"; position:absolute; font-family:'FontAwesome'; font-size:35px; color:#ff0000; left:40%; margin-top:-24px; } .linesd { border-bottom: 3px solid #225378; width:200px; position:relative; left:42%; margin-top:40px; } .linesd:before { content:"\f004"; position:absolute; font-family:'FontAwesome'; font-size:35px; color:#ff0000; left:40%; margin-top:-20px; } .linesd:after { content:""; position:absolute; left:36%; height:50px; width:50px; transform:rotate(45deg); border:3px solid ; margin-top:-23px; }