Is there a way to make each entire card selectable? I am only using html, materialize at the moment but the app is in angular too.
<div class="row">
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="./assets/SVSunset.jpg">
<span class="card-title">Agenda</span>
<a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<p>Whats happening when and where</p>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="./assets/SVSunset.jpg">
<span class="card-title">Map</span>
</div>
<div class="card-content">
<p>Map with markers for church, reception etc</p>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="./assets/SVSunset.jpg">
<span class="card-title">Confetti</span>
</div>
<div class="card-content">
<p>DIY some eco friendly confetti :)</p>
</div>
</div>
</div>
</div>
Any help would be great. Thanks
Ok, so this was easier than i thought by wrapping an <a href=""> around the cards div like below:
<div class="row">
<div class="col s12 m4">
<a href="https://stackoverflow.com">
<div class="card">
<div class="card-image">
<img src="./assets/SVSunset.jpg">
<span class="card-title">Agenda</span>
</div>
<div class="card-content">
<p>Whats happening when and where</p>
</div>
</div>
</a>
</div>
<div class="col s12 m4">
<a href="https://stackoverflow.com">
<div class="card">
<div class="card-image">
<img src="./assets/SVSunset.jpg">
<span class="card-title">Map</span>
</div>
<div class="card-content">
<p>Map with markers for church, reception etc</p>
</div>
</div>
</a>
</div>
<div class="col s12 m4">
<a href="https://stackoverflow.com">
<div class="card">
<div class="card-image">
<img src="./assets/SVSunset.jpg">
<span class="card-title">Confetti</span>
</div>
<div class="card-content">
<p>DIY some eco friendly confetti :)</p>
</div>
</div>
</a>
</div>
</div>
<div class="row">
Related
I am writing in HTML, using Bootstrap 5. I am trying to make a simple row of cards, however there is a lot of empty padding/space. How do I remove this?
Extra Space between cards
Here is my code:
Code\
<div class="row">
<div class="col">
<div onclick="locations(2)" id="location-2" class="w-75 custom-card">
<div class="card-body">
<h5>
<div class="row">
<div class="col">
<img style="border-radius: 5px;" src="https://flagcdn.com/fi.svg" width=40 height=30>
</div>
<div class="col">
<span class="fs-5" style="margin-left:-30px;line-height:-20px;">Helsinki,</span><br><span style="margin-left:-30px;line-height:-20px;" class="fw-normal fs-6">Finland</span>
</div>
</div>
</h5>
</div>
</div>
</div>
<div class="col">
<div onclick="locations(2)" id="location-2" class="w-75 custom-card">
<div class="card-body">
<h5>
<div class="row">
<div class="col">
<img style="border-radius: 5px;" src="https://flagcdn.com/fi.svg" width=40 height=30>
</div>
<div class="col">
<span class="fs-5" style="margin-left:-30px;line-height:-20px;">Helsinki,</span><br><span style="margin-left:-30px;line-height:-20px;" class="fw-normal fs-6">Finland</span>
</div>
</div>
</h5>
</div>
</div>
</div>
</div>
I tried using g-0 in the row, however it did not change at all.
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/
I'm trying to make a "products" page, I have a card in each column, and only one row.
<section>
<div class="container">
<div class="row">
<div class="col s12">
<h4 class="grey-text text-darken-4">
New Listings
</h4>
</div>
</div>
<div class="row">
<div class="col s6 m4 l3">
<div class="card hoverable">
<a href="">
<div class="card-image">
<img src="https://source.unsplash.com/250x250/?mobile" alt="" />
</div>
<div class="card-content">
<h6 class="truncate black-text"><b>Lorem</b></h6>
<p class="truncate grey-text text-darken-2">Buy Lorem</p>
<p class="right-align grey-text"><small>Today</small></p>
</div>
</a>
</div>
</div>
<div class="col s6 m4 l3">
<div class="card hoverable">
<a href="">
<div class="card-image">
<img src="https://source.unsplash.com/250x250/?mobile" alt="" />
</div>
<div class="card-content">
<h6 class="truncate black-text"><b>Lorem</b></h6>
<p class="truncate grey-text text-darken-2">Buy Lorem</p>
<p class="right-align grey-text"><small>Today</small></p>
</div>
</a>
</div>
</div>
<div class="col s6 m4 l3">
<div class="card hoverable">
<a href="">
<div class="card-image">
<img src="https://source.unsplash.com/250x250/?mobile" alt="" />
</div>
<div class="card-content">
<h6 class="truncate black-text"><b>Lorem</b></h6>
<p class="truncate grey-text text-darken-2">Buy Lorem</p>
<p class="right-align grey-text"><small>Today</small></p>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
My code looks something like this, a card jumps from one line to the next even though there is space for it, I don't really know what is wrong
Edit: It is working now, gave a class "small" to card div. Thanks to Sean.
Materialize rows don't handle cards with different heights very well, for this scenario, it helps to fix the height of your cards to make them uniform using the three provided classes:|
<div class="card small">
<!-- Card Content -->
</div>
Three sizes applied as an extra class on the card - small, medium and large which equate to:
.card.small {
height: 300px;
}
.card.medium {
height: 400px;
}
.card.large {
height: 500px;
}
https://materializecss.com/cards.html#sizes
I have 6 cards div showing in rows using Materialize library. But for some reason I cannot make the cards something like this, shown below:
x x x
x x x
So, can anyone help me make it work, am I stuck with the materialize css or can I override it? thanks for the help. All I need to put is 3 divs on top and the other 3 under. So, 2 rows.
here is my code:
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/wired/64/000000/enter-2.png">
<!-- <span class="card-title">Check In</span> -->
</div>
<div class="card-content">
<p>Check In </p>
</div>
<div class="card-action">
Check In
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/ios/50/000000/greek-pillar.png">
</div>
<div class="card-content">
<p>Expand your opportunities</p>
</div>
<div class="card-action">
View Pillars
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/ios/50/000000/chat-message.png">
</div>
<div class="card-content">
<p>Chat </p>
</div>
<div class="card-action">
Start Chat
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/ios-filled/50/000000/search.png">
</div>
<div class="card-content">
<p>Find plenty of resources.</p>
</div>
<div class="card-action">
View Resources
</div>
</div>
</div>
</div>
<!-- gallery -->
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/dotty/50/000000/gallery.png">
</div>
<div class="card-content">
<p>Gallery of events</p>
</div>
<div class="card-action">
View Gallery
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/ios/50/000000/easel.png">
</div>
<div class="card-content">
<p>VAPA</p>
</div>
<div class="card-action">
View VAPA
</div>
</div>
</div>
</div>
CSS:
.card{
width: 50%;
}
.card .card-image {
width: 20%;
}
.row {
display: flex;
flex-direction: column;
}
I hope this what u r expecting:
use col s12 m4 class.
<div class="row">
<div class="col s12 m4">
</div>
<div class="col s12 m4">
</div>
<div class="col s12 m4">
</div>
</div>
<div class="row">
<div class="col s12 m4">
</div>
<!-- gallery -->
<div class="col s12 m4">
</div>
<div class="col s12 m4">
</div>
</div>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="row">
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/wired/64/000000/enter-2.png">
<!-- <span class="card-title">Check In</span> -->
</div>
<div class="card-content">
<p>Check In </p>
</div>
<div class="card-action">
Check In
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/ios/50/000000/greek-pillar.png">
</div>
<div class="card-content">
<p>Expand your opportunities</p>
</div>
<div class="card-action">
View Pillars
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/ios/50/000000/chat-message.png">
</div>
<div class="card-content">
<p>Chat </p>
</div>
<div class="card-action">
Start Chat
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/ios-filled/50/000000/search.png">
</div>
<div class="card-content">
<p>Find plenty of resources.</p>
</div>
<div class="card-action">
View Resources
</div>
</div>
</div>
<!-- gallery -->
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/dotty/50/000000/gallery.png">
</div>
<div class="card-content">
<p>Gallery of events</p>
</div>
<div class="card-action">
View Gallery
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="https://img.icons8.com/ios/50/000000/easel.png">
</div>
<div class="card-content">
<p>VAPA</p>
</div>
<div class="card-action">
View VAPA
</div>
</div>
</div>
</div>
I'm using bootstrap 3, the text is not perfectly aligned under a circular image, this is more obvious on different screens and in bootstrap modals and in different languages, I don't want to start adding margin-left because if I do that, I'll be faulty on some screen. Is there a better way?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Arabic </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Dari </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Pashto </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Kurdish </span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Farsi </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Tigrinya </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Amharic </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> English </span>
</div>
</div>
</div>
</div>
The easy fix to your code is just to add text-center class to all col-xs-* classes. That will center inner images and text inside the col-xs-* wrappers. Note I have added some background color to help visualize the effect.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-3 text-center bg-info">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Arabic </span>
</div>
</div>
<div class="col-xs-3 text-center bg-warning">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Dari </span>
</div>
</div>
<div class="col-xs-3 text-center bg-info">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Pashto </span>
</div>
</div>
<div class="col-xs-3 text-center bg-warning">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Kurdish </span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3 text-center bg-warning">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Farsi </span>
</div>
</div>
<div class="col-xs-3 text-center bg-info">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Tigrinya </span>
</div>
</div>
<div class="col-xs-3 text-center bg-warning">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Amharic </span>
</div>
</div>
<div class="col-xs-3 text-center bg-info">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> English </span>
</div>
</div>
</div>
</div>
You can add a custom class .center to your outermost .container div. This will align the image and text to center using text-align: center;.
.center {
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container center">
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Arabic </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Dari </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Pashto </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Kurdish </span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Farsi </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Tigrinya </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> Amharic </span>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
</div>
<div class="row">
<span class="country text-center"> English </span>
</div>
</div>
</div>
</div>
You could use only one row and then center the image and the text.
<div class="col-xs-3">
<div class="row text-center">
<img src="https://i.imgur.com/ABwB1YD.png" alt="">
<br>
<span class="country text-center"> Arabic </span>
</div>
</div>
Update: you can still use the columns... I've added them to the short version of your example
Flexbox
CSS
display : flex;
justify-content : center;
align-items : center