I recently inherited some (messy) code and want to center two rows of images, each row with three images each. I have been trying to figure out why I can't get them to center.
Here's my HTML
<div class="top1">
<div class="container" style="background-color:#fff; padding-top:10%; padding-bottom:400px; padding-top:15px; padding-left:30px; padding-right:30px;">
<div class="row">
<div class="col-md-2 col-xs-12 inspire_others">
<img style="position: relative;" class="img-responsive" src="images/1.jpg" width="100%" height="auto" />
</div>
<div class="col-md-2 col-xs-12 inspire_others" style="margin-top:5%">
<img style="position: relative;" class="img-responsive" src="images/2.jpg" width="100%" height="auto" style="margin-top:5%;" /> <!--width="220px" height="240px"-->
</div>
<div class="col-md-2 col-xs-12 inspire_others">
<img style="position: relative;" class="img-responsive" src="images/3.jpg" width="100%" height="auto" />
</div>
</div>
<div class="row" style="padding-top: 50px;">
<div class="col-md-2 col-xs-12 inspire_others">
<img style="position: relative;" class="img-responsive" src="images/4.jpg" width="100%" height="auto" style="margin-top:5%;" />
</div>
<div class="col-md-2 col-xs-12 inspire_others" style="margin-top:5%">
<img style="position: relative;" class="img-responsive" src="images/5.jpg" width="100%" height="auto" />
</div>
<div class="col-md-2 col-xs-12 inspire_others">
<img style="position: relative;" class="img-responsive" src="images/6.jpg" width="100%" height="auto" style="margin-top:5%;" />
</div>
</div>
<br />
</div>
</div>
I'm using bootstrap.
I cleaned up your code, and you need col-md-4 instead col-md-2 because bootstrap by default has 12 columns so 12 / 3 is 4. and add margin:auto in img to center image because img in bootstrap is already display:block
[class^="col"] {
border: green 1px solid
}
img {
margin: auto
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="top1">
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-12 inspire_others">
<img class="img-responsive" src="//dummyimage.com/200x200" />
</div>
<div class="col-md-4 col-xs-12 inspire_others">
<img class="img-responsive" src="//dummyimage.com/200x200" />
<!--width="220px" height="240px"-->
</div>
<div class="col-md-4 col-xs-12 inspire_others">
<img class="img-responsive" src="//dummyimage.com/200x200" />
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-12 inspire_others">
<img class="img-responsive" src="//dummyimage.com/200x200" />
</div>
<div class="col-md-4 col-xs-12 inspire_others">
<img class="img-responsive" src="//dummyimage.com/200x200" />
</div>
<div class="col-md-4 col-xs-12 inspire_others">
<img class="img-responsive" src="//dummyimage.com/200x200" />
</div>
</div>
<br />
</div>
</div>
Good news! There's actually a really easy way to center the images.
tldr; - Just add the code below in a <style> tag:
.row {
display: flex;
justify-content: center;
}
Long Story
It turns your .row div into a flexbox (more info here: http://www.w3schools.com/css/css3_flexbox.asp). The justify-content property centers all the divs inside .row (and the images in the divs).
Related
There will be a certain amount of images in database which is unknown when this page is being redirected, which means I can't set the amount of div accordingly. What I am after is no matter how many images are there, I would like to display it in a manner of three images in a row, the fourth one will start from the left side of a new row. I try to use col-md-4 try to align three images on a row, but the fourth image is either on the center or right side of the next row ?
This is what I am after. Let's say there are 5 images in database, I would like it to be displayed like this
<div class="row col-md-12">
#foreach($images as $image)
<div class="col-md-4">
<img src="{{ $image->image }}" alt="{!! $image->title !!}" width="50%" height="auto" >
<div class="btn btn-primary edit-image-btn">Edit</div>
<div class="btn btn-danger delete-image-btn">Delete</div>
</div>
#endforeach
</div>
Problem
The height of your first image is greater than the height of images two and three, this means that when the fourth image is added it is added on a new line, but where there is first available vertical space.
You can actually incorporate both of the solutions below simultaneously, clearfix is the most appropriate and versatile, but there are some design benefits from the alternative solution.
clearfix Solution
Adding a div with .clearfix will force the grid system to create what visually appears to be a new row. This is the best solution, you can compare the index of the image and add a clearfix div every third image.
Alternative Solution
You could place your images as backgrounds to a div (rather than using img tags) and force these divs to be a set height using CSS. this isn't solving your problem, it is just avoiding it.
If you set the background-size: cover; background-position: center center; then all images would cover the available space, although you would lose some of the image this is the best solution design wise (my preference).
If having all of the image displayed is important then use background-size: contain;.
.col-xs-4 {
padding:4px;
}
.image-div {
height: 100px;
background-size:cover;
background-position: center center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Ej0hUpn6wbrOTJtRExp8jvboBagaz+Or6E9zzWT+gHCQuuZQQVZUcbmhXQzSG17s" crossorigin="anonymous">
<h4>Current Problem</h4>
<div class="container">
<div class="col-md-12 row">
<div class="col-xs-4">
<img src="https://dummyimage.com/600x600/000/fff" width="100%" height="auto">
</div>
<div class="col-xs-4">
<img src="https://dummyimage.com/600x400/000/fff" width="100%" height="auto">
</div>
<div class="col-xs-4">
<img src="https://dummyimage.com/600x400/000/fff" width="100%" height="auto">
</div>
<div class="col-xs-4">
<img src="https://dummyimage.com/600x400/000/fff" alt="alternative" width="100%" height="auto" >
</div>
</div>
</div>
<h4>`clearfix` Solution</h4>
<div class="container">
<div class="col-md-12 row">
<div class="col-xs-4">
<img src="https://dummyimage.com/600x600/000/fff" width="100%" height="auto">
</div>
<div class="col-xs-4">
<img src="https://dummyimage.com/600x400/000/fff" width="100%" height="auto">
</div>
<div class="col-xs-4">
<img src="https://dummyimage.com/600x400/000/fff" width="100%" height="auto">
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<img src="https://dummyimage.com/600x400/000/fff" alt="alternative" width="100%" height="auto" >
</div>
</div>
</div>
<h4>Alternative Solution</h4>
<div class="container">
<div class="col-md-12 row">
<div class="col-xs-4">
<div class="image-div" style="background-image:url('https://dummyimage.com/600x600/000/fff'); " >
</div>
</div>
<div class="col-xs-4">
<div class="image-div" style="background-image:url('https://dummyimage.com/600x400/000/fff'); " >
</div>
</div>
<div class="col-xs-4">
<div class="image-div" style="background-image:url('https://dummyimage.com/600x400/000/fff'); " >
</div>
</div>
<div class="col-xs-4">
<div class="image-div" style="background-image:url('https://dummyimage.com/600x400/000/fff'); " >
</div>
</div>
</div>
</div>
You should not use row and col class names in the same div:
<div class='row'>
<div class="col-md-12">
#foreach($images as $image)
<div class="col-md-4">
<img src="{{ $image->image }}" alt="{!! $image->title !!}" width="50%" height="auto" >
<div class="btn btn-primary edit-image-btn">Edit</div>
<div class="btn btn-danger delete-image-btn">Delete</div>
</div>
#endforeach
</div>
</div>
Check below code and updated fiddle https://jsfiddle.net/dgmrsnb6/
<div class="container">
<div class="row images-wrapper">
<div class="col-md-4 col-sm-4">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
<div class="col-md-4 col-sm-4">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
<div class="col-md-4 col-sm-4">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
<div class="col-md-4 col-sm-4">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
<div class="col-md-4 col-sm-4">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
<div class="col-md-4 col-sm-4">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
<div class="col-md-4 col-sm-4">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
<div class="col-md-4 col-sm-4">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
</div>
</div>
<div class="row col-md-12">
#foreach($images as $image)
<div class="col-md-3">
<img src="{{ $image->image }}" alt="{!! $image->title !!}" width="100" height="auto" >
<div class="btn btn-primary edit-image-btn">Edit</div>
<div class="btn btn-danger delete-image-btn">Delete</div>
</div>
#endforeach
</div>
i have problem in Bootstrap Thumbnails.
my thumbnails is like that:
img01. but want to be horizontal.
What am i doing ?
My Code:
HTML:
<div class="hrs" align="center">
<div class="row">
<div class="col-xs-6 col-lg-6 col-md-6 col-sm-6">
<div class="thumbnail">
<img src="img/AxMahsool.jpg" alt="AxMahsool01" class="img-responsive" />
<img src="img/AxMahsool.jpg" alt="AxMahsool02" class=" img-responsive" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-lg-6 col-md-6 col-sm-6">
<div class="thumbnail">
<img src="img/AxMahsool.jpg" alt="AxMahsool03" class=" img-responsive" />
<img src="img/AxMahsool.jpg" alt="AxMahsool04" class=" img-responsive" />
</div>
</div>
</div>
</div>
Css:
.hrs{
display: table;
margin: 0 auto;
padding: 20px;
color: white;
It's because you have them in separate <div class="row"> containers. What you should do is put all of your images in the same row container(so take out the second <div class="row">) -and/or- try adding this code to your CSS:
.thumbnail>img { display: inline-block; }
I am trying to create a website with several images and content in columns using Bootstrap as a framework.
Is it possible to somehow make all of the columns automatically adjust to the height of the row? Here is my code:
<div class="row">
<div class="col-md-6 col-xs-12">
<img src="images/main.jpg" class="img-responsive" alt="" />
<div class="slogan">
<h1>WEBSITE TITLE.<br />SLOGAN.</h1>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="box content">
<h3>Services and Pricing</h3>
<br />
READ MORE
</div>
<img src="images/1.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-3 col-xs-6">
<img src="images/2.jpg" class="img-responsive" alt="" />
<div class="box content">
<h3>Student Discount</h3>
<br />
LEARN MORE
</div>
</div>
</div>
In the above example the two "col-md-3 col-xs-6" columns are not the same height as the "col-md-6 col-xs-12" column.
How can I make them adjust to the height of the row so that all of the content is in line?
Thanks.
You may use css flexbox to achieve same height for all the columns. So your code would be:
<div class="row heightadjust">
<div class="col-md-6 col-xs-12">
<img src="images/main.jpg" class="img-responsive" alt="" />
<div class="slogan">
<h1>WEBSITE TITLE.<br />SLOGAN.</h1>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="box content">
<h3>Services and Pricing</h3>
<br />
READ MORE
</div>
<img src="images/1.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-3 col-xs-6">
<img src="images/2.jpg" class="img-responsive" alt="" />
<div class="box content">
<h3>Student Discount</h3>
<br />
LEARN MORE
</div>
</div>
</div>
and write a custom css
.heightadjust {
display: flex;
}
I wanted to create an image grid with one full image on the left and 4 thumbnail images on right of the big image. Something like what I've done here:
https://codepen.io/ashwindkini/pen/qabRok
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://placehold.it/450x450" alt="" />
</div>
<div class="row">
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
</div>
How do I prevent the second set of images (thumbnails) from increasing the size of row?
Are you able to make the larger image actually a larger image so that it scales responsively in comparison with the smaller "thumbnails"?
It would help to remove padding from the columns so that the width of the image (forced by column padding) doesn't limit the height of the image.
Everything can go in a single row..
<div class="container">
<div class="row">
<div class="img col-sm-6 col-md-6">
<img src="//placehold.it/600/666" class="center-block img-responsive" alt="big image">
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450/EEE" class="img-responsive" >
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450" class="img-responsive" >
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450" class="img-responsive" >
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450/444" class="img-responsive" >
</div>
</div>
</div>
http://www.codeply.com/go/y9nZTlXSWT
The "row" element should not be a direct child of another row element. You should put it as a child of another col-md-6.
Here's the example:
https://codepen.io/anon/pen/dpGvOJ
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://placehold.it/450x450" alt="" />
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
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;
}