Add spacing between vertically stacked columns in Bootstrap 4
Here's how I ended up making this work:
.row [class*="col-"] {
@extend .mb-4;
&:last-child {
@extend .mb-0;
}
@extend .mb-md-5;
&:nth-last-of-type(1),
&:nth-last-of-type(2),
&:nth-last-of-type(3) {
@extend .mb-md-0;
}
}
Vertical space when stacking columns in Bootstrap 3
One way would be with CSS that adds margin-bottom to col-* on smaller devices/widths..
@media (max-width: 768px) {
[class*="col-"] {
margin-bottom: 15px;
}
}
Another way is to add a div that is only visible on smaller devices/widths..
<div class="col-sm-6">
<div class="hidden-lg hidden-md hidden-sm"> </div>
...
Demo: http://bootply.com/92276
Update 2019
Bootstrap 4 now has spacing utilities that can be used.
Also see: Add spacing between vertically stacked columns in Bootstrap 4
Adding space between columns in Bootstrap 4
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>Why is there no vertical space between Bootstrap 4 rows
Bootstrap 5 (update 2021)
Bootstrap 5 has new gutter classes that are specifically designed to adjust the gutter for an entire row. Additionally, there is now the concept of vertical gutters to adjust the vertical spacing between rows and columns that wrap inside each row.
- use
g-0for no gutters - use
g-(1-5)to adjust horizontal & vertical gutters via spacing units - use
gy-*to adjust vertical gutters - use
gx-*to adjust horizontal gutters
Bootstrap 4 (original answer)
Rows no longer have margin-bottom in Bootstrap 4. Use the new spacing utils (mb-4).
See https://stackoverflow.com/a/42960338/171456.
make space between bootstrap column align one below other in small device
You need to just add class then col-sm-8 will be full width and also space between columns at sm breakpoint
Add this below calss on col-sm-8 div only:
<div class="col-sm-8 mt-3 mt-md-0 p-0 px-md-3">
document.getElementsByTagName("h1")[0].style.fontSize = "80px";<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" > <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> --> <style> .nav-pills .nav-link.active{ color: rgb(12, 11, 11) !important; background-color: rgb(233, 233, 233); } html { position: relative; min-height: 100%;}body { /* Margin bottom by footer height */ margin-bottom: 60px;}.footer { position: absolute; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ height: 60px; line-height: 60px; /* Vertically center the text there */ background-color: #1d1c1c;}
/* Custom page CSS-------------------------------------------------- *//* Not required for template or sticky footer method. */
body > .container { padding: 60px 15px 0;}
.footer > .container { padding-right: 15px; padding-left: 15px;}
code { font-size: 80%;}
</style></head><body> <header> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> </header>
<main role="main" class="container"> <div class="row"> <div class="col-sm-3 text-white bg-secondary pt-2 pb-2" >
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <a class="nav-link text-light active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Profile</a> <a class="nav-link text-light " id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> <a class="nav-link text-light " id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> </div> </div>
<div class="col-sm-8 mt-3 mt-md-0 p-0 px-md-3"> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active " id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> <div class="card"> <div class="card-header card-title"><b>Profile</b></div> <div class="card-body">Panel Content</div> </div> </div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> <div class="card"> <div class="card-header card-title"><b>Messages</b></div> <div class="card-body">Panel Content</div> </div> </div> <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab"> <div class="card"> <div class="card-header card-title"><b>Settings</b></div> <div class="card-body">Panel Content</div> </div> </div> </div> </div>
</div> </main> <footer class="footer"> <div class="container"> <span class="text-muted">Place sticky footer content here.</span> </div> </footer> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body></html>Bootstrap 4 elegant vertical column gap
As an option - reformat your html and use bootstrap spacing:
<div class="col-md-2 p-0">
<div class="content mr-2">
1 of 2
</div>
</div>
<div class="col-md-10 p-0">
<div class="content ml-2">
2 of 2
</div>
</div>
How to add vertical spacing between flexbox wrapped items in bootstrap4?
A few things in your code...
- why use float with flex? Bootstrap 4 uses flex instead of float (which was used by bootstrap 3)
- the divs in pink are from your code with classes removed to show the effect in the browser/snippet
- the divs in blue show the solution with flex (using bootstrap 4 classes)
- margin-bottom works in both
working snippet below:
.flex-wrap>div { width: 100px; height: 50px; display: block;}
.my-divs { float: left; margin-bottom: 10px; background: lightpink;}
.my-flex-div { background: lightblue; margin-bottom: 5px;}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container-fluid"> <div class="row no-gutter"> <div class=" d-md-flex col-md-12 flex-wrap"> <div class="my-divs">Div</div> <div class="my-divs">Div</div> <div class="my-divs">Div</div> <div class="my-divs">Div</div> <div class="my-divs">Div</div> </div> <hr/> <div class="d-flex flex-wrap"> <div class="my-flex-div">Div 2</div> <div class="my-flex-div">Div 2</div> <div class="my-flex-div">Div 2</div> <div class="my-flex-div">Div 2</div> <div class="my-flex-div">Div 2</div> </div> </div></div>How to add space between columns in Bootstrap 4
Paddings inside cols works fine. Use class px-5. You can use number form 0 to 5 in it. px means "padding x" (both left and right). Although you can use size breakpoints in it, like px-sm-3. More about padding in Bootstrap 4 here https://getbootstrap.com/docs/4.4/utilities/spacing/
<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"> <section id="features">
<div class="container-fluid"> <div class="row justify-content-around"> <div class="col-lg-4 col-sm-12 px-5"> <i class="fas fa-check-circle"></i> <h3>Easy to use.</h3> <p>So easy to use, even your dog could do it.</p> </div>
<div class="col-lg-4 col-sm-12 px-5" > <i class="fas fa-bullseye"></i> <h3>Elite Clientele</h3> <p>We have all the dogs, the greatest dogs.</p> </div>
<div class="col-lg-4 col-sm-12 px-5"> <i class="fas fa-heart"></i> <h3>Guaranteed to work.</h3> <p>Find the love of your dog's life or your money back.</p> </div> </div> </div> </section>Related Topics
How to Connect a Child Item in a Tree-Structure Visualization with CSS
Why Do The CSS Width and Height Properties Not Adjust for Padding
Centering an Image Within a Div
Meta Viewport Just on Portrait
Create Line Numbers on Pre with CSS Only
Offline iOS Web App: Loads My Manifest, But Doesn't Work Offline
Zebra Striping a Flexbox Table with Wrapping Items
How to Wrap Text Around a Non Rectangular Image
Make an Image Width 100% of Parent Div, But Not Bigger Than Its Own Width
Use Excel Vba to Click on a Button in Internet Explorer, When The Button Has No "Name" Associated
Fallback Background-Image If Default Doesn't Exist
How to Set Favicon.Ico Properly on Vue.Js Webpack Project
Wrapping Text Around an Image with Indentation and Justify
Bad Value X-Ua-Compatible for Attribute Http-Equiv on Element Meta
PHP Mail() - How to Put an HTML Link in an Email
How to Avoid Flash of Unstyled Text (Fout) Even with Web Font Loader