<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 ----------> <h3 class="text-center margin-top-20">Card Type One Horizontal</h3> <div class="container-fluid margin-top-40"> <div class="col-lg-4 col-xs-12 col-md-6 card no-paddding margin-top-30"> <div class="col-xs-5 no-paddding"> <img src="https://images.unsplash.com/photo-1414690165279-49ab0a9a7e66?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg=" class="img-responsive card-img" alt="Responsive image"> </div> <div class="col-xs-7 pull-right margin-top-20"> <div class="text-center"> <strong class="text-center">Freelancer</strong> </div> <div class="margin-top-20"> <strong>Göktürk Sığırtmaç</strong></br> <strong><a href="github.com/skyturks">Git Hub Profile</a></strong></br> <strong>s.gokturk@outlook.com</strong></br> </div> </div> </div> <div class="col-lg-4 col-xs-12 col-md-6 col-lg-offset-4 card no-paddding margin-top-30"> <div class="col-xs-5 no-paddding"> <img src="https://images.unsplash.com/photo-1414690165279-49ab0a9a7e66?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg=" class="img-responsive card-img" alt="Responsive image"> </div> <div class="col-xs-7 pull-right margin-top-20"> <div class="text-center"> <strong class="text-center">Freelancer</strong> </div> <div class="margin-top-20"> <strong>Göktürk Sığırtmaç</strong></br> <strong><a href="github.com/skyturks">Git Hub Profile</a></strong></br> <strong>s.gokturk@outlook.com</strong></br> </div> </div> </div> </div> <!-- Card One Horizontal --> <!-- Card Two Vertical --> <div class="container-fluid margin-top-40 margin-bottom-40"> <h3 class="text-center margin-top-20">Card Type Two Vertical</h3> <div class="col-lg-3 card-vertical no-paddding margin-top-30"> <div class="col-xs-12 no-paddding"> <img src="https://images.unsplash.com/photo-1414690165279-49ab0a9a7e66?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg=" class="img-responsive card-vertical-img" alt="Responsive image"> </div> <div class="col-xs-12 margin-top-40"> <div class="text-center"> <strong class="text-center">Freelancer</strong> </div> <div class="margin-top-20"> <strong>Göktürk Sığırtmaç</strong></br> <strong><a href="github.com/skyturks">Git Hub Profile</a></strong></br> <strong>s.gokturk@outlook.com</strong></br> </div> </div> </div> <div class="col-lg-3 col-lg-offset-6 card-vertical no-paddding margin-top-30"> <div class="col-xs-12 no-paddding"> <img src="https://images.unsplash.com/photo-1414690165279-49ab0a9a7e66?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg=" class="img-responsive card-vertical-img" alt="Responsive image"> </div> <div class="col-xs-12 margin-top-40"> <div class="text-center"> <strong class="text-center">Freelancer</strong> </div> <div class="margin-top-20"> <strong>Göktürk Sığırtmaç</strong></br> <strong><a href="github.com/skyturks">Git Hub Profile</a></strong></br> <strong>s.gokturk@outlook.com</strong></br> </div> </div> </div> </div>

.no-paddding{ padding: 0px; } .margin-top-20{ margin-top: 20px; } .margin-top-30{ margin-top: 30px; } .margin-top-40{ margin-top: 40px; } .margin-bottom-20{ margin-bottom: 20px; } .margin-bottom-30{ margin-bottom: 30px; } .margin-bottom-40{ margin-bottom: 40px; } /* Card Horizontal */ .card{ box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); border-radius: 6px; height: 150px; } .card-img{ border-top-left-radius: 6px; border-bottom-left-radius: 6px; background-size: cover; background-repeat: no-repeat; background-position: center; height: 150px; } /* Card Horizontal */ /* Card Vertical */ .card-vertical{ box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); border-radius: 6px; height: 400px; } .card-vertical-img{ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); border-top-left-radius: 6px; border-top-right-radius: 6px; }