I'm trying to design something very similar to the image shown below using bootstrap
I'm having issues with aligning the .card-img-top images vertically with the space between them. I tried putting both '.card-img-top' images in the same '.col' then applying padding which didn't produce the result I wanted.
I have provided my code enter link description here
Try nesting a bootstrap row within the last column then put some padding between like so:
<div class="col-12 col-md-4">
<div class="row">
<div class="col-12">
<div class="card img-fluid">
<img class="card-img-top" src="https://www.treeservicesmagazine.com/wp-content/uploads/2017/03/safety-ppe-image.jpg" alt="Card image">
<div class="card-img-overlay">
<p class="card-text">Personal <br>Protective Equipment.</p>
SHOP NOW
</div>
</div>
</div>
<div class="col-12" style="padding-top:20px;">
<div class="card img-fluid">
<img class="card-img-top" src="https://www.treeservicesmagazine.com/wp-content/uploads/2017/03/safety-ppe-image.jpg" alt="Card image">
<div class="card-img-overlay">
<p class="card-text">Personal <br>Protective Equipment.</p>
SHOP NOW
</div>
</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 want to place the two cards next to each other (horizontally) but currently they are vertically aligned. That is I want to place the Heading 1 card next to Heading 2 card even though I used some margin it shift only in the same place horizontally not vertically.
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Heading 1</h5>
<p class="card-text">some text</p>
a button
</div>
</div>
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Heading 2</h5>
<p class="card-text">some text</p>
a button
</div>
</div>
You can use Bootstrap’s grid to achieve this:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 d-flex justify-content-center">
<div class="card" style="width: 20rem;>
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Heading 1</h5>
<p class="card-text">some text</p>
a button
</div>
</div>
</div>
<div class="col-sm-6 d-flex justify-content-center">
<div class="card" style="width: 20rem;>
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Heading 2</h5>
<p class="card-text">some text</p>
a button
</div>
</div>
</div>
</div>
</div>
Using Bootstrap cards, I'm trying to float a card-img left and the card-body right, but the float classes aren't working for me. Can anyone tell me what I'm doing wrong please?
<div class="container">
<div class="row row-eq-height">
<div class="col">
<div class="card" style="">
<img class="card-img-top" style="width: 33%; float: left;" src="img/myimg.jpg" ">
<div class="card-img-caption">caption here</div>
<div class="card-body float-xl-right">
<h5 class="card-title">Title here</h5>
<p>By A Person</p>
<p class="card-text">When in the course of human events...</p>
Link
</div>
</div>
</div>
</div>
</div>
Is your xl breakpoint is set to 1280? Because if yes, then you could just use flex-xl-row class on card element and wrap image & caption inside a div, so they stay together:
<div class="card flex-xl-row">
<div>
<img class="card-img-top" src="img/myimg.jpg">
<div class="card-img-caption">caption here</div>
</div>
<div class="card-body">
<h5 class="card-title">Title here</h5>
<p>By A Person</p>
<p class="card-text">When in the course of human events...</p>
Link
</div>
</div>
It had to do with the .card class having a display of flex. Once that was removed, I could float the content left or right.
I thought what I'm trying to do would be pretty easy to do but I just can't make it work.
I tried to do pull-left on bootstrap cards and panels and it's not working the way I want it to...
Here is a picture of what I'd like to acheive
Example
Heres code that almost works
<div class="card text-center" *ngFor="let event of eventActivities">
<div class="card-header pull-left">
<img src="..." alt="">
Title </div>
<div class="card-block">
<h4 class="card-title">Title</h4>
<p class="card-text">Description</p>
BUTTON
</div>
<div class="card-footer text-muted">
FOOTER
</div>
</div>
There are a few different ways you could do this. Here's one way using the flex-row and flex-wrap utility classes to change the layout of elements inside the card...
https://www.codeply.com/go/l1KAQtjjbA
<div class="card flex-row flex-wrap">
<div class="card-header border-0">
<img src="//placehold.it/200" alt="" />
</div>
<div class="card-block px-2">
<h4 class="card-title">Title</h4>
<p class="card-text">Description</p>
BUTTON
</div>
<div class="w-100"></div>
<div class="card-footer w-100 text-muted">
FOOTER
</div>
</div>
Here's another approach using the grid...
<div class="card">
<div class="row no-gutters">
<div class="col-auto">
<img src="//placehold.it/200" class="img-fluid" alt="">
</div>
<div class="col">
<div class="card-block px-2">
<h4 class="card-title">Title</h4>
<p class="card-text">Description</p>
BUTTON
</div>
</div>
</div>
<div class="card-footer w-100 text-muted">
Footer stating cats are CUTE little animals
</div>
</div>
https://www.codeply.com/go/l1KAQtjjbA
I'm not sure why you have text-center as nothing it centered in the desired example image.
HTML:
<div class="card">
<div class="card-horizontal">
<div class="img-square-wrapper">
<img class="" src="http://via.placeholder.com/300x180" alt="Card image cap">
</div>
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
CSS:
.card-horizontal {
display: flex;
flex: 1 1 auto;
}
Result:
Keep in mind that the class pull-left is now float-left in Bootstrap version 4.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-3">
<div class="card bg-dark text-white">
<img class="card-img" src="http://via.placeholder.com/300x340" alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Title</h5>
<h3 class="card-text font-weight-bold"><span class="mr-auto">Some other title here</span></h3>
<div class="align-self-end">Text I want at bottom</div>
</div>
</div>
</div>
I am unable to get the text in the last div by applying this class align-self-end to the bottom of the image. I understand that flex has been applied to the .card-img-overlay div with the direction of column then why am I unable to get the div to the bottom of the image?
The card-img-overlay div isn't display:flex.
You can do this by adding the d-flex flex-column classes to it, and use mt-auto to push the text to the bottom.
https://www.codeply.com/go/SRdCTDDoRr
<div class="card bg-dark text-white">
<img class="card-img" src="http://via.placeholder.com/300x340" alt="Card image">
<div class="card-img-overlay d-flex flex-column">
<h5 class="card-title">Title</h5>
<h3 class="card-text font-weight-bold"><span class="mr-auto">Some other title here</span></h3>
<div class="mt-auto">Text I want at bottom</div>
</div>
</div>