I'm trying to get these 3 pictures in a row with no or little spaces in between, but this code is causing them to stack on top of each other. I also want them to be aligned to the center of the page.
<div class="container">
<div class="row col-xs-2">
<img style= "width: 25%; height: 25%" src="https://image.ibb.co/ckA7ka/mr_marbles.png" alt="Mister Marbles head tilt">
</div>
<div class="row col-xs-2">
<img style= "width: 25%; height: 25%" src="https://image.ibb.co/bTMKyv/kermit.png" alt="Kermit the Dog">
</div>
<div class="row col-xs-2">
<img style= "width: 25%; height: 25%" src="https://image.ibb.co/ki8tQa/peach.png" alt="Peach posing magestically">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-4 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-4 col-md-4 col-xs-4 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-4 col-md-4 col-xs-4 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">
</a>
</div>
your code should be like this..
dont put class row on every col..
<div class="container">
<div class="row">
<div class="col-xs-2">
<img style="width: 25%; height: 25%" src="https://image.ibb.co/ckA7ka/mr_marbles.png" alt="Mister Marbles head tilt">
</div>
<div class="col-xs-2">
<img style="width: 25%; height: 25%" src="https://image.ibb.co/bTMKyv/kermit.png" alt="Kermit the Dog">
</div>
<div class="col-xs-2">
<img style="width: 25%; height: 25%" src="https://image.ibb.co/ki8tQa/peach.png" alt="Peach posing magestically">
</div>
</div>
</div>
sample code
**YOu need to put everthing in row then add one div with a class .center make the div center finally offset the the first column**
==============================================================
<style>
/*CENTER COLUMN */
.align-center {
text-align: center;
}
/*CENTER DIV*/
.center {
margin: 0 auto;
width: 80%;
}
</style>
<div class="container">
<div class="row">
<div class="center">
<div class="col-xs-2 align-center col-xs-offset-3"> <img style="width: 25%; height: 25%" src="https://image.ibb.co/ckA7ka/mr_marbles.png" alt="Mister Marbles head tilt"> </div>
<div class="col-xs-2 align-center"> <img style="width: 25%; height: 25%" src="https://image.ibb.co/bTMKyv/kermit.png" alt="Kermit the Dog"> </div>
<div class="col-xs-2 align-center"> <img style="width: 25%; height: 25%" src="https://image.ibb.co/ki8tQa/peach.png" alt="Peach posing magestically"> </div>
</div>
</div>
</div>
<img style= "width: 25%; height: 25%" src="webfina/2.png" alt="Kermit the Dog">
<img style= "width: 25%; height: 25%" src="webfina/3.png" alt="Peach posing magestically">
Related
I'm work on bootstrap project and I try to put uploading image to set grid view, but uploading image are not same size 4 images are difference size, I put the image width and height but its not working image are sketching and not display full image any one know how to fix that issue
Thanks
,
/*image*/
.thumbnail{
width: 164px;
height: 164px;
overflow: hidden;
margin: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row display-flex">
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="avatar">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="avatar">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://exp.cdn-hotels.com/hotels/2000000/1900000/1897400/1897350/7180d426_z.jpg" alt="" class="avatar">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="avatar">
</div>
</div>
</div>
Add class img-fluid on image .
Like this
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="img-fluid">
or
update the following css :
.thumbnail img {
width: 100%;
height: auto;
}
Add Following Css to the code object-fit: cover; May Help You
.thumbnail
{
width: 164px;
height: 164px;
overflow: hidden;
margin: auto;
}
.thumbnail img {
width: 164px;
height: 100%;
object-fit: cover;
}
To make images fit in the containing div, add the class img-fluid to them. This wil give them a width: 100%; height: auto;.
This won't give them all the same height, as they have different sizes/aspect ratios.
/*image*/
.thumbnail{
width: 164px;
height: 164px;
overflow: hidden;
margin: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row display-flex">
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="img-fluid avatar">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="img-fluid avatar">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://exp.cdn-hotels.com/hotels/2000000/1900000/1897400/1897350/7180d426_z.jpg" alt="" class="img-fluid avatar">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://www.averagejoes.co.uk/averagejoes.co.uk/public_html/wp-content/uploads/2018/06/ihotel-taiwan-hotel-gaming-esports-video-games-1.jpg" alt="" class="img-fluid avatar">
</div>
</div>
</div>
My images are stretching into the padding/margin that bootstrap uses to divide the columns. I want to keep the columns divided but not have the images stretch. I have been able to shrink the image using padding but then the whitespace between the columns is clickable which is not what I want.
<div id="cont_divider" class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_1">
<div class="row">
<p class="stair_image_font_style">Straight<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/straight.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_2">
<div class="row">
<p class="stair_image_font_style">Single Winder<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/single_winder.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_3">
<div class="row">
<p class="stair_image_font_style">Double Winder<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/double_winder.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_4">
<div class="row">
<p class="stair_image_font_style">Triple Winder<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/triple_winder.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
CSS:
#inner_cont_1{
background-color: #336699;
}
#inner_cont_2{
background-color: #cc6633;
}
#inner_cont_3{
background-color: #ff6633;
}
#inner_cont_4{
background-color: #ffcc66;
}
.staircase_imgs{
box-sizing: border-box;
width: 100%;
display: block;
padding: 0 1.238em 0.3em 1.238em;
}
.stair_image_font_style{
font-size: 2em;
color: #ffffff;
line-height: 1em;
padding: 0.8em 0.938em;
margin: 0;
}
.col_divide{
margin-top: 1em;
margin-bottom: 1em;
}
That's because you're using .row without a .col- class. .row has negative left and right margins which will extend the content area out beyond the parent. The padding of a .col- class nullifies this affect. Remove .row.
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
#inner_cont_1 {
background-color: #336699;
}
#inner_cont_2 {
background-color: #cc6633;
}
#inner_cont_3 {
background-color: #ff6633;
}
#inner_cont_4 {
background-color: #ffcc66;
}
.stair_image_font_style {
font-size: 2em;
color: #ffffff;
line-height: 1em;
padding: 0.8em 0.938em;
margin: 0;
}
.col_divide {
margin-top: 1em;
margin-bottom: 1em;
}
<div id="cont_divider" class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<div class="col-md-12">
<a href="#" class="image_link_styling">
<div id="inner_cont_1">
<p class="stair_image_font_style">Straight<br/>Staircase</p>
<img class="img-responsive" src="http://placehold.it/600x400/fc0" alt="straight staircase">
</div>
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<div class="col-md-12">
<a href="#" class="image_link_styling">
<div id="inner_cont_2">
<p class="stair_image_font_style">Single Winder<br/>Staircase</p>
<img class="img-responsive" src="http://placehold.it/600x400/fc0" alt="straight staircase">
</div>
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<div class="col-md-12">
<a href="#" class="image_link_styling">
<div id="inner_cont_3">
<p class="stair_image_font_style">Double Winder<br/>Staircase</p>
<img class="img-responsive" src="http://placehold.it/600x400/fc0" alt="straight staircase">
</div>
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<div class="col-md-12">
<a href="#" class="image_link_styling">
<div id="inner_cont_4">
<p class="stair_image_font_style">Triple Winder<br/>Staircase</p>
<img class="img-responsive" src="http://placehold.it/600x400/fc0" alt="straight staircase">
</div>
</a>
</div>
</div>
</div>
</div>
</div>
P.S. I also removed your .staircase_imgs class as it's not required once you remove the .row elements. I also rearranged some of your markup like a to inside the Bootstrap column element. This way the white space around the column element isn't clickable.
Remove the extra <div class="row"> you have. This creates margin: 0 -15px; for .col to rest in, but you do not have a -col in this .row ... so simply remove it.
Like this:
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_3">
<div class="row"> <!-- REMOVE THIS DIV -->
<p class="stair_image_font_style">Double Winder<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/double_winder.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>
First of all, you should place your a tag inside bootstrap column, in order to be inside that padding column. Second, you added unnecessary .row classes.
Your structure should be something like this:
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<div class="col-md-12">
<div id="inner_cont_1">
<a href="#" class="image_link_styling">
<p class="stair_image_font_style">Straight<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/straight.jpg" alt="straight staircase">
</a>
</div>
</div>
</div>
</div>
I made a fiddle with your code: fiddle
Hope this helps!
your <a> tag starts way outside of the <img> tag. Instead of using the link over the multiple <div>'s try placing the <a> tag just around the <img> See the example below:
<div class="col-md-12">
<a href="..">
<img src="..." class="img-responsive">
</a>
</div>
So I have basically used manual percentages to make these images lie next together. As you see they are not very neatly layout or organized. How can I make it look more dashing?
Here's the code:
<div class="jumbotron jumbotron-fluid" style=" margin-top: 90px; ">
<div class="container">
<div class="row">
<div class="col-lg-2">
<img src="./assets/img/glass.jpg" class="img-responsive " style="width:95%"/>
<img src="./assets/img/rift.jpg" class="img-responsive m-y-1" style="width:95%;"/>
</div>
<div class="col-lg-8">
<img src="./assets/img/mhacks.jpg" class="img-responsive" style="width:100%; "/>
</div>
<div class="col-lg-2">
<img src="./assets/img/mindwave.png" class="img-responsive" style="width:120%;"/>
<img src="./assets/img/VR.png" class="img-responsive m-y-1" style="width:120%;"/>
</div>
</div>
</div>
</div>
Here's how it looks like:
http://imgur.com/e2I3yLu
Also here's the link to the website:
monajalal.github.io
Any suggestion is really appreciated. I wonder if there's a more straightforward method to image layout or any automatic method?
Set each image as a background image in a div:
<div class="jumbotron jumbotron-fluid" style=" margin-top: 90px; ">
<div class="container">
<div class="row">
<div class="col-lg-2">
<div style="background: url('./assets/img/glass.jpg'); background-size: cover;" class="img-responsive"></div>
<div style="background: url('./assets/img/rift.jpg'); background-size: cover;" class="img-responsive"></div>
</div>
<div class="col-lg-8">
<div style="background: url('./assets/img/mhacks.jpg'); background-size: cover;" class="img-responsive-large"></div>
</div>
<div class="col-lg-2">
<div style="background: url('./assets/img/mindwave.png'); background-size: cover;" class="img-responsive"></div>
<div style="background: url('./assets/img/VR.png'); background-size: cover;" class="img-responsive"></div>
</div>
</div>
</div>
</div>
Then set this css:
.img-responsive {padding-top: 60%; margin-bottom: 10px;}
.img-responsive-large {height: 208px; margin-bottom: 10px;}
#media screen and (max-width: 940px) {
.img-responsive-large {height: auto; padding-top: 60%;}
}
Try this... What I did was work with the grid. Use the padding from columns and even it with margins between the images, also set the images to 100% width. Class img-responsive sets a max-width of 100%, at least this way the image will fill the column.
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<div class="col-lg-8">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive"/>
</div>
<div class="col-lg-2">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive "/>
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive m-y-1"/>
</div>
<div class="col-lg-2">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive"/>
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive m-y-1"/>
</div>
</div>
</div>
</div>
Remove the inline styling - and instead target the images in the css and add this.
.jumbotron img { width: 100%; margin: 15px 0; }
In my school project. I am trying to create a photo gallery like view but I need that between two photos some space comes the code is here
<div class="container">
<h2 style="text-align: center;">Physics</h2>
<br>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-2" style="background-color: aliceblue;">
<img class="img-responsive" class="thumbnail" class="img-center center-block" src="assets/GirishJain2.JPG" alt="Girish Jain">
<p style="text-align:justify;">
<b> Girish Jain</b> <br>
b.Tech,IIT-Delhi<br></br>
Exp 14 years
</p>
</div>
<div class="col-sm-6"></div>
<div class="col-md-2" style="background-color: lavender;">
<img class="img-responsive" src="assets/prateek.JPG" alt="Prateek Jain">
<p style="text-align:justify;">
<b> Prateek Jain</b> <br>
b.Tech-MNIT,Jaipu<br></br>
Exp 7 years
</p>
</div>
<div class="col-md-2" style="background-color: aliceblue;">
<img class="img-responsive" class="thumbnail" class="img-center center-block" src="assets/sidharthjain.JPG" alt="Siddharth Jain">
<p style="text-align:justify;">
<b> Sidharth Jain</b> <br>
b.Tech-MNIT,Jaipur<br></br>
Exp 14 years
</p>
</div>
</div>
</div>
and the pages like
below the physics section I want a some space between each photo
Allow the col-md-4 to continue to serve it's current purpose. You want the image to be inside of a div who's job will be to give space.
HTML
<div class="col-md-4 col-xs-4 col-sm-4">
<div class="image-padding">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame"/>
</div>
</div>
CSS
.image-padding {
padding: 5px;
}
.image-padding img {
width: 100%;
}
CodePen
http://codepen.io/Goosecode/pen/oxaEjR
use the below it will work fine with you wrap it inside your container div
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6 col-xs-6 col-sm-6">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame&w=970"/>
</div>
<div class="col-md-6 col-xs-6 col-sm-6">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame&w=970"/>
</div>
</div>
<hr>
<!--for other images !-->
<div class="row">
<div class="col-md-4 col-xs-4 col-sm-4">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame"/>
</div>
<div class="col-md-4 col-xs-4 col-sm-4">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame"/>
</div>
<div class="col-md-4 col-xs-4 col-sm-4">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame"/>
</div>
</div>
This can be easily achieved using Bootstrap.
HTML
<div class="col-md-4" id="element">
Your Content.
</div>
CSS
#element {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}
So i'm building this portfolio type website and i just can't get the bootstrap grid to work properly. As you can see in the image, the second big row, which starts with the big image is not symmetric to the first row. I don't really understand where the problem is. I've managed to do that without bootstrap using fixed width and height, but that really is not an option as i would loose all the responsiveness. What am i doing wrong here?
<section class="container-fluid" style="max-width: 1980px; min-width:1280px;">
<div class="row">
<div class="col-md-7" style="padding-right: 0">
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
</div>
<div class="col-md-5" style="padding-left: 0">
<div class="col-md-12" style="padding: 5px;">
<img src="http://placehold.it/780x415" class="img-responsive">
</div>
</div>
</div>
<div class="row">
<div class="col-md-5" style="padding-right: 0">
<div class="col-md-12" style="padding: 5px;">
<img src="http://placehold.it/780x415" class="img-responsive">
</div>
</div>
<div class="col-md-7" style="padding-left: 0">
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
</div>
</div>
</section>
UPDATE:
So I actually managed to solve my problem, by creating two new column classes - col--small-blocks and col--large-blocks
.col-xs-small-blocks,
.col-sm-small-blocks,
.col-md-small-blocks,
.col-lg-small-blocks {
position: relative;
min-height: 1px;
padding: 0;
}
.col-xs-small-blocks {
width: 60%;
float: left;
}
#media (min-width: 768px) {
.col-sm-small-blocks {
width: 60%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-small-blocks {
width: 60%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-small-blocks {
width: 60%;
float: left;
}
}
.col-xs-large-blocks,
.col-sm-large-blocks,
.col-md-large-blocks,
.col-lg-large-blocks {
position: relative;
min-height: 1px;
padding: 0;
}
.col-xs-large-blocks {
width: 40%;
float: left;
}
#media (min-width: 768px) {
.col-sm-large-blocks {
width: 40%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-large-blocks {
width: 40%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-large-blocks {
width: 40%;
float: left;
}
}
This solved the problem, that bootstrap originally doesn't have classes for 5 column grid, so as you can see I created a column for my small images which takes up 60% of space and a column for my large blocks which takes up 40% of space. After that I just used col-md-4 to create the small blocks and col-md-12 for the large blocks
<section class="container-fluid" style="max-width: 1980px; min-width:1280px;">
<div class="row">
<div class="col-md-small-blocks">
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
</div>
<div class="col-md-large-blocks">
<div class="col-md-12 block-padding">
<img src="http://placehold.it/750x405" class="img-responsive">
</div>
</div>
</div>
<div class="row">
<div class="col-md-large-blocks">
<div class="col-md-12 block-padding">
<img src="http://placehold.it/750x405" class="img-responsive">
</div>
</div>
<div class="col-md-small-blocks">
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
</div>
</div>
</section>
And now as you can see, everything is symmetric and responsive :)