Create a user-defined gap between two Bootstrap columns
You could add a class which modifies the width of col-md-6. The width of this class is set to 50%. A smaller gap is achieved by reducing the width like so:
.dashboard-panel-6 {
width: 45%;
}
Add this to your div elements. This way the width rule of col-md-6 gets overriden.
<div class="row">
<div class="col-md-6 dashboard-panel-6">...</div>
<div class="col-md-6 dashboard-panel-6">...</div>
</div>
How to add spacing between columns?
You can achieve spacing between columns using the col-md-offset-* classes, documented here. The spacing is consistent so that all of your columns line up correctly. To get even spacing and column size I would do the following:
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5 col-md-offset-2"></div>
</div>
In Bootstrap 4 use: offset-2 or offset-md-2
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>how to give space between bootstrap columns
If I understand correctly, you want images in columns but make some space between the columns so pictures won't collide.
If you don't want to use paddings, you can always use margins. In bootstrap, you can give ml-1, ml-2 classes (until 5) which can make margins for you.
ml -> margin-left
mr -> margin-right
Here is a simple example based on your code, I hope it helps!
.box{
height: 100px;
background-color: blue;
box-sizing: border-box;
display: inline-block;
margin-left: 20px;
margin-right: 20px;
}
.myrow{
background-color: red;
}
img {
position: relative;
max-width: 100%;
max-height: 100%;
}<div class="container">
<div class="row myrow gx-5">
<div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
<div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
<div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
<div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
<div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
<div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
</div>
</div>how to add space between column BOOTSTRAP 4
There's no easy way to add custom margins to bootstrap columns without breaking the behavior of its grid layout on various responsiveness intervals.
You could use offset-* utility classes, but that will actually offset that column by a number of columns, not by a random amount of pixels.
A rough example of using it would be:
<div class="row">
<div class="col-md-5 shadow">
...
</div>
<div class="col-md-5 shadow offset-md-2">
...
</div>
</div>
By far, the easiest way to do it is to place a wrapper inside the column and use margins on that. In your case, I guess you want the space between them for the shadow to render nicely, so simply create an extra <div> and move .shadow on that one:
<div class="row ">
<div class="col-md-6">
<div class="shadow">
...
</div>
</div>
<div class="col-md-6">
<div class="shadow">
...
</div>
</div>
</div>
Now playing around with .shadow's margin is easy and it doesn't break the grid layout.
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>Adding space between 2 columns in Bootstrap 4
Use the responsive padding classes (ie: pr-sm-2)...
<div class="wrapper">
<div class="container-fluid px-0">
<div class="row no-gutters justify-content-between">
<div class="col-sm-6 pr-sm-2">
<img src="https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg" class="img-fluid">
</div>
<div class="col-sm-6">
<img src="https://img.freepik.com/free-photo/white-cloud-blue-sky-sea_74190-4488.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
https://codeply.com/p/9FeTihZoPs
Gap between columns in Bootstrap Grid
Since Bootstrap uses box-sizing:border-box and float to set the columns is better if you use some value on the border to create the gap:
.col-xs-3 {
border:2px solid #fff; /*Color of the Background*/
}
Check the Demo
Bootstrap: add margin/padding space between columns
Bootstrap 5 (Update 2021)
Bootstrap 5 has still includes spacing utilities for padding. However, because of new RTL support "left" and "right" have been changed to "start" and "end". For example pl-2 is now ps-2.
pl-*=>ps-*(padding-left)pr-*=>pe-*(padding-right)ml-*=>ms-*(margin-left)mr-*=>me-*(margin-right)
Additionally, Bootstrap 5 introduces new grid gutter classes that can be used to adjust the spacing between columns. The guttter is set on the row instead of each col-* inside the row. For example, use g-0 for no spacing between columns.
Bootstrap 5 column spacing demo
Bootstrap 4 (Update 2018)
Bootstrap 4 has spacing utilities that make adding (or substracting) the space (gutter) between columns easier. Extra CSS isn't necessary.
<div class="row">
<div class="text-center col-md-6">
<div class="mr-2">Widget 1</div>
</div>
<div class="text-center col-md-6">
<div class="ml-2">Widget 2</div>
</div>
</div>
You can adjust margins on the column contents using the margin utils such as ml-0 (margin-left:0), mr-0 (margin-right:0), mx-1 (.25rem left & right margins), etc...
Or, you can adjust padding on the columns (col-*) using the padding utils such as pl-0 (padding-left:0), pr-0 (padding-right:0), px-2 (.50rem left & right padding), etc...
Bootstrap 4 Column Spacing Demo
Notes
- Changing the left/right margin(s) on
col-*will break the grid. - Change the left/right margin(s) on the content of
col-*works. - Change the left/right padding on the
col-*also works.
Bootstrap 4: weird gap between columns
Here is a link to something that's working (the working code follows below). There were several problems with the structure and design. First, you should only ever have one .container per page (generally). From the docs:
While containers can be nested, most layouts do not require a nested container.
Second, you should be more conscious with your use of .rows and .cols. The weird spacing was (mostly) caused by the misalignment of rows and cols.
Finally, the styling you were applying for backgrounds should apply to the .cols themselves and not the components that appear in them. That is because .cols have a buffer (padding) around them. Elements within them cannot touch the edges of the .col (without writing extra rules and going against your style library).
Now, for the working code:
@font-face { font-family: 'mainFont'; src: url('roundedMain.woff2') format('woff2');}
.nav-box { padding: 50px;}
.sidebar { background-image: repeating-linear-gradient(135deg, #F6F7F8, #F6F7F8 5px, #F4F6F6 5px, #F4F6F6 10px); border: 1px solid #F6F7F8;}
.content-body { padding-top: 20px; background: #F8F9FA;}
.nav-vert li { font-size: 13px; font-weight: 400; line-height: 24px; background: #F8F9FA; padding-left: 50px; color: black;}
.nav-title { background: white !important; font-weight: bold !important; color: #228AE6 !important; padding-top: 0 !important; padding-bottom: 0 !important;}
.nav-vert a { color: #4B5259;}
.nav-vert a:hover { color: #72C3FC;}
.nav-title { font-weight: bold; color: #228AE6; padding: 8px; background: white;}
.jumbotron { margin-bottom: 0px !important; background: #228AE6 !important; border-radius: 0 !important; color: #FFF; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); height: 250px;}
body { font-family: 'mainFont', Arial, sans-serif; background: #F1F3F5;}
.bd-callout { padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; border: 1px solid rgb(255, 255, 255); border-left-width: 5rem; background: #E8F7FF; border-radius: .25rem}
.bd-callout h4 { margin-top: 0; margin-bottom: .25rem; font-weight: 600px; line-height: 30px; color: #495057; font-size: 20px;}
.bd-callout p:last-child { margin-bottom: 0}
.bd-callout code { border-radius: .25rem}
.bd-callout+.bd-callout { margin-top: -.25rem}
.bd-callout-info { border-left-color: #72C3FC;}
.bd-callout-info h4 { color: #5bc0de}
.bd-callout-warning { border-left-color: #f0ad4e}
.bd-callout-warning h4 { color: #f0ad4e}
.bd-callout-danger { border-left-color: #d9534f}
.bd-callout-danger h4 { color: #d9534f}<!doctype html><html lang="en">
<head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title>Hello, world!</title> </head>
<body> <div class="container"> <nav class="navbar sticky-top navbar-light bg-light row"> <ul class="nav d-flex flex-column flex-sm-row col">
<li class="nav-item"> <a class="navbar-brand" href="#">Logo</a> </li> <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="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </nav>
<div class="jumbotron row"> <div class="col"> <h1 class="display-4">Mantle</h1> <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> </div> </div>
<div class="row"> <div class="col-3 sidebar"> <div class=" nav-box text-center"> hay </div> <ul class="nav nav-vert flex-column"> <li class="nav-item nav-title"> <div class="nav-link">CATEGORY</div> </li> <li class="nav-item"> <a class="nav-link active" href="#">Menu Item</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Get Started</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> </ul> </div> <div class="col-9 content-body"> <h1>Getting Started</h1> <div class="bd-callout bd-callout-info"> <h4>Primary Callout</h4> This is a primary callout. And some interesting stuff might be occuring here. <p> Due to recent events we have taken</p> </div> </div>
</div> </div>
<!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body>
</html>Related Topics
CSS Flexbox Width 100% Firefox
Show Truncated Text Normally, But Show Full Text on Hover
Hiding Text Using "Text-Indent"
Why There Is -Moz-Xxx and -Webkit-Xxx in The CSS3
How Make: Focus,: Active Be The Same as: Hover
Use Selector Name as Variable in Less Mixin
Svg as a CSS Background - How to Repeat-X with No Space in Between
How to Give Class Name to Animation State in Angular 2/4
How to Remove Disqus Footer from Webpage
Thinking of The 'Zoom' in Responsive Design
Issue: Audit Usage of Navigator.Useragent, Navigator.Appversion, and Navigator.Platform
React Native: "Auto" Width for Text Node
How to Scale an Svg Background-Image Without Honoring Aspect Ratio in Firefox
Opposite of Adjacent Sibling Selector
CSS: #Id .Class Vs .Class Performance. Which Is Better