I have a mysqli_fetch_assoc that return me images. I need put all of these images centered horizontally. I try use center-block on all of this, but only center one and the others images goes down.
For example:
If mysql give me 2 images:
<body>
<div class="col-xs-12">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30" class="center-block">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30" class="center-block">
</div>
</body>
https://jsfiddle.net/ff4rj8zs/
If mysql give me 3 images:
<body>
<div class="col-xs-12">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30" class="center-block">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30" class="center-block">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30" class="center-block">
</div>
</body>
https://jsfiddle.net/96czjmoh/
As you can see, the images goes down, and don't stay in the same line. I need that all images stay centered in the same line independent of the quantity.
Thanks!
Use this:
<body>
<div class="col-xs-12 text-center">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30">
</div>
</body>
See: https://jsfiddle.net/ff4rj8zs/3/
Is this what you're after?
<div class="col-xs-12 text-center">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3-">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30">
</div>
<div class="col-xs-12 col-sm-4 col-md-3-">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30">
</div>
<div class="col-xs-12 col-sm-4 col-md-3-">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30">
</div>
</div>
</div>
Related
So there two columns , i wanna fit my image inside my first column so my second column can go down!
enter image description here
my HTML :
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="hero-image container-fluid">
<img class="man-with-laptop img-fluid"
src="https://demo.templateflip.com/super/images/illustrations/hello3.svg" alt="">
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="hero-text-area container-fluid">
<p>HELLO!</p>
</div>
</div>
</div>
</div>
Try it like this below and see what happens.... 1 container, 1 row.
Also, it looks like you're adding a lot of your own CSS I can see from your class types. I think your added CSS is messing about with your layout and confusing Bootstrap.
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-sm-12">
<img class="man-with-laptop img-fluid" src="https://demo.templateflip.com/super/images/illustrations/hello3.svg" alt="">
</div>
<div class="col-lg-6 col-sm-12">
<p>HELLO!</p>
</div>
</div>
</div>
I am trying to create this:
I have the left and right image and the monkey image.
I was trying to create a row and make the left image col-3, the right image col-3 and the monkey and text col-6 in the middle.
Everything is stacking up on each other, comes out of the screen and not working. How can I make this sort of thing?
<section class="hero-area">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-xs-3">
<img src="images/hero-left.svg" class="" alt="">
</div>
<div class="col-xs-6 col-md-126>
<h1 class="">
<b>monKey</b> Generator</h1>
<br>
<h2 class="">Generate a
<b>unique monkey</b> avatar
<br> from a
<b>Banano public key</b>
</h2>
<img src="https://bananomonkeys.herokuapp.com/image?address=ban_3tapge8i4kw9wa4irgda7epm4gaurr4rnp7ybjziphkt48afd6ba5pnaegs6"
class="" alt="">
</div>
<div class="col-md-3 col-sm-3">
<img src="images/hero-right.svg" class="" alt="">
</div>
</div>
</div>
</section>
There are couple of typos in your snippet above eg: col-md-126 and missing " after that. Also bootstrap 4 does not have xs on cols so using just col-3 col-6 col-3 would do the job.
See the snippet below.
img {
width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section class="hero-area">
<div class="container-fluid">
<div class="row">
<div class="col-3">
<img src="images/hero-left.svg" alt="monkey left">
</div>
<div class="col-6">
<h1>
<b>monKey</b> Generator
</h1>
<br>
<h2>Generate a
<b>unique monkey</b> avatar
<br> from a
<b>Banano public key</b>
</h2>
<img src="https://bananomonkeys.herokuapp.com/image?address=ban_3tapge8i4kw9wa4irgda7epm4gaurr4rnp7ybjziphkt48afd6ba5pnaegs6" />
</div>
<div class="col-3">
<img src="images/hero-right.svg" class="" alt="monkey right">
</div>
</div>
</div>
</section>
I am trying to build this kind i image grid using Bootstrap but I have some issue with understanding how to create the code. Here is an final example.
Here is my code until now
.border { border: 1px solid red; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="516" title="someText" alt="someText">
</div>
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
</div>
<div class="row">
<div class="col-md-8 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
</div>
</div><!-- container -->
What you have is a row that has three columns in it. Two of those three columns have one column that have two rows.
Here is a basic example you can build off of.
.gallery .v-spacer {
margin-top: 30px; /* Default Bootstrap gutter (10px) x 2 */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row gallery">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<img class="img-responsive" src="http://placehold.it/600x400/FC0/">
</div>
</div>
<div class="row v-spacer">
<div class="col-sm-12">
<img class="img-responsive" src="http://placehold.it/600x400">
</div>
</div>
</div>
<div class="col-sm-4">
<img class="img-responsive" src="http://placehold.it/600x830">
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<img class="img-responsive" src="http://placehold.it/600x400">
</div>
</div>
<div class="row v-spacer">
<div class="col-sm-12">
<img class="img-responsive" src="http://placehold.it/600x400/FC0/">
</div>
</div>
</div>
</div>
Notice we continue to use .row and the column classes .col-**-** to maintain proper structure of the grid which use padding and negative margins to create the gutters (space) between the columns and their containers.
Edit You'll have a bit of an issue with the middle image if you try to make it responsive. The middle image will not always line up with the stacked images. This is because the total height of the stacked image columns is two variable heights plus a fixed height. The middle image won't be able to match that 100% because it's always a single variable height and won't be able to match the fixed height that's introduced in the stacked columns.
you should follow below grid structure
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="row">
<div class="col-md-12 border">
1
</div>
<div class="col-md-12 border">
2
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="row">
<div class="col-md-12 border long">
3
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="row">
<div class="col-md-12 border">
4
</div>
<div class="col-md-12 border">
5
</div>
</div>
</div>
</div>
</div>
see fiddle
can try with below code.
Demo: https://jsfiddle.net/uurzr45k/2/
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
I'm using bootstrap and I have a row with 1 column and another row with 2 columns.
All items have one picture in it, and should take up all the avaible space inside the column.
So far I can't get the first image on the first row to fill the div width,this image resizes correctly when I reduce the window, but when I enlarge it, the picture will
resize to its original maximum size when I want it to be always same as the div width
Here is the snippet : https://jsfiddle.net/gd0obgg9/
Here is the code :
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Portfolio Item
</h1>
</div>
</div>
<div class="row">
<div></div>
<div class="col-md-12">
<img class="img-responsive" src="http://placehold.it/550x200" alt="">
</div>
<div></div>
</div>
<div class="row">
<hr>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
</div>
</div>
</body>
I want my 550x200 to fill enterely the width
Any advice ? thanks
If I understood you correctly, to give the image full width use:
.img-responsive {
width: 100%;
}
Note that this will, in some cases, distort the image to cover the full div
In my test:
Update your css to set the width of img elements inside your columns to 100%.
you should add width:100% to your img
here the new code
<body>
<!-- Page Content -->
<div class="container">
<!-- Portfolio Item Heading -->
<div class="row">
<div class="col-lg-12 col-xs-12 col-md-12">
<h1 class="page-header">Portfolio Item
<small>Item Subheading</small>
</h1>
</div>
</div>
<!-- /.row -->
<!-- Portfolio Item Row -->
<div class="row">
<div>
</div>
<div class="col-md-12">
<img class="img-responsive" style="width:100%" src="http://placehold.it/550x200" alt="">
</div>
<div>
</div>
</div>
<!-- /.row -->
<!-- Related Projects Row -->
<div class="row">
<hr>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
<div class="col-sm-6 col-xs-12">
<a href="#">
<img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt="">
</a>
</div>
</div>
</div>
</body>
I'm not sure if I'm doing anything wrong but I'm getting a weird bug in a bootstrap grid when I resize my browser. It happens in a matter of a pixel and stops when I keep resizing. One of the images in the grid gets out of place and goes to the bottom. I'll attach a picture of the fail and another one of the normal.
Does anyone know what this bug is and how to fix it?
this is my code:
<section class="container-fluid">
<div class="row">
<div class="col-xs-12"> <img id="imgClickAndChange" src="img.jpg" onclick="changeImage(1)"/> </div>
</div>
<div class="row no-pad">
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img1.jpg"/>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img2.jpg"/>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img1.jpg"/>
</div>
</div>
<div class="row no-pad">
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img2.jpg"/>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img1.jpg"/>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img.jpg2"/>
</div>
</div>
</section>
Only css I used:
Btw it's a customized bootstrap (but the only thing I customized was the min width for a large screen from 1200px to 1900px and removed the grid glutter)
.grid { width: 100%;}
Thank you.
With Bootstrap, try applying the class img-responsive to your images to ensure they never exceed 100% width of their parent.
<img class="img-responsive" src="img1.jpg"/>
Documentation: http://getbootstrap.com/css/#images
If all the images are the same size, there is no issue:
https://jsbin.com/muzug/1/
https://jsbin.com/muzug/1/edit?html,css,output
Also, not necessary to have the col-xs-12, it will always be 100% under the last min-width class used.
Added a rounding error correction.
CSS:
.row.no-pad img {width:100.1%;}
.row.no-pad [class*="col-"] {padding:0;margin-bottom:-1px}
HTML
<section class="container-fluid">
<div class="row no-pad">
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
</div>
</div>