I'm learning the Bootstrap framework and am attempting to make a two column card system to allow a "feed" of cards to be captured. Depending on the card type it will sit on the left or the right column. I'm using Bootstrap with what I believe to be a 12 column container. Inside the container there is a 6 column div and another 6 column div but for whatever reason they do not separate and all the cards end up being one long list of cards.
Example here:
http://codepen.io/jasonrpan/pen/KaLRdj
<div class="container">
<div class="col-md-6">
<div class="card">
<div class="card-block">
<h1 class="card-text good-review-score float-left">8.0</h1>
<h4 class="card-title">Card on the Left 1</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<p class="card-text text-right">Footer Text - Possible Link Out</p>
</div>
</div>
<div class="card">
<div class="card-block">
<h1 class="card-text good-review-score float-left">8.0</h1>
<h4 class="card-title">Card on the Left 2</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<p class="card-text text-right">Footer Text - Possible Link Out</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-block">
<h1 class="card-text good-review-score float-left">8.0</h1>
<h4 class="card-title">Card on the Right 1</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<p class="card-text text-right">Footer Text - Possible Link Out</p>
</div>
</div>
<div class="card">
<div class="card-block">
<h1 class="card-text good-review-score float-left">8.0</h1>
<h4 class="card-title">Card on the Right 1</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<p class="card-text text-right">Footer Text - Possible Link Out</p>
</div>
</div>
</div>
Curious on why this might be?
Based on https://v4-alpha.getbootstrap.com/layout/grid/ you have to add a div with the class row around the columns.
Example here: http://codepen.io/Spreadyy/pen/aprrBG.
<div class="row">
Columns always must be within row...
Rows are horizontal groups of columns that ensure your columns are
lined up properly. We use the negative margin method on .row to ensure
all your content is aligned properly down the left side. Content
should be placed within columns, and only columns may be immediate
children of rows.
http://www.codeply.com/go/4GRZdVJ4KM
Related
I having a hard time with a simple problem: aligning a card group using Bootstrap. Cant get it to center or at least flush right so that it wont cover my left sidebar.
<div class="row row-cols-1 row-cols-md-5 g-8">
<div class="col">
<div class="card">
<img src="img/heart.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="img/heart.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="img/heart.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="img/heart.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Any help would be greatly appreciated!!!
Blessings,
Meka
I'm using bootstrap 4 to display cards. All is working as expected. The issue I have is that if one of the footers has more content than the others, the footer is raised to accommodate this. Is there a way of the footer pushing the content down and keeping the tops aligned?
DEMO: http://jsfiddle.net/6uv9a30n/1/
<div class="container">
<div class="card-deck">
<div class="card mb-4">
<div class="card-body">
<h4 class="card-title">1 Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
Current Output:
Desired Output:
This is going to be sound cheap but you can use another small HTML tag having css property transparent color so that it will always remain on top not matter how much text you add.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="card-deck">
<div class="card mb-4">
<div class="card-body">
<h4 class="card-title">1 Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
<small style="color: transparent;">Text not going to show</small>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<h4 class="card-title">1 Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago Last updated 3 mins ago</small>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<h4 class="card-title">1 Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
<small style="color: transparent;">Text not going to show</small>
</div>
</div>
</div>
</div>
You can do it with the flex CSS property on card-body and card-footer.
body {
margin: 10px;
}
/* Customize Bootstrap card */
.card-deck .card-body {
flex: 0 0 auto;
}
/* fix footer height */
.card-footer {
flex: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >
<div class="container">
<div class="card-deck">
<div class="card mb-4">
<div class="card-body">
<h4 class="card-title">1 Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer equal">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<h4 class="card-title">1 Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago Last updated 3 mins ago</small>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<h4 class="card-title">1 Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
I am working with boostrap cards, and the following is what I have them currently looking like:
Now what I'd like to do is add vertical space between the cards so that Card 1 and Card 3 aren't stuck together as well as Card 2 and Card 4.
The following is my code and setup for the cards I currently have:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 1</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 2</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 3</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 4</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
Add Class mb-3 for <div class="col-sm-6 mb-3">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 1</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 2</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 3</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">CARD 4</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
if you want more space, bootstrap class available like mb-4 mb-5
more info here
Add margin-bottom: 20px inside a card class in css file. check the below simple css.
In style.css file
.card {
margin-bottom: 20px !important;
}
I would add something like this (SCSS):
div[class^="col-"] {
padding-top: 1rem;
padding-bottom: 1rem;
> h1,
> h2,
> h3,
> h4,
> h5,
> h6 {
margin-top: 0;
}
}
* + * {
:last-child {
margin-bottom: 0;
}
}
... to handle vertical spaces in general.
I am using the cards from bootstrap but I can't seem to figure out how to achieve a layout where it looks like this:
[card 1 ] [card 2]
[card 3]
where card 1 and card 2 are equal width across the page and card 3 is below but under card 2 to the right
I try to use pull right or float right but no luck.
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
Try this, put the card 2 and card 3 in the same column:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
I know that OP already got his answer and that he is using Bootstrap, but I just want to add that for scenarios where there is a need for grid formating of element, CSS grid might be a better choice than Bootstrap.
This will do.
<div class="container">
<h2> Card</h2>
<div class = "row">
<div class="card col-md-6">
<div class="card-body">Basic card 1</div>
</div>
<div class="card col-md-6">
<div class="card-body">Basic card 2</div>
</div>
</div>
<div class = "row">
<div class=" col-md-6">
</div>
<div class="card col-md-6">
<div class="card-body">Basic card 3</div>
</div>
</div>
</div>
Notice the width of the two upper cards are not as wide as the lower one
View source
source code:
<div class="col-md-12">
<div class="card-deck m-b-1">
<div class="card">
<div class="card-block">
<img alt="Card image cap" class="card-img-top" src=
"http://lorempixel.com/318/180/sports/5">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below
as a natural lead-in to additional content. This content is a little
bit longer.</p><a class="card-link" href="#">Läs mer</a>
</div>
</div>
<div class="card">
<div class="card-block">
<img alt="Card image cap" class="card-img-top" src=
"http://lorempixel.com/318/180/sports/7">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural
lead-in to additional content.</p><a class="card-link" href="#">Läs
mer</a>
</div>
</div>
</div>
</div>
I've tried changing up the rows and column structure and not using columns at all but no success!
Actually, that's not messed up, that's the intended view. There's 2 cards within the card-deck so there's 2 columns. To have the upper 2 cards the same width as the lower one, take them out of the card-deck div.