"Vertical Divider with Icon"
Bootstrap 3.0.0 Snippet by NaszvadiG

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <div class="row divider-outer"> <div class="col col-sm-6 col-xs-12"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis tellus in magna scelerisque, ut consectetur est convallis. Cras lorem ex, venenatis quis sapien in, convallis dictum lorem.</p> </div> <div class="divider hidden-xs"></div> <div class="col col-sm-6 col-xs-12"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis tellus in magna scelerisque, ut consectetur est convallis. Cras lorem ex, venenatis quis sapien in, convallis dictum lorem.</p> </div> </div> </div> </body> </html>
.divider-outer{ position: relative; } .divider-outer .col{ padding: 15px 30px; } .divider{ position: absolute; width: 1px; background: #ddd; top: 0; bottom: 0; left: 50%; } .divider:after{ content: '\f006'; font-family: 'FontAwesome'; width: 30px; height: 30px; line-height: 30px; border-radius: 15px; font-size: 12px; color: #4caf50; background: #fff; border:1px solid #f0f0f0; display: block; position: absolute; top: 50%; margin-top: -15px; margin-left: -15px; text-align: center; }

Related: See More

BLK• Design System
Bootstrap 4 Navbar with Icon Top
Hamburger Icon Animations
Navbar with Social icon & Dropdown

Questions / Comments: