I want to create a card group of 3 cards that each should be 4 columns wide. How do I achieve this and keep .card-group working to make them all the same height?
<div class="row">
<div class="card-group">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="http://lorempixel.com/400/200/">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Card text</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="http://lorempixel.com/400/200/">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Card text</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="http://lorempixel.com/400/200/">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Card text</p>
</div>
</div>
</div>
</div>
Remove your divs that declare the col-md-4 class. Card groups and decks are built to auto size your cards width, and will space them evenly automatically.
Check out the sample block for groups from the official documentation if you want to see an example.
Related
The section I am doing is just 6 cards, 3 cards in a row of 2. When the screen goes to small (mobile phone size) I want each card just to be on their own row. Each card showing one by one as the user scrolls.
It functions this way when I resize the screen however, when I go to google tools, it does not show my desired outcome.
.row {
padding: 4rem;
background-color: #F8F8FF;
border: 4px black;
colour: red;
}
.card {
background-color: #ddf;
padding: 30px;
margin: 20px;
transition: 0.40s;
}
.card:hover {
transform: scale(1.05);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container ">
<h1 class="display-4">My Projects/Work</h1>
<div class="row g-3">
<div class="col-12 col-md-6 col-lg-4">
<div class="card" id="proj1">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="project_1" />
<div class="card-body">
<h5 class="card-title">Blog Project</h5>
<p class="card-text">
A simple blog website which I made from scratch using html , css and javascript for the frontend.The backend was done with Django and SQL.
</p>
Click to see
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card" id="proj2">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="project_2" />
<div class="card-body">
<h5 class="card-title">Social media clone </h5>
<p class="card-text">
A social media clone with all the main features of a social media site such as Facebook.In order to achieve this I used Django and React.
</p>
Click to see
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card" id="proj3">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="project_3" />
<div class="card-body">
<h5 class="card-title">E-commence site</h5>
<p class="card-text">
This is a website I build for a small tech company in my local area that specialized in databases .
</p>
Click to see
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</div>
</div>
</div>
You can put classes on "row" or "column" https://getbootstrap.com/docs/4.6/utilities/flex/#align-items
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<section class="bg-light pt-5 pb-5 shadow-sm">
<div class="container">
<div class="row pt-5">
<div class="col-12">
<h3 class="text-uppercase border-bottom mb-4">Bootstrap Responsive</h3>
</div>
</div>
<div class="row">
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Blog Project</h5>
<p class="card-text mb-4">A simple blog website which I made from scratch using html , css and javascript for the frontend.The backend was done with Django and SQL.</p>
Click to see
</div>
</div>
</div>
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Blog Project</h5>
<p class="card-text mb-4">A simple blog website which I made from scratch using html , css and javascript for the frontend.The backend was done with Django and SQL.</p>
Click to see
</div>
</div>
</div>
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Blog Project</h5>
<p class="card-text mb-4">A simple blog website which I made from scratch using html , css and javascript for the frontend.The backend was done with Django and SQL.</p>
Click to see
</div>
</div>
</div>
</div>
</div>
</section>
How do you align 3 images so that they side by side in a single bootstrap card? i am able to align the first 2 images but the 3rd image keeps appearing underneath the first two. Been trying all day to get the 3rd one so slot in beside the first two images.
<div class="well text-center">
<div class="col-md-12">Club Hiarchy:</div>
<div class="row">
<div class="col-md-6">
<img src=".\Pictures\BM.jpg" alt="css_logo" class="img-fluid">
<div class="card-body">
<h5 class="card-title">Rod little</h5>
<p class="card-text"> freddrf34 trrfefwerrf frewferfrf erf ref </p>
</div>
</div>
<div class="col-md-6">
<img src=".\Pictures\TM.jpg" alt="ccs_logo" class="img-fluid">
<div class="card-body">
<h5 class="card-title">Rod little</h5>
<p class="card-text"> freddrf34 trrfefwerrf frewferfrf erf ref </p>
</div>
<div class="col-md-6">
<img src=".\Pictures\TM.jpg" alt="ccs_logo" class="img-fluid">
<div class="card-body">
<h5 class="card-title">Rod little</h5>
<p class="card-text"> freddrf34 trrfefwerrf frewferfrf erf ref </p>
</div>
</div>
</div>
</div>
You are using col-md-6 for 3 images on a 12 column grid! 6x2 = 12 so it will obviously show two images side by side and thrid on underneath. You should use col-md-4 because 4x3 = 12.
try this:
<div class="well text-center">
<div class="col-md-12">Club Hiarchy:</div>
<div class="row">
<div class="col-md-4">
<img src=".\Pictures\BM.jpg" alt="css_logo" class="img-fluid">
<div class="card-body">
<h5 class="card-title">Rod little</h5>
<p class="card-text"> freddrf34 trrfefwerrf frewferfrf erf ref </p>
</div>
</div>
<div class="col-md-4">
<img src=".\Pictures\TM.jpg" alt="ccs_logo" class="img-fluid">
<div class="card-body">
<h5 class="card-title">Rod little</h5>
<p class="card-text"> freddrf34 trrfefwerrf frewferfrf erf ref </p>
</div>
<div class="col-md-4">
<img src=".\Pictures\TM.jpg" alt="ccs_logo" class="img-fluid">
<div class="card-body">
<h5 class="card-title">Rod little</h5>
<p class="card-text"> freddrf34 trrfefwerrf frewferfrf erf ref </p>
</div>
</div>
</div>
</div>
</div>
Why are my bootstrap cards aligned on top of each other and not side by side across the page ?
This is the html I have. The rest of the webside is working fine. Not sure what the issue is with these cards and why they will not align side by side.
<div class="container-fluid padding">
<div id="row" class="row padding">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="grow.png">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p>This is just going to be information about about
the company and wh
</p>
See Profile
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="grow.png">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p>This is just going to be information about about
the company and wh
</p>
See Profile
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="grow.png">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p>This is just going to be information about about
the company and wh
</p>
See Profile
</div>
</div>
</div>
</div>
You forgot to close your div tag. This should work.
<div class="container-fluid padding">
<div id="row" class="row padding">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="grow.png" />
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p>
This is just going to be information about about the company and
wh
</p>
See Profile
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="grow.png" />
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p>
This is just going to be information about about the company and
wh
</p>
See Profile
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="grow.png" />
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p>
This is just going to be information about about the company and
wh
</p>
See Profile
</div>
</div>
</div>
</div>
</div>
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 like to make a card-desk with Bootstrap 4 that contains internal list-groups or card-block's (whatever sections) and this sections should have the same horizontal height.
I tried with d-flex flex-column and list-groups. nothing worked as expected. set a fixed height to each section is not an option.
Example:
https://jsfiddle.net/7kvktrh5/
Code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container py-4">
<div class="card-deck">
<div class="card">
<div class="card-body">
<h4 class="card-title">Product 1</h4>
<p class="card-text"></p>
</div>
<hr>
<div class="card-body">
<p class="card-text">Some description</p>
</div>
<hr>
<div class="card-body">
<p class="card-text">Price</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Product 2</h4>
<p class="card-text">Some Text</p>
</div>
<hr>
<div class="card-body">
<p class="card-text">Some description: This card has supporting text belosupporting textporting text belosuppal content.</p>
</div>
<hr>
<div class="card-body">
<p class="card-text">Price</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Product 3</h4>
<p class="card-text">This is a wider card little bit longer.</p>
</div>
<hr>
<div class="card-body">
<p class="card-text">Some description: This card textporting text belosuppal content.</p>
</div>
<hr>
<div class="card-body">
<p class="card-text">Price</p>
</div>
</div>
</div>
I hope here is your solution
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container py-4">
<div class="card-deck">
<div class="card border-bottom-0 rounded-top" style="border-radius:0;">
<div class="card-body">
<h4 class="card-title">Product 1</h4>
<p class="card-text"></p>
</div>
</div>
<div class="card border-bottom-0 " style="border-radius:0;">
<div class="card-body">
<h4 class="card-title">Product 2</h4>
<p class="card-text">Some Text</p>
</div>
</div>
<div class="card border-bottom-0" style="border-radius:0;">
<div class="card-body">
<h4 class="card-title">Product 3</h4>
<p class="card-text">This is a wider card little bit longer.</p>
</div>
</div>
</div>
<div class="card-deck">
<div class="card rounded-0">
<div class="card-body">
<h4 class="card-title">Product 1</h4>
<p class="card-text">Some description: This card has supporting text belosupporting textporting text belosuppal content.</p>
</div>
</div>
<div class="card rounded-0">
<div class="card-body">
<h4 class="card-title">Product 2</h4>
<p class="card-text">Some Text</p>
</div>
</div>
<div class="card rounded-0">
<div class="card-body">
<h4 class="card-title">Product 3</h4>
<p class="card-text">This is a wider card little bit longer. </p>
</div>
</div>
</div>
<div class="card-deck">
<div class="card border-top-0 rounded-bottom" style="border-radius:0;">
<div class="card-body">
<h4 class="card-title">Product 1</h4>
<p class="card-text"></p>
</div>
</div>
<div class="card border-top-0 rounded-bottom" style="border-radius:0;">
<div class="card-body">
<h4 class="card-title">Product 2</h4>
<p class="card-text">Some Text</p>
</div>
</div>
<div class="card border-top-0 rounded-bottom" style="border-radius:0;">
<div class="card-body">
<h4 class="card-title">Product 3</h4>
<p class="card-text">This is a wider card little bit longer. </p>
</div>
</div>
</div>
</div>