I'm using Bootstrap and trying to make 3 images to be centered. For example, red color boxes are how my images look like, and I want to make it look like blue color boxes:
I tried getting rid of the margin and padding, but I still want some space between the images. Also I tried using { display: table; }, display: table-cell; vertical-align: middle; but somehow it does not do anything to my images... Is there a way to get images to the center with some padding to them in Bootstrap? Below is my code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
.row {
display: flex;
align-items: center;
justify-content: center;
}
.column {
flex: 33.33%;
padding: 50px;
width: 100%;
}
<div class="album text-center">
<div class="row">
<div class="column">
<img src="images/tour1.jpeg" alt="one" style="width:100%">
</div>
<div class="column">
<img src="images/tour2.jpg" alt="two" style="width:100%">
</div>
<div class="column">
<img src="images/tour3.jpeg" alt="three" style="width:100%">
</div>
<div class="column">
<img src="images/tour1.jpeg" alt="one" style="width:100%">
</div>
<div class="column">
<img src="images/tour2.jpg" alt="two" style="width:100%">
</div>
<div class="column">
<img src="images/tour3.jpeg" alt="three" style="width:100%">
</div>
</div>
</div>
Thank you!
Bootstrap 4 has justify-content-around class which does the job. Consider to use narrower container If you want to obtain smaller gap between images.
PS: You should avoid using col class within image wrappers.
<div class="container">
<div class="row justify-content-around">
<div class="colx"><img src="https://place-hold.it/200x400" alt="" class="img-fluid"></div>
<div class="colx"><img src="https://place-hold.it/200x400" alt="" class="img-fluid"></div>
<div class="colx"><img src="https://place-hold.it/200x400" alt="" class="img-fluid"></div>
</div>
</div>
JSFiddle
Just add this class "justify-content-around".
<div class="album">
<div class="row justify-content-around">
<div class="column">
<img src="images/tour1.jpeg" alt="one" style="width:100%">
</div>
<div class="column">
<img src="images/tour2.jpg" alt="two" style="width:100%">
</div>
<div class="column">
<img src="images/tour3.jpeg" alt="three" style="width:100%">
</div>
<div class="column">
<img src="images/tour1.jpeg" alt="one" style="width:100%">
</div>
<div class="column">
<img src="images/tour2.jpg" alt="two" style="width:100%">
</div>
<div class="column">
<img src="images/tour3.jpeg" alt="three" style="width:100%">
</div>
</div>
</div>
Related
When adding the bootstrap class "img-fluid" to my images they don't appear, when inspecting the element it sets the image at 0x0 pixels.
The html:
<div class="col">
<div class="row no-gutters">
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid"
alt="placeholder">
</div>
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid" alt="placeholder">
</div>
<div class="w-100"></div>
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid" alt="placeholder">
</div>
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid" alt="placeholder">
</div>
</div>
</div>
The images are supposed to be the same size as the parent(div.col) and be responsive to the parent.
Here's an answer based on my comment.
Because you have a .col element as a child of a flex parent, the flex-basis is set to 0. That basically equates to width: 0.
To get around that, set the flex-basis to auto on the .col that are children of the .row element.
.row>.col {
flex-basis: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col">
<div class="row no-gutters">
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
<div class="w-100"></div>
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
</div>
</div>
i have a problem with Bootstrap 4. Left box does not align with a right box. There is a HTML and CSS. How can I solve this problem?
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Section Title</h1>
</div>
<div class="col-md-6">
<div class="left-box">
<img src="images/category-1.jpg" alt="" class="img-fluid">
</div>
<div class="left-box">
<img src="images/category-2.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-6">
<div class="right-box">
<img src="images/category-3.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
CSS:
.left-box{ position:relative; padding-top:30px;}
.right-box{position:relative; padding-top:30px;}
1
Thank you.
There is two kind of Container in Bootstrap, in your case container-fluid is more adapted.
Change container to container-fluid
Actually the image is 450*450pixels (both height and width is 15.88cm)
so i want to adjust them in equally to screen please see my screen shot and as you see the name also came in the bottom of each image the name should not so much big and small too it just fit with the image
img {
padding float: left;
border-radius: 150%;
}
<h1>ACTOR</h1>
<img src="img/chadwick.jpg" alt="chadwick" height="15%" width="15%">
<img src="img/michael.jpg" alt="michel" height="15%" width="15%">
<img src="img/lupita.jpg" alt="lupita" height="15%" width="15%">
Bootstrap 3 solution
HTML structure
<div class="row">
<div class="col-...">
<img ...>
<h5>...</h5>
</div>
</div>
Added padding-left and padding-right to each column to make space. Added margin-top to <h5> (Could be something else).
Example
.my-row>div {
padding: 0 7vw;
}
.my-row h5 {
margin-top: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row my-row">
<div class="col-xs-4 text-center">
<img src="http://placehold.it/450x450" alt="" class="img-responsive img-circle">
<h5>Name 1</h5>
</div>
<div class="col-xs-4 text-center">
<img src="http://placehold.it/450x450" alt="" class="img-responsive img-circle">
<h5>Name 2</h5>
</div>
<div class="col-xs-4 text-center">
<img src="http://placehold.it/450x450" alt="" class="img-responsive img-circle">
<h5>Name 3</h5>
</div>
</div>
Bootstrap 4 solution
<div class="row text-center">
<div class="col">
<div><img src="https://via.placeholder.com/450x450" alt="chadwick"></div>
<div>chadwick</div>
</div>
<div class="col">
<div><img src="https://via.placeholder.com/450x450" alt="michel"></div>
<div>michel</div>
</div>
<div class="col">
<div><img src="https://via.placeholder.com/450x450" alt="lupita"></div>
<div>lupita</div>
</div>
</div>
i was using bootstrap grid system to format picture like:
this is my code :
<div class="row">
<div class="col-md-4">
<div class="well"><img src="..." class="img-responsive"">
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<div class="well"><img src="..." class="img-responsive" alt="Responsive image"></div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="well"><img src="..." class="img-responsive" alt="Responsive image"></div>
</div>
</div>
</div>
</div>
I want the picture to be responsive so I put class="img-responsive" on the <img>
<img src="..." class="img-responsive" alt="Responsive image">
but end up like the right picture. if i dont use class="img-responsive" the image will show on full resulution. how i fix this? (please give me a easy explanation because i'm a noob :) )
You can apply CSS Flexbox rules on .row & .col-*-*. I've used some custom classes (all the .col-*-* has a class called .item). Like:
.row {
display: flex;
}
.item {
display: flex;
flex-direction: column;
}
.item.left {
flex-direction: row;
}
Have a look at the snippet below:
.row {
display: flex;
}
.item {
display: flex;
flex-direction: column;
}
.item.left {
flex-direction: row;
}
.item.left .well {
width: 100%;
align-self: stretch;
}
.item.left .well img {
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="item left col-sm-4">
<div class="well"><img src="http://placehold.it/200x200" class="img-responsive">
</div>
</div>
<div class="item col-sm-8">
<div class="row">
<div class="col-sm-6">
<div class="well"><img src="http://placehold.it/100x100" class="img-responsive" alt="Responsive image"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="well"><img src="http://placehold.it/100x100" class="img-responsive" alt="Responsive image"></div>
</div>
</div>
</div>
</div>
Hope this helps!
You should use following HTML structure as you need left and right columns having equal width:
<div class="container">
<div class="row">
<div class="col-xs-6">
// content....
</div>
<div class="col-xs-6">
// content....
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="well"><img src="..." class="img-responsive">
<br>
<br>
<br>
<br><br>
</div>
</div>
<div class="col-xs-6">
<div class="well"><img src="..." class="img-responsive" alt="Responsive image"></div>
<div class="well"><img src="..." class="img-responsive" alt="Responsive image"></div>
</div>
</div>
</div>
I want to get the grid system to center but it won't, i was thinking maybe it has something to do with my pictures' border?. here's the screen shotwhat it is right now
what i want it to be
HTML:
<div class=" container">
<div class="row">
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
</div>
</div>
CSS:
.optionBorder
{
border: 1px solid #f5f5f5;
height: 130px;
width: 130px;
line-height: 130px;
text-align: center;
}
Take another element before row with some width and make them center
for example.:
HTML
<div class="test">
<div class="row">
<div class="col-md-4">
<div class="optionBorder">
<img src="http://placehold.it/350x150" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="http://placehold.it/350x150" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="http://placehold.it/350x150" height="74px" width="50px">
</div>
</div>
</div>
</div>
CSS
.test {
width: 450px;
margin: auto;
margin-bottom: 15px;
}
bootply
<style>
.paraentCont{
width:100%;
max-width:300px;
margin:auto;
}
</style>
<div class=" container">
<div class="paraentCont">
<div class="row">
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
</div>
Give to .row fixed width such as 700px, and margin-left/right auto
look at this example http://www.bootply.com/GFDHc6p5tg
Actually here is there right way to go while using Bootsrap
Use the predefine class text-center
Use q Bootstrap helper like .inline-block{display: inline-block}
.inline-block{display: inline-block}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class=" container">
<div class="row text-center">
<div class="col-md-4 inline-block">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4 inline-block">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4 inline-block">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
</div>
</div>