<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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="Login">PERTAMA KALI BELANJA DI KUDO?</h4> <div class="line-break"></div> </div> <div class="modal-body"> <div class="content-faq"> Melalui agen-agen Kudo yang terpercaya , kini pengalaman belanja Anda menjadi lebih mudah dan aman. Uang Anda akan dikembalikan 100% jika barang tidak diterima. Info: 0856 9229 0517 | email: cs@kudo.co.id </div> <div class="row"> <div class="col-md-3"> <span class="image_text">SATU</span> <img src="http://www.digitalframesdirect.com/media/Corp/google-logo-small.gif"> </div> <div class="col-md-3"> Img </div> <div class="col-md-3"> Img </div> <div class="col-md-3"> Img </div> </div> <a href="<?= home_url() ?>/temukan-agent-kudo/" class="btn btn-primary">Temukan Agen Terdekat</a> </div> </div> </div> </div> <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <a class="listview-item bg-color-orange" href="https://github.com/aozora/bootmetro"> <div class="pull-left"> <div class="listview-item-object icon-github"><i class="fa fa-facebook" style="font-size:100%"></i></div> </div> <div class="listview-item-body"> <h4 class="listview-item-heading">Facebook</h4> </div> </a> <a class="listview-item bg-color-orange" href="https://github.com/aozora/bootmetro"> <div class="pull-left"> <i class="fa fa-facebook" style="font-size:40px"></i> </div> <div class="listview-item-body"> <h4 class="listview-item-heading">View project on GitHub</h4> </div> </a> <a class="listview-item bg-color-orange" href="https://github.com/aozora/bootmetro"> <div class="pull-left"> <i class="fa fa-facebook" style="font-size:40px"></i> </div> <div class="listview-item-body"> <h4 class="listview-item-heading">View project on GitHub</h4> </div> </a> </div> </div> </div> </div>

.image { position: relative; width: 100%; /* for IE 6 */ } .image_text { position: absolute; top: 25px; left: 0; width: 100%; } /* ===== */ .listview.grid-layout .listview-item { margin-right: 24px; } .listview-item { border: 3px solid transparent; color: #ffffff; display: inline-block; margin-bottom: 7px; margin-top: 15px; min-height: 60px; overflow: hidden; padding: 10px; position: relative; text-shadow: none; vertical-align: top; width: 100%; } .bg-color-orange { background-color: #f09609 !important; } .listview-item-object[class*="icon-"] { display: inline-block; font-size: 60px; height: 60px; line-height: 60px; width: 60px; } .listview-item a:hover{ color:#fff; }