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
Related
I have a section which must contains an image on the left and a text on the right, and in the next col, I have the opposite, I mean, a text on the left and an image on the right. This is my html:
<section>
<div class="container">
<div class="row no-gutters">
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
</div>
</div>
</section>
On desktop, it looks as it should, but on mobile, the order should be always an image first and then the text.
What to do?
You should use flexbox order utility classes for this. Flexbox Order Bootstrap
Open the snippet in full screen mode.
Add order-2 order-md-1 to the text and order-1 order-md-2 to image.
Also, for this to work, I had to wrap the text and image with a div with class row
order-2 order-md-1 means that on from smallest devices, make the order of the item 2 and on medium and after that, make order 1
Update: You can add align-items-center to row to vertically center items
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 ">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
<div class="col-md-6 ">
<div class="feature-desc">
<p>text</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 order-2 order-md-1">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6 order-1 order-md-2">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 order-2 order-md-1">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6 order-1 order-md-2">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
</div>
</div>
</section>
What would be the best / correct method to replicate the following using bootstrap. There are four colum, each of which is 25% wide, and I would like to add an image inbetween. The columns remain 25% all the way from mobile to desktop.
Simple
<div class="row">
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
</div>
</div>
</div>
PS: You may use text or content for + sign ... its upto you !! I prefer text/content because it will render faster then image.
This seems to do the job, though it's a bit convoluted. The 15-column layout is tricky.
.row.shift-left {
margin-left: -20px;
}
<div class="container-fluid">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<div class="row shift-left">
<div class="col-xs-3">
<div class="row">
<div class="col-xs-9">Words words words.</div>
<div class="col-xs-3">
<img src="http://placehold.it/300x800" class="img-responsive" />
</div>
</div>
</div>
...
Demo
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>
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.
I try this code and it is ok but what you think ?
I want this to look nice on small device too..
<div class="col-md-4 col-sm-6"> <img src="img/usluge/projektovanje.jpg" class="img-responsive img-service" alt="netbox"><br/>
<label class="btn-service">designing</label>
</div>
<div class="col-md-4 "> <img src="img/usluge/laserskorezanjemetalazoom1.jpg" class="img-responsive img-service"><br/>
<label class="btn-service">laser Metal Cutting</label>
</div>
<div class="col-md-4 "> <img src="img/usluge/cncprobijanjee1.jpg" class="img-responsive img-service"><br/>
<label class="btn-service">cnc punching</label>
</div>
<div class="col-md-4 "> <img src="img/usluge/cnc_savijanje5.jpg" class="img-responsive img-service"><br/>
<label class="btn-service">CNC BENDING</label>
</div>
<div class="col-md-4 "> <img src="img/usluge/robotsko_zavarivanje1.jpg" class="img-responsive img-service"><br/>
<label class="btn-service">robotic welding</label>
</div>
<div class="col-md-4 "> <img src="img/usluge/zavarivanje3.jpg" class="img-responsive img-service"><br/>
<label class="btn-service">welding</label>
</div>
<div class="col-md-4 "> <img src="img/usluge/plastifikacija_4.jpg" class="img-responsive img-service"><br/>
<label class="btn-service">Coatings</label>
</div>
Is this ok? or i need do something more. I want to that look nice on small, medium and laptop devices...
I suggest using rows and container-fluid.
Look here for more details on sizes of grid columns, responsive images, and other responsive options.
There is also a "thumbnail with content" option!
<div class="container-fluid">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
For smaller devices you should start using media-queries.
That's probably what you're looking for.