I write application in angular, using bootstrap. I want the last 2 cards to be in the middle, instead of to the left. Now it looks like one last card is missing. I want to correct it. How to do it?
html code:
<div class="container" style="padding-top:1.1cm">
<div class="card-columns">
<div class="card text-center" [routerLink]="['/special/arrangements-salon']">
<div class="card-body">
<img [src]="salon" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">salon</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-study']">
<div class="card-body">
<img [src]="study" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">gabinet</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-bedroom']">
<div class="card-body">
<img [src]="bedroom" height="100" width="100"> <br><label>
<h5 style="padding-top:6mm">sypialnia
</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-kitchen']">
<div class="card-body">
<img [src]="kitchen" height="100" width="100"> <br><label>
<h5 style="padding-top:6mm">kuchnia
</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-bathroom']">
<div class="card-body">
<img [src]="bathroom" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">łazienka</h5>
</label>
</div>
</div>
</div>
</div>
add d-flex align-items-center justify-content-center to parent => card-columns div or you can add mx-auto to last div
<div class="container" style="padding-top:1.1cm">
<div class="card-columns d-flex align-items-center justify-content-center">
<div class="card text-center" [routerLink]="['/special/arrangements-salon']">
<div class="card-body">
<img [src]="salon" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">salon</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-study']">
<div class="card-body">
<img [src]="study" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">gabinet</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-bedroom']">
<div class="card-body">
<img [src]="bedroom" height="100" width="100"> <br><label>
<h5 style="padding-top:6mm">sypialnia
</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-kitchen']">
<div class="card-body">
<img [src]="kitchen" height="100" width="100"> <br><label>
<h5 style="padding-top:6mm">kuchnia
</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-bathroom']">
<div class="card-body">
<img [src]="bathroom" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">łazienka</h5>
</label>
</div>
</div>
</div>
</div>
Bootstrap card-columns uses CSS multi columns and for various reason it's not really possible to center items, or align rows differently.
Instead of using card-columns, use the grid (row > col-*), but you should note this won't give you a masonry layout or top-to-bottom ordering.
Related
I'm trying to build a portfolio with bootstrap cards where images are also required to be displayed.
Problem is that images are not contained properly within bootstrap card around corners(with class="card-img-top") like some cards are not rounded or some images are not rounded but cards are rounded(tried class="img-rounded").
Kindly zoom in on the images to see the difference. Below are some snippets (and code is given below the snippets):-
Perfect card with image:-
Yellow-> difference
Bug-1:-
Bug-2:-
Bug-3:-
Bug-4:-
Code:-
<%- include('partials/headHTML') %>
<link rel="stylesheet" href="/css/tourpackageStyles.css">
</head>
<!-- <%- include('partials/header') %> -->
<div class="Container">
<div class="container-fluid">
<div class="row">
<div class="col col-md-4">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">Title-1</div>
</div>
<a target="_blank" rel="noopener noreffer" href="#" role="button"
class="btn btn-sm btn-secondary">Enquire</a>
</div>
</div>
<div class="col col-md-4">
<div class="card h-100">
<img src="/images/wildlife/wildlife_tour.jpg"
alt=""
class="card-img-top">
<div class="card-body">
<div class="card-title">Title- 2</div>
</div>
<a target="_blank" rel="noopener noreffer" href="#"
class="btn btn-sm btn-secondary">Enquire</a>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row row-cols-1 row-cols-md-3 row-cols-sm-2 gy-3">
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 3
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 4
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 5
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 6
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 7
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 8
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If you wish to display only image while using card then place image inside card-body to achieve what you want and give card class "overflow-hidden". Because if you use "card-img-top" and then it has only border-top-left-radius and border-top-right-radius so image wouldn't be rounded on bottom.so you have to provide border-radius manually to both bottom side.
<div class="card overflow-hidden">
<div class="card-body">
<img class="img-fluid" src="" alt="">
</div>
</div>
For more information refer official docs https://getbootstrap.com/docs/5.2/components/card/
What I want - I'm using Bootstrap grid cards to create two cards in a row that are aligned horizontally on wider screens both with equal height. I want to keep the 1st image (col-md-4, col-md-8) and make the 2nd image (col-md-5, col-md-7) to show more of the image in the card, but when I do this the 2nd cards image gets taller in height. You can see this in the Stackblitz and image below.
Problem - The 1st image is a 1:1 and the second image is a 16:9 and I want more of the 2nd image (16:9) showing (wider) in the 2nd card. But increasing the column size in the second image increases the height, which is not what I want.
Stackblitz - component, url
What have I tried - I can and have created 2 cards both using a horizontal placement in the card using a row and columns (col-md-4, col-md-8), which makes the images both equal height. I used a class of "h-100" on each card. But when I change the columns of the second image to (col-md-5, col-md-7) to show more of the image, the card increases in size making the 1st card not sized correctly.
I guess another way I can say it is, I don't want the images expanding higher than the text (right side column).
Here is an image from my Stackblitz. The top row is what I have with equal columns for each image and the bottom row is when I increase the size of the column for the 2nd image. Note - I don't want the height to increase, just the width.
Here is the code I'm using.
<div class="container my-3 my-xl-5">
<div class="row">
<div class="col-lg-3">
some text
</div>
<div class="col-lg-9">
<div class="py-2">
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card h-100">
<div class="row no-gutters">
<div class="col-md-4">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
</picture>
</div>
<div class="col-md-8">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<h5 class="card-title d-inline">Brad</h5>
<span class="float-right center-star">4.4</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Level</span>
<span class="float-right">3</span>
</div>
<div class="col-12">
<span>Experience</span>
<span class="float-right">Expert</span>
</div>
<div class="col-12">
<span>Instructed</span>
<span class="float-right">14</span>
</div>
<div class="col-12">
<span>Education</span>
<span class="float-right">None</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<div class="row no-gutters">
<div class="col-md-4">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1631484260/Chuckd/yogabands/CerroCrest/wx415paoq5f0nfzhixcy.jpg" alt="place">
</picture>
</div>
<div class="col-md-8">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<h5 class="card-title d-inline">Park</h5>
<span class="float-right center-star">
3.4
</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Access</span>
<span class="float-right">None</span>
</div>
<div class="col-12">
<span>Max Size</span>
<span class="float-right">10</span>
</div>
<div class="col-12">
<span>Hosted</span>
<span class="float-right">2</span>
</div>
<div class="col-12">
<span>Type</span>
<span class="float-right">None</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-2">
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card h-100">
<div class="row no-gutters">
<div class="col-md-4">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
</picture>
</div>
<div class="col-md-8">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<h5 class="card-title d-inline">Brad</h5>
<span class="float-right center-star">4.4</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Level</span>
<span class="float-right">3</span>
</div>
<div class="col-12">
<span>Experience</span>
<span class="float-right">Expert</span>
</div>
<div class="col-12">
<span>Instructed</span>
<span class="float-right">14</span>
</div>
<div class="col-12">
<span>Education</span>
<span class="float-right">None</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<div class="row no-gutters">
<div class="col-md-5">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1631484260/Chuckd/yogabands/CerroCrest/wx415paoq5f0nfzhixcy.jpg" alt="place">
</picture>
</div>
<div class="col-md-7">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<h5 class="card-title d-inline">Park</h5>
<span class="float-right center-star">
3.4
</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Access</span>
<span class="float-right">None</span>
</div>
<div class="col-12">
<span>Max Size</span>
<span class="float-right">10</span>
</div>
<div class="col-12">
<span>Hosted</span>
<span class="float-right">2</span>
</div>
<div class="col-12">
<span>Type</span>
<span class="float-right">None</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Targetting the image column of the card by creating a class works for me.
for example,
1# Here is the HTML for a card.
<div class="col mb-4 bg-green1">
<div class="card h-100">
<div class="row no-gutters">
<div class="col-md-4 my-custom-class">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
</picture>
</div>
<div class="col-md-8">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<h5 class="card-title d-inline">Brad</h5>
<span class="float-right center-star">4.4</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Level</span>
<span class="float-right">3</span>
</div>
<div class="col-12">
<span>Experience</span>
<span class="float-right">Expert</span>
</div>
<div class="col-12">
<span>Instructed</span>
<span class="float-right">14</span>
</div>
<div class="col-12">
<span>Education</span>
<span class="float-right">None</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
2# I created a class my-custom-class to target the image area.
<div class="col-md-4 my-custom-class">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
</picture>
</div>
3# Here is the CSS property I wrote
.my-custom-class{
min-height: 130px;
overflow: hidden;
}
NOTE: It doesn't make any issue in the responsiveness of the card.
Result
Desktop Version
Responsive Version
This question already has answers here:
How to float 3 divs side by side using CSS?
(16 answers)
Closed 2 years ago.
I tried doing the style="display: inline-block" on each div but it doesn't work. Please help.
Here's my HTML:
<div class="hobby" style="display: inline-block">
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-img-top" src="coding.jpg" />
<div class="card-body">
<h3>Coding</h3>
<p class="card-text">This is my primary hobby. That's why I was able to create a lot of projects.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hobby" style="display: inline-block">
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-img-top" src="guitar.jpg" />
<div class="card-body">
<h3>Guitar</h3>
<p class="card-text">I love music. And one way I appreciate it is by playing guitar.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hobby" style="display: inline-block">
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-img-top" src="coding.jpg" />
<div class="card-body">
<h3>Mandarin</h3>
<p class="card-text">I learn Mandarin Chinese. I really like this language because of its intonation.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- hobby div -->
just wrap your code into parent div like this .
<div style="display:flex">
// your current code
</div>
Your current use of style="display: inline-block" seems to work for me.
Perhaps you should check the margins and padding on your elements to make sure there is enough room to fit them side-by-side.
<div class="hobby" style="display: inline-block">
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<div style="width:100px;height:100px;background-color:gray"></div>
<div class="card-body">
<h3>Coding</h3>
<p class="card-text">This is my primary hobby..</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hobby" style="display: inline-block">
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<div style="width:100px;height:100px;background-color:gray"></div>
<div class="card-body">
<h3>Guitar</h3>
<p class="card-text">I love music.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hobby" style="display: inline-block">
<div class="album py-5 bg-light">
Give the style in a parent div.
<div class="parent-div>
<div class="child-div>
</div>
<div class="child-div>
</div>
<div class="child-div>
</div>
</div>
Try either:
.parent-div {
display: inline-block;
}
.child-div {
width: 33%;
height: 200 px;
}
Or:
.parent-div {
display: flex;
flex-wrap: wrap;
}
I'm trying to create a grid using the Bootstrap 4 card component. For this, I have read the documentation and used the card-deck option. I want that every row has two columns with a similar behaviour to col-12 col-md-6, with the particularity that the second column will also be splited into two rows, each one having an horizontal card. I have this piece of code:
<div class="container">
<div class="row">
<div class="card-deck">
<div class="card">
<img
class="card-img-top"
src$="{{getArticleImage2(article1)}}"
/>
<div class="card-body py-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article1)}}>
<a class="card-link medium-text" target="_blank" href$="https://{{getSources(article1)}}">
{{getSources(article1)}}
</a>
</div>
<p class="card-text article-headline medium-text">
{{article1.schema:headline}}
</p>
</div>
</div>
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img
class="card-img"
src$="{{getArticleImage2(article2)}}"
/>
</div>
<div class="col-md-7">
<div class="card-body p-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article2)}}>
<a class="card-link medium-text" target="_blank" href$="https://{{getSources(article2)}}">
{{getSources(article2)}}
</a>
</div>
<p class="card-text article-headline medium-text">
{{article2.schema:headline}}
</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img
class="card-img"
src$="{{getArticleImage2(article2)}}"
/>
</div>
<div class="col-md-7">
<div class="card-body p-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article3)}}>
<a class="card-link medium-text" target="_blank" href$="https://{{getSources(article3)}}">
{{getSources(article3)}}
</a>
</div>
<p class="card-text article-headline medium-text">
{{article3.schema:headline}}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The problem is that with this disposition I have three cols instead of two. The last two cards are displayed horizontally, but they are not stacked one below the other. Here is a code snippet. How could I achieve this?
if you added a div with class card-columns like that:
<div class="card-deck">
<div class="card-columns">
<div class="card">
<img
class="card-img-top"
src=""
/>
<div class="card-body py-2">
//.................
it will give you two cloumns one with a card displayed vertically and the other contains two horizontal cards.
Also read the last section of the documentation maybe it will be helpful for you to specify how many cards included in one column
https://getbootstrap.com/docs/4.3/components/card/
I have 4 cards that i need to add some spacing between all of them because it looks like they are one into another. I've tried with adding margin-left but it doesn't really work also I've tried to add the class ml-2 but if i do that it will place one card into another row which i also don't want that:(
Code:
<div class="container">
<h2>Test:</h2>
<div class="row">
<div class="col-sm-3">
<div class="card ml-2" style="width: 20rem;">
<img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0lnPcJXGCIDU-L8lq6wdfh9vFzaLupc405LLlxlcKqx4zYnnQ" alt="Card image cap">
<div class="card-body text-center">
<p class="card-text text-center" style="color:black">Dacia Logan</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row">
<div class="col-md-6">
<i class="material-icons"></i><span>15800</span>
</div>
<div class="col-md-6">
<i class="material-icons"></i><span>Bucuresti</span>
</div>
</div>
</li>
</ul>
<button href="#" class="btn btn-danger">Save</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card ml-2" style="width: 20rem;">
<img class="card-img-top" src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?auto=compress&cs=tinysrgb&h=350" alt="Card image cap">
<div class="card-body text-center">
<p class="card-text text-center" style="color:black">Dacia Logan</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row">
<div class="col-sm-6">
<i class="material-icons"></i><span>5800</span>
</div>
<div class="col-sm-6">
<i class="material-icons"></i><span>Bucuresti</span>
</div>
</div>
</li>
</ul>
<button href="#" class="btn btn-danger">Save</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card ml-2" style="width: 20rem;">
<img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0lnPcJXGCIDU-L8lq6wdfh9vFzaLupc405LLlxlcKqx4zYnnQ" alt="Card image cap">
<div class="card-body text-center">
<p class="card-text text-center" style="color:black">Dacia Logan</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row">
<div class="col-sm-6">
<i class="material-icons"></i><span>5800</span>
</div>
<div class="col-sm-6">
<i class="material-icons"></i><span>Bucuresti</span>
</div>
</div>
</li>
</ul>
<button href="#" class="btn btn-danger">Save</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="https://www.carmag.co.za/wp-content/uploads/2016/11/Golf10.jpg" alt="Card image cap">
<div class="card-body text-center">
<p class="card-text text-center" style="color:black">Dacia Logan</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row">
<div class="col-sm-6">
<i class="material-icons"></i><span>5800</span>
</div>
<div class="col-sm-6">
<i class="material-icons"></i><span>Bucuresti</span>
</div>
</div>
</li>
</ul>
<button href="#" class="btn btn-danger">Save</button>
</div>
</div>
</div>
</div>
Thanks!
Try to put padding on the card class:
padding: 10px;
You could use one of the Bootstrap spacing utilities.
https://getbootstrap.com/docs/4.1/utilities/spacing/
For example, place this div between two cards:
<div class="mt-3" />