<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 ----------> <section class="content"> <section> <header> <h1 class="line-title">Title</h1> </header> <article> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias quam optio dignissimos molestiae blanditiis consectetur ipsum ea totam quaerat illum earum laudantium ullam veniam delectus corporis explicabo ad eius fugiat? </article> </section> <section> <header> <h1 class="line-title">Line Title</h1> </header> <article> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias quam optio dignissimos molestiae blanditiis consectetur ipsum ea totam quaerat illum earum laudantium ullam veniam delectus corporis explicabo ad eius fugiat? </article> </section> <section> <header> <h1 class="line-title">My Big Title</h1> </header> <article> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias quam optio dignissimos molestiae blanditiis consectetur ipsum ea totam quaerat illum earum laudantium ullam veniam delectus corporis explicabo ad eius fugiat? </article> </section> </section>

body, html { height: 100%; } body { font-size: 1.1em; line-height: 1.4em; color: #6F7C80; } .content { padding-top: 100px; } section { width: 500px; margin: auto; text-align: center; margin-bottom: 3em; } .line-title { margin-bottom: 1.3em; font-size: 1.5em; text-align: center; display: block; position: relative; overflow: hidden; } .line-title:before, .line-title:after { content: ''; display: inline-block; height: 1px; background: #6F7C80; width: 50%; position: relative; vertical-align: middle; } .line-title:before { left: -0.5em; margin-left: -50%; } .line-title:after { right: -0.5em; margin-right: -50%; }