Menu
How I want it to look like:
I'm trying to add horizontal and vertical space between the columns in BS4 but it keeps either messing breakpoints around (black or red) or the breakpoints of bootstrap. Is there any easy way to add space? I've tried the new margin settings of BS4, but it didn't really help (messed up the heading and background-color). Also, the 2 horizontal columns should have the same height.
btw. If you run the snippet, the columns don't display correctly because of the size of the snippet output. That's what it should look like on non-mobile: screenshot (or expand the snippet)
* {
color: white;
}
.black {
background-color: black;
}
.red {
background-color: red;
}
nav {
background-color: antiquewhite;
margin: 0px;
}
.row {}
.head {
background-color: aqua;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" >
<nav class="navbar-static-top">
Nav
</nav>
<div class="container-fluid">
<div class="row p-1">
<div class="col black">
<div class="row">
<div class="col head">
HEADING 0 COLUMN
</div>
</div>
<p>aaaa<br>
aaaa</p>
</div>
</div>
<div class="row row-eq-height p-1">
<div class="col-md-6 black">
<div class="row">
<div class="col head">
HEADING 1 COLUMNS BLACK
</div>
</div>bbbb<br>
bbbb<br>
</div>
<div class="col-md-6 red">
<div class="row">
<div class="col head">
HEADING 2 CLOUMNS RED
</div>
</div>cccc
</div>
</div>
<div class="row p-1">
<div class="col black">
dddd
</div>
</div>
<div class="row p-1">
<div class="col black">
eeee
</div>
</div>
<div class="row row-eq-height p-1">
<div class="col-md-6 black">
<div class="row">
<div class="col head">
HEADING 3 COLUMNS BLACK
</div>
</div>ffff<br>
ffff<br>
</div>
<div class="col-md-6 red">
<div class="row">
<div class="col head">
HEADING 4 CLOUMNS RED
</div>
</div>hhhh
</div>
</div>
</div>
314
To add space between columns in Bootstrap use gutter classes. With gutters you can add horizontal or vertical space or even specify how big space should be on different screen size.
Bootstrap doesn’t work like that as you already have pre-defined column sizes. In Bootstrap, you’d need to do the following to add (small) amounts of spacing. Then in your css, you can do this:
We can keep gap between columns by using normal CSS but here we will use the Bootstrap framework for that. In this article, we will keep a measured gap between columns by the following methods. Using “div” tag: Simply adding a “div” with padding in between two “div” tags gives spacing between the “div”.
Property: There are two ways of adding spacing to the elements. m: This property defines the margin. Margin provides an edge or border. p: This property defines the padding. Padding properties are used to generate space around the content.
Bootstrap Right click on the cell to the right of where you want to insert the space. In the pop up menu, select ‘Insert’. Then select ‘Move Cells to the Right’. If you want to insert an entire column, do the same on the column header at the top of the sheet. How do you remove padding from columns in Bootstrap 3? row-no-gutters class.
For spacing Bootstrap 4 has responsive spacing classes p-* (for padding) and m-* (for margins).
So, in your case, you could experiment by adding p-1 or maybe p-2 to all your columns to achieve the desired effect.
Note: The Bootstrap spacing classes are based on rem units, not on px because px is the old and outdated way of doing things when it comes to responsive design and accessibility.
Here's the reference link for you:
https://getbootstrap.com/docs/4.0/utilities/spacing/
The following code snippet produces the desired result by using nesting as well as the m-1 class to create margins around the columns:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
* {
color: white;
}
.black {
background-color: black;
}
.red {
background-color: red;
}
nav {
background-color: antiquewhite;
margin: 0px;
}
.head {
background-color: aqua;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
<div class="row">
<div class="col head">
HEADING 0 COLUMN
</div>
</div>
<p>aaaa<br>
aaaa</p>
</div>
</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
<div class="row">
<div class="col head">
HEADING 1 COLUMNS BLACK
</div>
</div>
bbbb<br>
bbbb<br>
</div>
</div>
</div>
<div class="col-12 col-md m-1">
<div class="row h-100">
<div class="col red">
<div class="row">
<div class="col head">
HEADING 2 CLOUMNS RED
</div>
</div>cccc
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
dddd
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
eeee
</div>
</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-12 col-md m-1">
<div class="row">
<div class="col black">
<div class="row">
<div class="col head">
HEADING 3 COLUMNS BLACK
</div>
</div>
ffff<br>
ffff<br>
</div>
</div>
</div>
<div class="col-12 col-md m-1">
<div class="row h-100">
<div class="col red">
<div class="row">
<div class="col head">
HEADING 4 CLOUMNS RED
</div>
</div>hhhh
</div>
</div>
</div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
