<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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="row-section"> <div class="container"> <div class="col-xs-12 row-block"> <div class="media"> <div class="media-left align-self-center"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLlCi9zTa8vZxh0Q1VvhZosftH5R-rdorOIeMQAQJQc_okR0Mmwg" class="img-fluid"> </div> <div class="media-body"> <h4>Camila Terry</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p> <p>Dirección: Av. Estados Unidos 123 J.L. y Rivero</p> <div class="col-xs-3"> <p>Teléfono: 054-233025, 959528800</p> </div> <div class="col-xs-9"> <p>Teléfono: 054-233025, 959528800</p> </div> </div> </div> </div> </section> <script> $( function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); } ); </script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

@import url('https://fonts.googleapis.com/css?family=Kumar+One'); @import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"); .row-section{float:left; width:100%; background: #42275a; /* fallback for old browsers */ background: -webkit-linear-gradient(to bottom, #734b6d, #42275a); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #734b6d, #42275a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .row-section h2{float:left; width:100%; color:#fff; margin-bottom:10px; font-size: 14px;} .row-section h2 span{font-family: 'Kumar One', cursive; display:block; font-size:45px; text-transform:none; margin-bottom:10px; margin-top:10px;} .row-section h2 a{color:#d2abce;} .row-section .row-block{background:#fff; padding:5px; margin-bottom:50px;} .row-section .row-block ul{margin:0; padding:0;} .row-section .row-block ul li{list-style:none; margin-bottom:20px;} .row-section .row-block ul li:last-child{margin-bottom:0;} .row-section .row-block ul li:hover{cursor:grabbing;} .row-section .row-block .media{border:1px solid #0080FF; padding:5px 20px; border-radius: 5px; box-shadow:0px 2px 1px rgba(0,0,0,0.04); background:#fff;} .row-section .media .media-left img{} .row-section .media .media-body p{padding: 0 15px; font-size:12px;} .row-section .media .media-body h4 {color: #0080FF; font-size: 15px; font-weight: 600; margin-bottom: 0; padding-left: 14px; margin-top:3px;} .btn-default{background:#6B456A; color:#fff; border-radius:30px; border:none; font-size:16px;}