I want to create a grid of responsive images that are always squared in Bootstrap.
So far I got this: Jsfiddle Link
This part forces the elements to be squared all the time:
.frontpage_square {
position:relative;
overflow:hidden;
padding-bottom:100%;
}
.frontpage_square img {
position:absolute;
}
The bigger square on the left and the nine smaller ones on the right are correct, but I can't figure out how I can spread the nine squares on the right over the full height. So basically they should take the whole height of the left, bigger square.
It is simple, you aren't arranging your divs properly. Make use of bootstrap by using the divs properly. Once that is done, you can make the column all same size by using this S.O. question.
jsfiddle
<div class="row">
<div class="col-sm-6 panel">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-6 panel">
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4 ">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4 ">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
</div>
Related
I'm trying to stack these picture vertically on a small screen. So one
column instead of two
I'm trying to stack these picture vertically on a small screen. So one
column instead of two:
Here is my code:
<div class="container">
<div class="row g-0">
<div class="col-6 col-ms-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skylit.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skit4.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col-6 xl-col">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skit6.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skylit2.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/lvr.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/gym.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
</div>
Here is what I tried so far:
/* Please improve your content by showing what you tried so far */
e. G. Added "some" to "thing", Edited column count, I'm not that into HTML but you get what you could write here
If using bootstrap the classes should be col-sm-12, I see you are using sm-col-12 and col-ms-12. That should make the element take all space in grid.
https://getbootstrap.com/docs/4.0/layout/grid/
Start from smallest class too: class="col-12 col-sm-12 col-md-6"
I am new to Bootstrap. I am trying to add images as cards. But I face some issues as the cards are stacking up one after the other without spaces. Below is the code with Bootstrap4.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card">
<a href="#" class="">
Beautiful
<img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
<a href="#" class="">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
<a href="#" class="">
Beautiful
<img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
</div>
</div>
With the above code in screen cards are stacked one after other without space.
I tried with mr-1 but the 4th card is wrapping it into another row.
How can I add spaces between cards with evenly spaced above and below?
This is because you are using .col-* and .card on the same element. Try to be in the habit of putting your content elements inside your layout grid elements.
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#" class="">
Beautiful
<img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#" class="">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#" class="">
Beautiful
<img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
</div>
</div>
</div>
I solved this problem using Bootstrap 4 Emdeds Utilities
https://getbootstrap.com/docs/4.3/utilities/embed
In this case you just need to add you image to a div.embbed-responsive like this:
<div class="card"><div class="embed-responsive embed-responsive-16by9"> <img alt="Card image cap" class="card-img-top embed-responsive-item" src="img/butterPecan.jpg" /></div><div class="card-block"><h4 class="card-title">Butter Pecan</h4><p class="card-text">Roasted pecans, butter and vanilla come together to make this wonderful ice cream</p></div></div>
or .card-img-top {width: 100%;}
Why does my right hand flex column suddenly drop below a left column when (fluid) content is added?
I want a fixed width left column and a right hand column containing an image slider (Owl Carousel).
The column layout works fine when empty, but as soon as I add the image slider, the column jumps to 100% width and drops below the fixed column. This is odd as the slider is responsive and shouldn't expand beyond it's container - it's not fixed width.
Please see this codepen: https://codepen.io/nick-gilbert/pen/wORaOP
My basic column layout is very simple:
<div class="row">
<div class="col search-sidebar">
left
</div>
<div class="col">
right
</div>
</div>
CSS:
.search-sidebar: {
flex: 0 0 260px;
}
Here's an image showing the problem (but better to look at the codepen):
Add flex-nowrap class on the row element.
By default row is flex-wrap:wrap, so when content gets bigger than the width the divs stack up. To avoid them stacking up , use flex-nowrap class of bootstrap.
See the updated codepen
<div class="container">
<div class="row" style="margin-bottom:40px;">
<div class="col search-sidebar" style="background-color:aquamarine">left</div>
<div class="col" style="margin-bottom:20px;background-color:pink">right<br /> (works when empty)
</div>
</div>
<div class="row flex-nowrap">
<div class="col search-sidebar" style="background-color:aquamarine">
left<br><br>
</div>
<div class="col" style="margin-bottom:20px;background-color:pink">
right<br />Broken when an Image slider loads. This should stay to the right of the green column.
<br />
<!-- Demos -->
<div id="imageCarousel">
<div id="imageThumbnails" class="owl-carousel owl-theme">
<div class="sliderThumb rounded">
<a class="galleryLink" rel="Group" href='#'>
<img src='http://placehold.it/160x160' width="175" height="175" />
</a>
</div>
<div class="sliderThumb rounded">
<a class="galleryLink" rel="Group" href='#'>
<img src='http://placehold.it/160x160' width="175" height="175" />
</a>
</div>
<div class="sliderThumb rounded">
<a class="galleryLink" rel="Group" href='#'>
<img src='http://placehold.it/160x160' width="175" height="175" />
</a>
</div>
<div class="sliderThumb rounded">
<a class="galleryLink" rel="Group" href='#'>
<img src='http://placehold.it/160x160' width="175" height="175" />
</a>
</div>
<div class="sliderThumb rounded">
<a class="galleryLink" rel="Group" href='#'>
<img src='http://placehold.it/160x160' width="175" height="175" />
</a>
</div>
<div class="sliderThumb rounded">
<a class="galleryLink" rel="Group" href='#'>
<img src='http://placehold.it/160x160' width="175" height="175" />
</a>
</div>
<div class="sliderThumb rounded">
<a class="galleryLink" rel="Group" href='#'>
<img src='http://placehold.it/160x160' width="175" height="175" />
</a>
</div>
<div class="sliderThumb rounded">
<a class="galleryLink" rel="Group" href='#'>
<img src='http://placehold.it/160x160' width="175" height="175" />
</a>
</div>
<div class="sliderThumb rounded">
<a class="galleryLink" rel="Group" href='#'>
<img src='http://placehold.it/160x160' width="175" height="175" />
</a>
</div>
<div class="sliderThumb rounded">
<a class="galleryLink" rel="Group" href='#'>
<img src='http://placehold.it/160x160' width="175" height="175" />
</a>
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
</div>
So I'm trying to place two divs within a column into the centre of the page so that there is little to no space in-between them. The top row is fine, but the bottom row is causing me issue. I'd like to keep the logos the same size as the first row and centre them together. I've shown what this looks like below. Code attached. Any input would be greatly appreciated. Thanks!
<div class="col-md-12 vertical-center" style="margin-bottom: 40px;">
<div class="col-md-3 text-center">
<a href="http://www.msh.on.ca/" target="_blank">
<img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-1.png">
</a>
</div>
<div class="col-md-3 text-center">
<a href="http://www.tegh.on.ca/bins/index.asp" target="_blank">
<img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-2.png"></a>
</div>
<div class="col-md-3 text-center">
<a href="http://www.southlakeregional.org/" target="_blank">
<img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-3.png"></a>
</div>
<div class="col-md-3 text-center">
<a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
<img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
</div>
</div>
<div class="col-md-12 vertical-center" style="margin-bottom: 40px;">
<div class="col-md-3 center-block">
<a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
<img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
</div>
<div class="col-md-3 center-block">
<a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
<img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
</div>
</div>
Try this html with few modifications:
<div class="col-md-12 vertical-center" style="margin-bottom: 40px;">
<div class="col-md-3 text-center">
<a href="http://www.msh.on.ca/" target="_blank">
<img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-1.png">
</a>
</div>
<div class="col-md-3 text-center">
<a href="http://www.tegh.on.ca/bins/index.asp" target="_blank">
<img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-2.png"></a>
</div>
<div class="col-md-3 text-center">
<a href="http://www.southlakeregional.org/" target="_blank">
<img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-3.png"></a>
</div>
<div class="col-md-3 text-center">
<a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
<img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
</div>
</div>
<div class="col-md-offset-3 col-md-6 vertical-center text-center" style="margin-bottom: 40px;">
<div class="col-md-6 center-block">
<a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
<img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
</div>
<div class="col-md-6 center-block">
<a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
<img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
</div>
</div>
Modified HTML:
<div class="col-md-offset-3 col-md-6 vertical-center text-center" style="margin-bottom: 40px;">
<div class="col-md-6 center-block">
<a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
<img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
</div>
<div class="col-md-6 center-block">
<a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
<img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
</div>
</div>
Demo:http://jsfiddle.net/lotusgodkk/GCu2D/2191/
So I want to do what I thought was pretty basic, have a row of 6 thumbnails that would stack to two rows of 3 thumbnails on XS displays. But for some reason all of my thumbnails stack in two columns. I am sure I am missing something obvious here.
<div class="row">
<div class="col-xs-12 col-md-6">
<a href="#" class="thumbnail" style="width:30%">
<img src="img/cottagefront.png" alt="...">
</a>
<a href="#" class="thumbnail" style="width:30%">
<img src="img/cottagekitchen.png" alt="...">
</a>
<a href="#" class="thumbnail" style="width:30%">
<img src="img/backbonestateparktrail.jpg" alt="...">
</a>
</div>
<div class="col-xs-12 col-md-6">
<a href="#" class="thumbnail" style="width:30%">
<img src="img/cottagebed.png" alt="...">
</a>
<a href="#" class="thumbnail" style="width:30%">
<img src="img/backbonestatepark.jpg" alt="...">
</a>
<a href="#" class="thumbnail" style="width:30%">
<img src="img/cottageliving.png" alt="...">
</a>
</div>
</div>
This looks like this: http://i.imgur.com/nWYmDMB.png
Problem:
img by default act as block level element and occupy the full width space. So while in xs screen size, it occupies 100% of the width while in md screen size mode, it just occupies 50% of width.
Also, anchor tags do not take width values. You will need to include display: block before specifying width. Fixing either one of the problems can lead up to the solution.
Solution:
You need to change your markup. Wrap the thumbnails inside a grid class instead of inline style.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/200x200" alt="...">
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/200x200" alt="...">
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/200x200" alt="...">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/200x200" alt="...">
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/200x200" alt="...">
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/200x200" alt="...">
</a>
</div>
</div>