I have 3 images within a row. Between each column, i'd like to add an arrow pointing to the next image.
How can I do this, while keep the existing images centered (so the middle one is in the middle of the page), and so it degrades nicely on smaller screens (disappears for instance)?
html:
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="col-sm-12" style="text-align: center;">EASY TO USE</h1>
<hr>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step1htc.mini.24.png" height="350px" width="240px" alt="">
</div>
<div class="img col-sm-1"><img class="img" src="../assets/img/arrow.png" alt=""></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step2htc.mini.24.png" height="350px" width="240px" alt="">
</div>
<div class="img col-sm-1"><img class="img" src="../assets//img/arrow.png" alt=""></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step3htc.mini.24.png" height="350px" width="240px" alt="">
</div>
</div>
</div>
</body>
</html>
EDIT: For clarification, I want to add arrows between the existing images in the html code above. The html/css above is already centered. Howver, i'd like to add 2 arrows between the 3 existing images.
EDIT: Please see this image to understand what I mean: http://imgur.com/YT2hnw4
EDIT: Changed html to show a full example, including css call.
Here you go
<div class="container">
<div class="row">
<h1 class="centered" style="text-align: center;">EASY TO USE</h1>
<hr>
<div class="col-md-3" style="margin-left:4.17%;">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
<div class="img col-md-1">
<img class="img" src="../assets/img/arrow.png" alt="">
</div>
<div class="col-md-3">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
<div class="img col-md-1">
<img class="img" src="../assets//img/arrow.png" alt="">
</div>
<div class="col-md-3">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
</div>
</div>
All i did is removed the extra col-md-1 class and instead added the margin of the same equivalance to the 1st element so that it stay in the center.
Related
I have a bootstrap container which shows some images a two column layout. Since not all images have the same aspect ratio, it would be a pain to cut the images to the right ration. better to solve it in code.
My goal is to have all images of a container the same height. and the bigger image will resize to the height of the smaller. then the padding between images will be dynamic. I hope it is clear what I mean by this, otherwise let me know.
A hint from you is highly appreciated
-endo
Here is an example:
<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">
<div class="container container-fluid">
<div class="row w-100">
<div class="col-lg-12">
<figure>
<img sizes="auto" alt="" src="http://placekitten.com/g/1500/1000" width="100%">
</figure>
</div>
</div>
<div class="row w-100 h-100">
<div class="col-8">
<figure>
<img class="img-responsive" sizes="auto" alt="" src="http://placekitten.com/g/4523/2262" width="100%">
</figure>
</div>
<div class="col-4">
<figure>
<img class="img-responsive" sizes="auto" alt="" src="http://placekitten.com/g/2100/3000" width="100%">
</figure>
</div>
</div>
<div class="row w-100">
<div class="col-lg-12">
<figure>
<img sizes="auto" alt="" src="http://placekitten.com/g/1500/1000" width="100%">
</figure>
</div>
</div>
</div>
Hello i have a problem with my code :
<div class="row">
<div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
<div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
</div>
<div class="row">
<div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
<div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
</div>
And i have this result :
result bootstrap picture
And i want one other img likes this :
results final
How can i add other image with bootstrap for the final results ?
Thank you
As per my interpretation of your question, using a 2 columns inside a row and further dividing the first column into columns would work.
<div id="container">
<div class="row main">
<div class="col-8">
<div class="row">
<div class="col">
<img src="https://picsum.photos/300/600" class="img-fluid" alt="">
</div>
<div class="col">
<img src="https://picsum.photos/300/600" class="img-fluid" alt="">
</div>
</div>
<div class="row">
<div class="col">
<img src="https://picsum.photos/300/600" class="img-fluid" alt="">
</div>
<div class="col">
<img src="https://picsum.photos/300/600" class="img-fluid" alt="">
</div>
</div>
</div>
<div class="col-4">
<img src="https://picsum.photos/300/1200" class="img-fluid" alt="">
</div>
</div>
</div>
Demo: https://stackblitz.com/edit/js-tcjrtb
Correct me if my understanding of the question is wrong.
<div class="container">
<div class="row">
<div class="col"><img src="" alt="bloc1" /></div>
<div class="col"><img src="" alt="bloc1" /></div>
<div class="col"><img src="" alt="bloc1" /></div>
</div>
<div class="row">
<div class="col"><img src="" alt="bloc1" /></div>
<div class="col"><img src="" alt="bloc1" /></div>
<div class="col"><img src="" alt="bloc1" /></div>
</div>
</div>
This code should do the work. Simple application of bootstrap documentation
See Codepen example
I am designing the asp.net bootstrap form. I have one div in it.
Code:
<div id="gallery">
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a>
<a href="http://expogr.com/" target="_blank">
<img src="images/layout/777x282-africa-1.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a>
<a href="addlisting.aspx">
<img src="images/layout/becomeAMember.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a><a href="dubaiexhibitions.aspx">
<img src="images/layout/dubaiexportersexhibitions.jpg" class="img-responsive" width="1000" title="" alt=""
rel="a" />
</a>
</div>
Css:
#gallery
{
position: relative;
height: 282px;
}
I wanted to make this div responsive using Bootstrap grid system. I am confused with div ie. How to apply grid system on div?
<div class="row">
<div class="col-sm-12">
<div class="gallery">
------contents------
</div>
</div>
</div>
Is it like this? I am new to Bootstrap. I just wanted to know how to apply grid system to div.
You can use the bootstrap grid like this.
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="http://expogr.com/" target="_blank">
<img src="images/layout/777x282-africa-1.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="addlisting.aspx">
<img src="images/layout/becomeAMember.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="dubaiexhibitions.aspx">
<img src="images/layout/dubaiexportersexhibitions.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
</div>
</div>
You can follow this link for further details. Bootstrap Grid
A general way to use grid system is
<div class="container">
<div class="row">
<div class="col-sm-3">Content1</div>
<div class="col-sm-3">Content2</div>
<div class="col-sm-3">Content3</div>
<div class="col-sm-3">Content4</div>
</div>
</div>
Every column will have equal width and it will act responsive. You don't need to set height or width of divs inside these columns unless you intentionally want it. If you can provide more details what exactly do you want , i can try to help more.
you can use the grid system of 12 spans and as many rows as you want as you have different spanning of images for different rows like this:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12"></div>
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" alt=""/>
</a>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">...</div>
<div class="col-xs-6 col-md-6">...</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">...</div>
<div class="col-xs-6 col-md-6">.....</div>
</div>
.....
.....
and so on
</div>
i made a gallery using bootstrap4 grids, each 6 images is a row, if one of the 6 images is taller than the others, The entire row's images become taller too, And i want to set a fixed size row so images just resize at its size, i use css
height: 100%; width 100%;
to make it fill the size of row because if i didn't all images will stat at its real height and width and become mass.
<body>
<div class="container">
<div class="row no-gutters">
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="tall-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</body>
you can add custom css
.img-fluid{ max-width:100%; max-height:100px; }
I would probably just add a CSS class to the images, last thing you want is a image getting uploaded and covering pretty much whole your site.
img.img-fluid {
height: 250px;
}
I am a little stuck with creating this layout in Bootstrap 3's Grid:
http://oi62.tinypic.com/142sjt0.jpg
(Could not post image here due to rep)
This is where I got up to: http://www.bootply.com/7VrPUQwFAV
<div class="container">
<div class="row">
<div class="col-sm-3">
<img class="img-responsive" src="http://placehold.it/263x263" alt="">
<img class="img-responsive padding-top-30" src="http://placehold.it/263x556" alt="">
</div>
<div class="col-sm-6">
<img class="img-responsive" src="http://placehold.it/555x555" alt="">
<div class="row">
<div class="col-sm-12 col-sm-offset-6">
<img class="img-responsive padding-top-30" src="http://placehold.it/555x263" alt="">
</div>
</div>
</div>
<div class="col-sm-3">
<img class="img-responsive" src="http://placehold.it/526x526" alt="">
<img class="img-responsive padding-top-30" src="http://placehold.it/526x526" alt="">
</div>
</div>
</div>
Can anyone please help?
<div class="container">
<div class="row">
<div class="col-sm-3">
<img class="img-responsive" src="http://placehold.it/263x263" alt="">
<img class="img-responsive padding-top-30" src="http://placehold.it/263x556" alt="">
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-8">
<img class="img-responsive" src="http://placehold.it/555x555" alt="">
</div>
<div class="col-sm-4">
<img class="img-responsive" src="http://placehold.it/263x263" alt="">
<img class="img-responsive" src="http://placehold.it/263x263" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img class="img-responsive" src="http://placehold.it/263x263" alt="">
</div>
<div class="col-sm-8">
<img class="img-responsive" src="http://placehold.it/555x263" alt="">
</div>
</div>
</div>
</div>
</div>