<div class='circle-icon'> <span class="glyphicon glyphicon-road" aria-hidden="true"></span> </div> <div class="circle-singleline"> Hello </div> <div class='circle-multiline'> <span style='font-size: 2.5em'>Big Text</span></br> here is more text <br>new line </div>
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'); div { margin-bottom: 20px; } .circle-icon .glyphicon { background-color: purple; color: white; padding: 60px; font-size: 6em; border-radius: 50%; } .circle-singleline { width: 200px; height: 200px; border-radius: 50%; font-size: 50px; line-height: 200px; text-align: center; background: purple; color: #fff; } .circle-multiline { display: table-cell; height: 200px; width: 200px; text-align: center; vertical-align: middle; border-radius: 50%; background: purple; color: white; }