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>
Related
How set three photos like this:
The photos cover all width only if i set in css width: 100vh for all, but then middle photo is disproportionate (black frames show how i would like it to look like):
When i set middle photo width individually is worst because even i set 100vh width everything is breaking and it looks like this:
Here is HTMl code:
<main>
<div class="container-fluid">
<div class="row justify-content-sm-center">
<div class="col-lg-4 col-md-6 col-sm-12">
<figure class="description">
<img src="img/projects/home/test2.jpg" class="img-fluid img">
</figure>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<figure class="description">
<img src="img/projects/home/test1.jpg" class="img-fluid img">
</figure>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<figure class="description">
<img src="img/projects/home/test2.jpg" class="img-fluid img">
</figure>
</div>
</div>
I dont know how to it and not to lose responsiveness.
You can use the Setting one column width in the Bootstrap Grid System.
Here's the documentation: https://getbootstrap.com/docs/4.0/layout/grid/#setting-one-column-width
This would be the code (Replace the column values with images or background-images):
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
I am new to bootstrap and I'm stuck on the following problem:
In mobile, I want "big-guy" to occupy the whole width and the "small-guys" to be evenly positioned underneath it. So far so good.
The problem is: in medium displays, I want the "big-guy" to occupy 75% of the width and the small-guys should be placed on its left, stacked on top of each other.
So far, this is the code I have, I would like to keep this structure if possible.
<div class="row">
<div id="big-guy" class="col-sm-12"></div>
<div id="small-guy-1" class="col-sm-4"></div>
<div id="small-guy-2" class="col-sm-4"></div>
<div id="small-guy-3" class="col-sm-4"></div>
</div>
Image for reference:
You would use nesting and the appropriate responsive grid sizes...
<div class="row">
<div id="big-guy" class="col-sm-9 py-sm-0 py-3">
</div>
<div class="col-sm-3">
<div class="row">
<div id="small-guy-1" class="col-4 col-sm-12">
</div>
<div id="small-guy-2" class="col-4 col-sm-12 py-sm-4 py-0">
</div>
<div id="small-guy-3" class="col-4 col-sm-12">
</div>
</div>
</div>
</div>
Responsive demo
Here it is.
<div class="container">
<div class="row">
<div class="col-md-9 pt-5">
<img class="img-fluid pb-3" src="https://cdn.pixabay.com/photo/2019/12/26/11/04/new-years-day-4720210_960_720.jpg" title="" alt="">
</div>
<div class="col-md-3">
<div class="row pt-5">
<div class="col-4 col-md-12 col-sm-4">
<img class="img-fluid pb-3" src="https://cdn.pixabay.com/photo/2013/02/21/19/14/firecracker-84715_960_720.jpg" title="" alt="">
</div>
<div class="col-4 col-md-12 col-sm-4">
<img class="img-fluid pb-3" src="https://cdn.pixabay.com/photo/2013/02/21/19/14/firecracker-84715_960_720.jpg" title="" alt="">
</div>
<div class="col-4 col-md-12 col-sm-4">
<img class="img-fluid pb-3" src="https://cdn.pixabay.com/photo/2013/02/21/19/14/firecracker-84715_960_720.jpg" title="" alt="">
</div>
</div>
</div>
</div>
</div>
I have this code:
<div class="row">
<div class="col-lg-3">
<div class="ava-block">
</div>
</div>
<div class="col-lg-6">
...
</div>
<div class="col-lg-3">
....
</div>
</div>
How I can hide first col-lg-3 on mobile and update col-lg-6 to col-lg-9?
I don't need show col-lg-3 on mobile devices. But if I hide on css with media then col-lg-6 is not resize to full width.
It sounds like you want something like this. Use the display utils to show/hide the column. Use col for the col-lg-6 so that it always fills the remaining width.
<div class="container-fluid">
<div class="row">
<div class="col-3 d-none d-lg-block">
<div class="ava-block border">
3
</div>
</div>
<div class="col">
<div class="ava-block border">
6-9
</div>
</div>
<div class="col-3">
<div class="ava-block border">
3
</div>
</div>
</div>
</div>
Demo: https://www.codeply.com/go/gyuRoUt68s
To hide a div on mobile you have to use the css class .d-none .d-sm-block and to make a div only big on mobile you have to use .col-xs-9
So:
<div class="row">
<div class="d-none d-sm-block col-lg-3">
<div class="ava-block">
</div>
</div>
<div class="col-xs-9 col-lg-6">
...
</div>
<div class="col-lg-3">
....
</div>
</div>
Check Bootstrap's documentation on display
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>
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>