<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container-fluid"> <div class="row infographic"> <div class="col-md-6"> <div class="circle"><span class="number">1</span></div> <div class="rect"></div> </div> <div class="col-md-6"></div> </div> </div>

body { width: 100%; color: #fff; } .infographic { padding-top: 30px; } .number { font-size: 30px; font-weight: 700; line-height: 90px; margin-left: 40%; } .circle { width: 90px; height: 90px; background-color: #000; border-radius: 50%; -webkit-box-shadow: 3px 3px 5px 1px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 1px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 2px 2px 1px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ } .rect { width: 200px; height: 70px; position: absolute; top: 10; background-color: #F5E9E0; -webkit-box-shadow: 3px 3px 5px 1px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 1px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 2px 2px 1px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ }