How can I add space between Bootstrap card elements?
There is no mt-20 in Bootstrap 4. The Bootstrap 4 margin classes are...
m{sides}-{size}
Where size is from 0-5, and size is a portion of the default spacer unit of 1rem
- 0 - eliminate the margin
- 1 - set the
margin to.25rem - 2 - set the margin to
.5rem - 3 - set the margin to
1rem - 4 - set the margin to
1.5rem - 5 - set the margin to
3rem
So you can use mt-3, mt-4, mt-5 etc..
http://www.codeply.com/go/29IGJHkqVd
Add spacing between bootstrap cards
.card{
margin-right:20px!important;
}
your can modify your card default margin and definitely used !important
How can I put space between Bootstrap cards when they stack for mobile?
Generally, you can use the Boostrap spacing utilities. For responsive, you could try mb-md-0 mb-2. This should apply margin to the bottom of the cards when the viewport is small (and no margin otherwise).
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="col-12 col-sm-4 col-lg-2">
<div class="card mb-2 mb-md-0">
<div class="card-body">
<div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
<span><font size=4>{{ x.id }}</font></span>
</div>
Not yet started!
<div class="progress sh-3">
<div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
</div>
</div>
</div>
<div class="card mb-2 mb-md-0">
<div class="card-body">
<div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
<span><font size=4>{{ x.id }}</font></span>
</div>
Not yet started!
<div class="progress sh-3">
<div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
</div>
</div>
</div>
<div class="card mb-2 mb-md-0">
<div class="card-body">
<div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
<span><font size=4>{{ x.id }}</font></span>
</div>
Not yet started!
<div class="progress sh-3">
<div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
</div>
</div>
</div>
</div>Adding spacing between cards in bootstrap
Try to put padding on the card class:
padding: 10px;
How to add gaps between the bootstrap cards
This is because you are using .col-* and .card on the same element. Try to be in the habit of putting your content elements inside your layout grid elements.
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#" class="">
Beautiful
<img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#" class="">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#" class="">
Beautiful
<img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
</div>
</div>
</div>
How to add vertical spacing between Bootstrap Cards
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> <a href="#" class="btn btn-primary">Go somewhere</a> </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> <a href="#" class="btn btn-primary">Go somewhere</a> </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> <a href="#" class="btn btn-primary">Go somewhere</a> </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> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div>
</div></div>How do I add spacing between rows of a card-deck in bootstrap
You can override the main Bootstrap styles (don't edit the actual source code) so that each card has a margin bottom or top.
.card {
margin-bottom: 1em;
}
Creating your own style is fine too but, I would not edit the col-sm-3 because that would be a universal project change and you can run into issues later on.
Additionally, if you want to use another built in spacing utility from bootstrap try editing the html with:
.mb-1, .mb-2, ... , .mb-5 (same works for padding). All you have to do is choose a spacing property (m or p for margin or padding), choose a side/direction (t or b for top or bottom), and the size (1-5 and auto).
Docs: https://getbootstrap.com/docs/4.3/utilities/spacing/
HTML example (adding mb-4 to your card):
<div class="card-deck">
@foreach ($animes as $anime)
<div class="col-sm-3">
<div class="card h-100 mb-4">
<img class="card-img-top" src="/storage/cover_images/{{$anime->cover_image}}" alt="{{$anime->name}}">
<div class="card-body">
<p class="card-text text-center"> <strong>{{$anime->name}}</strong></p>
</div>
<a class="card-footer btn btn-primary bg-primary" href="/shows/{{$anime->id}}"> Explore </a>
</div>
</div>
@endforeach
</div>
This will add a margin to the bottom of your card. I personally use margin bottom but it's up to you.
How to add margin between Bootstrap cards without triggering flex-wrap?
First and foremost, remove any margins set on Bootstrap classes. Bootstrap is intended to not need to add spacing/sizing, as it is built into the classes.
I re-worked your structure quite a bit. Mostly to try to structure the elements as Bootstrap recommends. With that being said, don't nest each card in sections. Instead, nest them in divs. The <section> tag defines a section in a document. & if I am not mistaken, the three cards aligned in a row qualify as a section. I nested all three cards in one section and called it the highlights class you already had.
col's function as a method of reserving space for certain content. So with a three-card setup, you should use col-4. The largest col is col-12, which spans the full width of the screen. 12/4 = 3. Then you can use sm lg and md for responsiveness on media screens. The above example creates three equal-width columns on small, medium, large, and extra-large devices using the predefined grid classes. Those columns are centered on the page with the row parent.
With this being said, the main reason your code was not working as intended is the additional CSS margins and that the cards should be nested in the col's. Lastly, the misuse of column sizing as mentioned previously.
I'd suggest brushing up on the Bootstrap Grid System. You can build a fully responsive site with little knowledge in CSS if you know Bootstrap.
.dark-theme body,
.dark-theme .card {
background-color: #121212;
color: #ffffffa6;
}
.dark-theme section.card {
background-color: #464646;
}
.card {
border-width: 0;
}
main {
padding: 100px;
}
h1 {
text-align: center;
}
.dark-theme .btn {
background-color: salmon;
border-color: salmon;
}<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<section class="highlights">
<div class="row w-100 m-0 justify-content-center">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card w-100">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#" class="card__btn btn btn-info">when an unknown</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card w-100">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card w-100">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</div>
</div>
</div>
</section>Related Topics
Make Some Gradient Move Endlessly in a Progress Bar Like in Windows 7
Using CSS Variables as SASS Function Arguments
Creating 3 Perfectly Equal Columns That Take Up 100% on The Browser Window Width
Symfony2 - Formbuilder - Add a Class to The Field and Input
CSS3 Button Background Color Infinite Transition
CSS Animate Text from Left to Right in Div Container with Overflow Hidden
Is There a Reason to Use Uppercase Letters for Hexadecimal CSS Color Values
Trying to Do a CSS Transition on a Class Change
Scss/Sass to CSS in Special Folder with PHPstorm 7 File Watcher
How to Set Margins 0 on Print Preview
The Min/Max-Width Media Query Doesn't Make Grammatical Sense
Why Can't I Decrease The Line-Height of This Text
How to Left Align Bootstrap 3 Dropdown Menu
Change Input Placeholder Color Darker
CSS - Centering a Page - Then Making The Page 100% Height
An Efficient Way to Merge 2 Large CSS Files