<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="po"> <div class="poo"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/JumpingRabbit.JPG/220px-JumpingRabbit.JPG"> </div> <div class="poo"> <img src="http://weknowyourdreams.com/images/rabbit/rabbit-06.jpg"> </div> <div class="poo"> <img src="http://weknowyourdreams.com/images/rabbit/rabbit-06.jpg"> </div> <div class="poo"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/JumpingRabbit.JPG/220px-JumpingRabbit.JPG"> </div></div>

.po{height:400px; width:400px; overflow:hidden; background:red; border: 2px solid green; } .poo{ height:50%; width:50%; float:left; background:blue; border: 2px solid black; }