Twitter Bootstrap - add top space between rows
Editing or overriding the row in Twitter bootstrap is a bad idea, because this is a core part of the page scaffolding and you will need rows without a top margin.
To solve this, instead create a new class "top-buffer" that adds the standard margin that you need.
.top-buffer { margin-top:20px; }
And then use it on the row divs where you need a top margin.
<div class="row top-buffer"> ...
Bootstrap add space in between cols without breaking row
The reason why it breaks the rows is because you are using the Bootstrap column classes incorrectly. Those are supposed to be used as containers for your content i.e. you are not supposed to add any custom styling (of the kind you did) to your columns because that would lead exactly to the problems you have now.
To solve this, you wrap your column content in divs and then use your custom class giveButton on those divs. That gives you the freedom to apply any styling you want while still letting Bootstrap do its job when it comes to spacing and responsiveness etc.
To make your buttons span full width I added the native Bootstrap class w-100 (width:100%) to the divs and also added the Bootstrap class text-center to center things. Done!
Now, the Bootstrap gutters automatically create neat spacing but you can control it further by applying Bootstrap spacing classes to your columns. For example, px-* with a value between 0 and 5 instead of * will control the horizontal padding and py-* will control the vertical padding.
Here's the working code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style> .stripe-button-el { visibility: hidden !important; } .giveButton { background: #3D94F6; background-image: -webkit-linear-gradient(top, #e9e9e9, #f8f8f8); background-image: -moz-linear-gradient(top, #e9e9e9, #f8f8f8); background-image: -ms-linear-gradient(top, #e9e9e9, #f8f8f8); background-image: -o-linear-gradient(top, #e9e9e9, #f8f8f8); background-image: linear-gradient(to bottom, #e9e9e9, #f8f8f8); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; color: #747474; font-family: Open Sans; font-size: 46px; font-weight: 100; padding: 1px; box-shadow: 1px 1px 7px 0px #000000; -webkit-box-shadow: 1px 1px 2px 0px #000000; -moz-box-shadow: 1px 1px 2px 0px #000000; text-shadow: 3px 0px 5px #d4d4d4; border: solid #bababa 1px; text-decoration: none; display: inline-block; cursor: pointer; text-align: center; font-family: 'Anton', sans-serif; } .giveButton span{ top: -15px; position: relative; left: -6px; font-size: 33px;}
.giveButton:hover { background: #1E62D0; background-image: -webkit-linear-gradient(top, #0c8955, #71f68f); background-image: -moz-linear-gradient(top, #0c8955, #71f68f); background-image: -ms-linear-gradient(top, #0c8955, #71f68f); background-image: -o-linear-gradient(top, #0c8955, #71f68f); background-image: linear-gradient(to bottom, #0c8955, #71f68f); text-decoration: none; color: white; } .SelectedButton { background-image: -webkit-linear-gradient(top, #0c8955, #71f68f); background-image: -moz-linear-gradient(top, #0c8955, #71f68f); background-image: -ms-linear-gradient(top, #0c8955, #71f68f); background-image: -o-linear-gradient(top, #0c8955, #71f68f); background-image: linear-gradient(to bottom, #0c8955, #71f68f); text-shadow: 3px 0px 5px #7c7c7c; color: white; }</style>
<div class="container">
<div class="row"> <div class="col-4 text-center"><div class="giveButton w-100"><span>$</span>25</div></div> <div class="col-4 text-center"><div class="giveButton w-100"><span>$</span>50</div></div> <div class="col-4 text-center"><div class="giveButton w-100"><span>$</span>100</div></div> </div>
<div class="row"> <div class="col-4 text-center"><div class="giveButton w-100"><span>$</span>250</div></div> <div class="col-4 text-center"><div class="giveButton w-100"><span>$</span>500</div></div> <div class="col-4 text-center"><div class="giveButton w-100"><span>$</span>1,000</div></div> </div>
<div class="row"> <div class="col-12 text-center"> <div class="giveButton w-100"><span>$</span>5,000</div> </div> <div class="col-12 text-center"> <div class="giveButton w-100"><span>$</span>10,000</div> </div> </div>
</div>bootstrap: spaces between rows in mobile mode
I moved the margin from the row to col.
http://jsfiddle.net/aq9Laaew/147947/
h3{ margin-bottom:-20px;}
div[class^='col'] { background: #f8f9fa; margin-top: 40px;}
.col { border: solid 1px #6c757d; padding: 10px;}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script><div class="container"> <h3>Block #1</h3> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-3"> Block #11 </div>
<div class="col-xs-6 col-sm-6 col-md-3"> Block #12 </div>
<div class="col-xs-6 col-sm-6 col-md-3"> Block #13 </div>
<div class="col-xs-6 col-sm-6 col-md-3"> Block #14 </div> </div> <div class="row row-divider"> <div class="col-xs-6 col-sm-6 col-md-3"> Block #21 </div>
<div class="col-xs-6 col-sm-6 col-md-3"> Block #22 </div>
<div class="col-xs-6 col-sm-6 col-md-3"> Block #23 </div>
<div class="col-xs-6 col-sm-6 col-md-3"> Block #24 </div> </div> <div class="row row-divider"> <div class="col-xs-6 col-sm-6 col-md-3"> Block #31 </div>
<div class="col-xs-6 col-sm-6 col-md-3"> Block #32 </div>
<div class="col-xs-6 col-sm-6 col-md-3"> Block #33 </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.
Bootstrap4 Spacing between rows
Try this!
td { padding: 10px 0; border-bottom: 1px solid #dee2e6;}.table { border-collapse: separate; border-spacing: 0px 10px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive"> <table id="example" class="table table-hover" style="width:100%; margin-top:4%"> <thead class="thead" style="background-color:#5AC5F1;color:white;"> <tr> <th scope="row">Event Name</th> <th scope="row">Start Date</th> <th scope="row">End Date</th> <th scope="row">Role</th> <th scope="row">Status</th> </tr> </thead> <tbody class="shadow-sm p-3 m-3 rounded"> <tr> <td><a href="#myModal" class="myModal" data-toggle="modal" id="@item.EVL_id" onclick="GetEventsDetails(@item.EVL_id)">@item.EVL_nameEVT</a></td> <td>@item.EVL_dateStart.ToShortDateString()</td> <td>@item.EVL_dateEnd.ToShortDateString()</td> <td>@item.EVL_role</td> <td>@item.EVL_status</td> </tr> <tr> <td><a href="#myModal" class="myModal" data-toggle="modal" id="@item.EVL_id" onclick="GetEventsDetails(@item.EVL_id)">@item.EVL_nameEVT</a></td> <td>@item.EVL_dateStart.ToShortDateString()</td> <td>@item.EVL_dateEnd.ToShortDateString()</td> <td>@item.EVL_role</td> <td>@item.EVL_status</td> </tr> <tr> <td><a href="#myModal" class="myModal" data-toggle="modal" id="@item.EVL_id" onclick="GetEventsDetails(@item.EVL_id)">@item.EVL_nameEVT</a></td> <td>@item.EVL_dateStart.ToShortDateString()</td> <td>@item.EVL_dateEnd.ToShortDateString()</td> <td>@item.EVL_role</td> <td>@item.EVL_status</td> </tr> </tbody> </table></div>Related Topics
Using Rails 3.1 Assets Pipeline to Conditionally Use Certain Css
Css - Overflow: Scroll; - Always Show Vertical Scroll Bar
How to Draw a Circle Sector in Css
How to Build a 2 Column (Fixed - Fluid) Layout With Twitter Bootstrap
Bootstrap 3 - Disable Navbar Collapse
How to Make Internet Explorer 8 to Support Nth Child() CSS Element
Does CSS Hover Work on Mobile Devices
How to Remove the Outline Around Hyperlinks Images
Why Does 'Overflow: Auto' Clear Floats? And Why Are Clear Floats Needed
Sass: Randomly Pick Background-Image from a List
Combining :Last-Child With :Not(.Class) Selector in Css
Passing Parameters to CSS Animation
Setting CSS Top Percent Not Working as Expected
Why Doesn't the Selector H3:Nth-Child(1):Contains('A') Work
Simulating Transform-Origin Using Translate
How to Add Spacing Between Columns
Css: Set a Background Color Which Is 50% of the Width of the Window