<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 ----------> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="myphoto"></div> <div class="name-text"> <p> Hello! My name is</p> <h2>Alexandra Tikhova</h2> </div> <div class="social-buttons"> <p><span class="vk"></span><a href="https://vk.com/tikhova_photography">tikhova_photography</a></p> <p><span class="instagram"></span><a href=" http://www.instagram.com/tikhova_photography">tikhova_photography</a></p> <p><span class="vk"></span><a href="https://vk.com/tikhova_photography">tikhova_photography</a></p> </div> </div> </div> </div>

div { outline: 1px solid red; } .myphoto { margin: 20px auto; height: 200px; width: 200px; border-radius: 50%; background-image: url('https://pp.userapi.com/c619822/v619822306/14fe1/PRaCaYsUEqc.jpg'); background-color: #000; background-position: 50% 30%; } .name-text { text-align: center; } .social-buttons { text-align: center; position: relative; } .social-buttons p { line-height: 25px; } .vk:before { content:""; display: block; position: absolute; top: -5px; left: 45px; width: 30px; height:30px; background-image: url('https://cdn.iconscout.com/public/images/icon/free/png-256/vk-social-media-30e7c557bc2ab7f2-256x256.png'); background-size: cover; background-color: #000; } .instagram:before { content:""; display: block; position: absolute; top: 35px; left: 45px; width: 30px; height:30px; background-image: url('https://image.flaticon.com/icons/svg/174/174855.svg'); background-size: cover; background-color: #000; }