JSFiddle - React, Tailwind, and code Playground

Bootstrap Divider Titles

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class='divider'>
  <div class='name'>Lorem ipsum dolor sit amet</div>
</div>
<div class='divider'>
  <div class='name'>Amet constanter</div>
</div>
<div class='divider'>
  <div class='name'>Deducitur potest contremiscunt eum ego</div>
</div>

CSS

@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300,700");
body {
    padding: 10px 50px;
    font-family: "Open Sans", sans-serif;
    background: #f0f0f0;
}

.divider {
  position: relative;
  text-align: left;
  line-height: 1.2;
  margin: 50px 0 10px 0;
}
.divider::before {
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.divider .name {
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.44);
  background: #fff;
  text-transform: uppercase;
  font-size: 16px;
  padding: 3px 8px 2px 12px;
  letter-spacing: .3em;
  color: rgba(0, 0, 0, 0.6);
  position: relative;
}
.divider .name:hover {
  border-color: rgba(0, 0, 0, 0.6);
  color: rgba(0, 0, 0, 0.8);
}

JavaScript

// Bootstrap v3.3.1
// Font Awesome 4.2.0