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.
Related
How to create a grid of images using bootstrap?
Thats what i got when i try the next codes
<div class="row">
<div class="col">
<div class="thumbnail">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg">
</div>
</div>
</div>
Im still in the very first steps learning phase started with HTML CSS and bootstrap as it give us achievements to feel the process.
im expecting to get thumbnail of grids as the following image
try it like this...
<div class="row">
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
</div>
Then when adding extra pics, put them in columns too.
<div class="row">
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
</div>
It may then work even better if you add widths to those columns using col-* where * is any number between 1 and 12.
<div class="row">
<div class="col-3">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col-3">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col-3">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</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 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'm trying to make a site for my new documentary and have found Bootstrap to be very helpful but I'm running into a bit of a problem:
I have 12 images, I'd like them to be arranged into 3 rows of 4, but make sure that with smaller screens this works out, so maybe on a mobile device it is only 1 image per column (or two).
Here is the site as is (no margins) http://athomewhileaway.org/gallery.html
Any ideas? Thanks...
Please try this one
HTML
<div class="row no-gutter">
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
</div>
if you need one photo in small screen then you can remove col-xs-6 class from related div
CSS
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
This CSS property needs to remove space between the columns (Twitter Bootstrap set gutter width in default).
Thanks!
Note the xs (extra small) and sm (small) You can use the .col-xs-6 (row of 2) or .col-xs-12 (single colum) for phones, and .col-sm-6/.col-sm-12 for tablet, up to 768px, I believe. If you provide a fiddle I will hook you up with a better solution. Learn more here.
On extra small devices (most phones):
<div class="container">
<div class="row">
<div class="col-xs-6">
#Your Stuff
</div>
<div class="col-xs-6">
#Your Stuff
</div>
</div>
</div>