I want to make this card into masonry style in bootstrap, You can see the below column had the same height but I want fluid height, cards must had same margin like the blue line.I was trying on .card-columns and masonry style (column-count: 4), However it weren't working at all.
And this is my code
<div class="col-12 col-lg-8 col-xl-9 col-right">
<div class="row listing-card-container">
{% for loop %}
<div class="col-sm-5 col-lg-5 col-xl-3 mb-4">
<div class="card">
<div class="position-relative shadow-sm">
<a href="........"><img class="card-img-top"
src="...." alt="Card image cap"></a>
</div>
<div class="card-body">
<a href="..link..">
<h6 class="mb-3 listing-heading ellipsis">
..content..
</h6>
</a>
<footer>
<p class="text-muted text-small mb-0 font-weight-light">
..date..</p>
</footer>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
Thanks.
Looks like it is — https://w3bits.com/labs/flexbox-masonry/2/
.masonry {
display: flex;
flex-flow: column wrap;
max-height: 800px;
margin-left: -8px; /* Adjustment for the gutter */
width: 100%;
}
.masonry-brick {
margin: 0 8px 8px 0; /* Some gutter */
}
Related
I'm trying to find a solution how to vertically align the 2 rows in the footer which are placed with a Bootstrap grid.
I've already tried to make a wrapper for the content and apply the regular flexbox solution:
display: flex; align-items: center. But this moves both rows to be on the same row.
Fiddle here https://codepen.io/pen/WNNPdxv
HTML
<footer class="footer">
<div class="footer-wrapper">
<div class="container">
<div class="row row">
<div class="col-sm-8 footer-credit">
<h6>GetMove</h6>
<p>Copyright © 2019 GetMove All Rights Reserved</p>
</div>
<div class="col-sm-2 footer-contact">
<h6>Contact</h6>
hola#getmove.net
</div>
<div class="col-sm-2 footer-social-icons">
<h6>Follow us</h6>
<a class="social-icon" target="_blank" href="https://www.facebook.com/pg/GetMove.Official/"
><i class="fab fa-facebook-square"></i
></a>
<a class="social-icon" target="_blank" href="https://www.instagram.com/getmovemx/"
><i class="fab fa-instagram"></i
></a>
<a class="social-icon" target="_blank" href="https://soundcloud.com/getmove"
><i class="fab fa-soundcloud"></i
></a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8 text-center"></div>
<div class="col-sm-4 footer-newsletter">
<h6>Subscribe</h6>
<div class="input-group input-group-sm mb-3">
<input
type="text"
class="form-control shadow-none"
id="subscribe"
placeholder="# Enter your email adress"
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
/>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">
Submit
</button>
</div>
</div>
</div>
</div>
</div>
<div class="container footer-credit">
<div class="row">
<div class="col-sm-8"></div>
<div class="col-sm-4 footer-credit"></div>
</div>
</div>
</div>
</footer>
CSS
.footer {
width: 100%;
height: 24em; /* Set the fixed height of the footer here */
background-color: #f4f2f0;
margin-top: 4em;
}
.footer-social-icons {
list-style-type: none;
}
.footer h6 {
text-transform: uppercase;
font-size: 16px;
}
.footer-credit {
font-size: 11px;
}
.social-icon {
/* display: block; */
margin: 0;
font-size: 16px;
}
.form-control:focus {
border-color: black;
}
The idea of a wrapper to vertically center content is correct, however you already have a wrapper in place => container.
No need to have multiple containers inside a single section (footer). You use rows for this.
So to clean-up your structure a bit, as suggested in the comments, is key to understand what's going on.
container is your wrapper
row row is redundant
empty columns as placeholder are not required with flexbox (bootstrap 4), not sure if that's what's going on... => m-auto, ml-auto, mr-auto
place custom classes inside columns (these blocks might change places someday, especially when designing for a CMS)
keep the structure clean and decorate with utility classes if needed (padding, margin, ...)
HTML Structure
<footer role="contentinfo">
<div class="container">
<div class="row">
<div class="col-sm-7"></div>
<div class="col-sm-3"></div>
<div class="col-sm-2"></div>
</div>
<div class="row">
<div class="col-sm-5 ml-auto"></div>
</div>
<div class="row">
<div class="col-sm-5 ml-auto"></div>
</div>
</div>
</footer>
Solution
Now your height is set on the footer, your container is simply taking the required height inside the space. This means you should now be able to move it vertically with flexbox.
footer[role="contentinfo"] {
display: flex;
flex-flow: column wrap;
justify-content: center; /* content of the footer is the container */
}
DEMO
I want to use a Font Awesome 5 icon as card background image using Bootstrap-4!
I tried everything what I found from the internet but nothing worked.
I'm using Angular2 (v8) along with Bootstrap 4.
The following code worked for me. I've simplified what I use but you still get a font-awesome icon as background and you can put text on top of it:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-6 d-flex">
<div class="class-box">
<div class="bg-primary">
<i class="fa fa-question big-centered-icon"></i>
</div>
<div class="box-content">
<h3 class="title-bg text-outline"><Strong>TITLE</Strong></h3>
<h4 class="title-bg text-outline">Subtitle</h4>
<h4 class="title-bg text-outline"><Strong> Subtitle</Strong></h4>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 d-flex">
<div class="class-box">
<div class="bg-primary">
<i class="fa fa-question big-centered-icon"></i>
</div>
<div class="box-content">
<h3 class="title-bg text-outline"><Strong>HELLO</Strong></h3>
<h3 class="title-bg text-outline"><Strong> 2nd HELLO</Strong></h3>
<h3 class="title-bg text-outline"><Strong> 3rd HELLO</Strong></h3>
</div>
</div>
</div>
</div>
</div>
CSS:
.big-centered-icon {
font-size: 144px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex; /* add */
justify-content: center; /* add to align horizontal */
align-items: center; /* add to align vertical */
}
.class-box{ text-align:center;position:relative;margin:8px;width: 100%;padding-bottom: 75%}
div.class-box > div { position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;padding-top:15%}
.class-box .title-bg{font-size:24px;color:#000;}
See the working fiddle.
Im using bootstrap and I want that in medium, large and extra large devices get the first layout of the image below, where there is a image at the left and then some information at right. And these 2 areas (the image and the informations div) occupy the full .container div width and have always the same height.
Then in smaller devices I want to get the layout in the image below, where the image is above and the informations below.
Image to demonstrate the layout that Im trying to get:
Image:
enter image description here
But Im getting this: https://jsfiddle.net/ce228caL/
Do you know how to properly get the layouts of the image?
html:
<div class="container py-md-5">
<div class="row justify-content-md-center">
<div class="col-12 col-md-auto">
<img style="width: 100%; height: auto" src="http://via.placeholder.com/1000x400"/>
</div>
<div class="col col-lg-2 d-md-flex">
<div class="d-none d-md-block details-title d-flex flex-column align-items-start">
<span class="font-size-sm font-weight-semi-bold">Title</span>
<h1 class="h5 mb-0 title">Subtitle</h1>
Link
</div>
</div>
</div>
</div>
css
.title{
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid $light-gray;
padding: 1rem;
margin-top: 1rem;
}
.subtitle{
margin-top: 1rem;
}
.link{
margin-top: 1rem;
}
You specified your first div to have all 12 columns on every screen size
<div class="col-12 col-md-auto">
Reduce it to 10 on medium and up, so the 2nd 2-column div will fit in the row. also set the 2nd div to col-md-2, so it occupies 2 columns on medium. Also, I am not sure why you would want to solve this using flexbox instead of the classic grid
<div class="container py-md-5">
<div class="row">
<div class="col-md-10 col-12">
<img style="width: 100%; height: auto" src="http://via.placeholder.com/1000x400"/>
</div>
<div class="col col-md-2 col-12">
<div class="d-none d-md-block details-title d-flex flex-column align-items-start">
<span class="font-size-sm font-weight-semi-bold">Title</span>
<h1 class="h5 mb-0 title">Subtitle</h1>
<span class="subtitle font-size-sm font-weight-semi-bold">Subtitle 2</span>
Link
</div>
</div>
</div>
</div>
We're using materialize cards to display images on our site. The images are user uploaded, so they come in all different sizes (though they have to be greater than 250px).
We're able to maintain the aspect ratio of the images, which is great, but we don't know how to do that while making the cards on each row the same height. That's our goal- to get the cards to be the same height (in a responsive way) while maintaining the aspect ratio of the images inside the cards.
We've been messing with this all day without getting very far. Any help is much appreciated.
HTML:
<div class="row text-center">
<div class="col-xs-12 col-md-4 col-sm-12 test">
<div class="card" ui-sref='forsaleitem({type:"interior"})'>
<div class="card-header card-image waves-effect waves-block waves-light">
<img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator" alt="Cinque Terre">
</div>
<div class="card-content">
<h5 class='text-center'>Interior</h5>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 col-sm-12 test">
<div class="card" ui-sref='forsaleitem({type:"drivetrain"})'>
<div class="card-header card-image waves-effect waves-block waves-light">
<img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator" alt="Cinque Terre">
</div>
<div class="card-content">
<h5 class='text-center'>Drivetrain</h5>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 col-sm-12 test">
<div class="card" ui-sref='forsaleitem({type:"performance"})'>
<div class="card-header card-image waves-effect waves-block waves-light">
<img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" alt="Cinque Terre">
</div>
<div class="card-content">
<h5 class='text-center'>Performance</h5>
</div>
</div>
</div>
</div>
CSS:
.card {
position: relative;
background-color: #f4f4f4;
// margin: 10px auto;
height: 100%;
box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.7);
}
.card {
height: 100%;
}
.card .card-image img {
//object-fit: contain !important;
}
Use Media Queries to set the width/height depending on the size of the screen. Example in JS Fiddle: https://jsfiddle.net/3yegzwex/
HTML:
<div class="row text-center">
<div class="col-xs-12 col-md-4 col-sm-12">
<div class="card" ui-sref='forsaleitem({type:"interior"})'>
<div class="card-header card-image waves-effect waves-block waves-light">
<img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226">
</div>
<div class="card-content">
<h5 class='text-center'>Interior</h5>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 col-sm-12">
<div class="card" ui-sref='forsaleitem({type:"drivetrain"})'>
<div class="card-header card-image waves-effect waves-block waves-light">
<img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226">
</div>
<div class="card-content">
<h5 class='text-center'>Drivetrain</h5>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 col-sm-12">
<div class="card" ui-sref='forsaleitem({type:"performance"})'>
<div class="card-header card-image waves-effect waves-block waves-light">
<img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226">
</div>
<div class="card-content">
<h5 class='text-center'>Performance</h5>
</div>
</div>
</div>
</div>
CSS:
.card {
text-align: center;
}
#media (max-width: 990px) {
.resizeimg {
height: auto;
}
}
#media (min-width: 1000px) {
.resizeimg {
width: auto;
height: 350px;
}
}
Do the images really have to be inline? Or can they be set as background-image (since they are user uploaded)? If so, you can set the background-size property to cover to address the problem. Also because object-fit is not widely supported (yet).
cover
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't
get squished). The image "covers" the entire width or height of the
container. When the image and container have different dimensions, the
image is clipped either left/right or top/bottom.
Source: MDN
See this updated JSFiddle for the demo. The padding-bottom can be altered to a percentage for your needs. Try to change it and see what it does.
Inline images
If the images do have to be inline, you can apply this solution:
.card-image {
width: 100%;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.card-image img {
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
The image will be pushed inside the .card-image and stretched to its width that's needed. See this JSFiddle for the demo. The padding-bottom can be altered to a percentage to your needs.
I'm trying to make a grid of Boostrap unevenly sized thumbnails. But some thumbnails are uneven, resulting in huge gaps between some rows.
I don't have any styling on the thumbnails.
Is there a way to fix it without adding something like Masonry/Isotope/Salvattore?
You can use two <div> or two .row tags like this:
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
</div>
For more info visit Example: Stacked-to-horizontal.
The cleanest way to fix your layout is to use a masonry type of layout. It will allow for the smoothest look and be a very fluid and responsive layout when dealing with mixed sized media. Though if you are in complete control of the data/images being placed on the site I would suggest creating each image to be identical in size and type. If you would like I can provide an example I have created using a masonry type of layout with thumbnails and Bootstrap.
Edit to add example code:
/* CSS styles */
.row {
-moz-column-width: 12em;
-webkit-column-width: 12em;
-moz-column-gap: 1em;
-webkit-column-gap:1em;
column-width: 12em;
column-gap: 1em;
column-fill: balance;
width: 100%;
}
/* Outer div block */
.section-block {
display: block;
padding: .25rem;
width: 100%;
}
/* Inner div block */
.section-item {
position:relative;
display: inline-block;
width: 100%;
}
.section-item img{
width: 100%;
}
//Wrapper for each img you are adding
<div class='section-block'>
<div class='section-item'>
<div>
<a href='#' class='thumbnail' data-toggle='modal' data-target='#id'>
<img src='/imgs/image.jpg'>
<p class='caption'>Image Caption</p>
</a>
</div>
</div>
</div>
I used this in conjunction with php to get all my images from a db then I looped over each image and echo'd to the page with the above syntax. This should work without having to use any additional js libraries beyond what you are using for bootstrap. This gives you a very responsive masonry style of layout that works in modern browsers.