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>
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>
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've got a layout which includes a row with 3 columns. Each column has 3 items listed vertically. I'm using Bootstrap.
<div class="row">
<div class="col-sm-4 ">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
<h3>SOMETHING</h3>
<div class="url"> https://something.com </div>
</div>
<div class="col-sm-4">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
<h3>NOTHING</h3>
<div class="url"> https://nothing.com/</div>
</div>
<div class="col-sm-4 appcontainer">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
<h3>EVERYTHING</h3>
<div class="url"> https://everything.com/</div>
</div>
</div>
When the row collapses at 767 px down to about 400 px the layout feels wrong as the individual columns don't fill the space very well. In that case I would like to have it displayed with the image on the left and the header and url on the right as though it were like this..
<div class="col-sm-4 ">
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
</div>
<div class="col-xs-6">
<h3>SOMETHING</h3>
<div class="url"> https://something.com </div>
</div>
</div>
</div>
Can this be accomplished with css and media queries? Or do I have to dig into some javascript?
It fells like I should be able set something up using display, but I haven't found a magic combination that does anything useful.
Please check the result:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#media (max-width: 400px) {
.col-xs-6 {
width: 100%;
}
}
.row {
margin-top: 15px;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="row">
<div class="col-xs-6 col-sm-12">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
</div>
<div class="col-xs-6 col-sm-12">
<h3>SOMETHING</h3>
<div class="url"> https://something.com </div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<div class="col-xs-6 col-sm-12">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
</div>
<div class="col-xs-6 col-sm-12">
<h3>NOTHING</h3>
<div class="url"> https://nothing.com </div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<div class="col-xs-6 col-sm-12">
<img class="img-responsive" src="http://placekitten.com/g/300/200">
</div>
<div class="col-xs-6 col-sm-12">
<h3>EVERYTHING</h3>
<div class="url"> https://everything.com </div>
</div>
</div>
</div>
</div>
</div>
I have 4 divs, aligning in a straight line in fullscreen mode.
When the screen is smaller, they get responsive.
But there is a small problem: if one of the divs has a bit more weight then the others, the responsiveness isn't that beautiful.
In fullscreen:
When screen gets smaller:
How it should be:
HTML:
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle indianred">
<img src="../images/3.png" alt=""/>
</div>
TEXT
<div class="red_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightskyblue">
<img src="../images/9.png" alt=""/>
</div>
TEXT
<div class="blue_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightgreen">
<img src="../images/12.png" alt=""/>
</div>
TEXT
<div class="green_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle cornflowerblue">
<img src="../images/14.png" alt=""/>
</div>
TEXT
<div class="cornflowerblue_bottom_border"></div>
</div>
EDIT: Putting <div class="clearfix visible-sm-block"></div> after the 2 divs worked.
When using ng-repeat, use this code I wrote:
`<div class="clearfix visible-XX-block" ng-if="$index%2==1"></div><!--For col-XX-6 class-->
<div class="clearfix visible-XX-block" ng-if="$index%3==2"></div><!--For col-XX-4 class-->
<div class="clearfix visible-XX-block" ng-if="$index%4==3"></div><!--For col-XX-3 class-->
<div class="clearfix visible-XX-block" ng-if="$index%6==5"></div><!--For col-XX-2 class-->`
Take a look at responsive column resets.
See: http://getbootstrap.com/css/#grid-responsive-resets
In your case you can add the following code after the second column:
<div class="clearfix visible-sm-block"></div>
So your code looks like this:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle indianred">
<img src="../images/3.png" alt=""/>
</div>
TEXT
<div class="red_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightskyblue">
<img src="../images/9.png" alt=""/>
</div>
TEXT
<div class="blue_bottom_border"></div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle lightgreen">
<img src="../images/12.png" alt=""/>
</div>
TEXT
<div class="green_bottom_border"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="coloured_circle cornflowerblue">
<img src="../images/14.png" alt=""/>
</div>
TEXT
<div class="cornflowerblue_bottom_border"></div>
</div>
</div>
Note that this doesn't change the height of the columns but it fixes the clearing for the sm breakpoint.
You should try to set your divs to the same height then and add a scrollbar if their content is too big to fit in them.
So for example this should be:
<div class="col-xs-12 col-sm-6 col-md-3 box-container">
<div class="coloured_circle indianred">
<img src="../images/3.png" alt=""/>
</div>
TEXT
<div class="red_bottom_border"></div>
</div>
And in css:
.box-container {
height: 100px;
overflow: auto;
}
Hope this helps!
You are missing the class=row divs. You have to understand that, on each device, your cols number must be equal to 12 in each row. Also notice that if you get more than 12, you will get this weird behavior.
So, in order to fix that, you need to do something like:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
In XS it is optional to use the clearflix, on there sizes clearflix is not optional. Your SM blocks count are 24. Make sure to create a clearflix after the count reaches 12 just for SM.
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.