I need to make a grid with 6 columns in full screen that size down to 2 columns on smaller/mobile. Here is what I have tried so far. It looks correct wide, on my laptop, but when smaller, iPhone or tablet, it shows 6 columns still with very tiny images.
<div class="row mb-3">
<div class="col filter bunarske">
<img class="img-fluid" alt="" src="references/logos/hardrock4.gif" /> </div>
<div class="col filter bunarske">
<img class="img-fluid" alt="Paragon Casino Resort" src="references/logos/paragon.jpg"> </div>
<div class="col filter bunarske">
<img class="img-fluid" alt="Tuscon Center" src="references/logos/USHomeLogo.jpg"> </div>
<div class="col filter bunarske">
<img class="img-fluid" alt="Choctaw Casino" src="references/logos/choctaw.jpg"> </div>
<div class="col filter bunarske">
<img class="img-fluid" alt="Trump 29 Casino" src="references/logos/trump29.jpg"> </div>
<div class="col filter bunarske">
<img class="img-fluid" alt="Kimberly Clark" src="references/logos/KimberlyClarkLogo.jpg"> </div>
</div>
<div class="clearfix"></div>
http://pscompetitiveedge.com/references-test.html
change col-xs-2 to col-xs-6.
You have to sum up to 12 , each "sum" of colums to 12 is put into one row - thats how it works.
Use this code
<div class="row flex-mb1">
<div class="col-xs-6 col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
<div class="col-xs-6 col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
<div class="col-xs-6 col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
<div class="col-xs-6 col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
<div class="col-xs-6 col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
<div class="col-xs-6 col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix d-none d-sm-block"></div>
you can change col-xs-12 to col-xs-6 if want to keep 2 cols even in extra small screen
Related
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'm using BS4 Beta and have a grid 4 columns wide in full screen with resize down to 2 columns smaller screen. I have <div class="row mb-3"> to put a space between the images. When the screen gets resized smaller the images are on top of each other without space. How can I code this differently to get the space?
I have a working codepen here https://codepen.io/mlegg10/pen/yzjRya
here is all the code
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mb-3">
<div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
<div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix d-none d-sm-block"></div>
<div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
<div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
</div>
<div class="row mb-3">
<div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
<div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix d-none d-sm-block"></div>
<div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
<div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
</div>
Add
.img-fixed{
padding-bottom:5px;
}
to your CSS file. Works just fine in your codepen.
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 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.