I'm trying to add a junction (a line) between 2 divs in the middle.
<div class="row">
<div class="col-xs-6 col-md-6">
<div style="background-color:#f39a6f;width:100%;height:100px;">
....1
</div>
</div>
<div class="col-xs-6 col-md-6">
<div style="background-color:#ffff00;width:100%;height:100px;">
....2
</div>
</div>
Thanks for help.
Hope this code will solve your problem.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row no-gutters">
<div class="col-md-3">
<div class="card bg-success">
<div class="card-body"></div>
</div>
</div>
<div class="col-md-2">
<hr>
</div>
<div class="col-md-3">
<div class="card bg-danger">
<div class="card-body"></div>
</div>
</div>
</div>
My idea is to have the junction (a line) always be the center of a row via absolute/relative positioning, with lower z-index than what those color blocks have so that the line is hidden behind the blocks but shown between the blocks.
The tricky part is accurately calculate the position of the junction line, due to the fact that bootstrap rows have their own paddings. That's why it's better to use SCSS so that you can read bootstrap default values for row and column settings, and calculate the junction line based on those.
But for demo purpose, I will stick with CSS and "hardcode" the pre-configured values from bootstrap.
HTML Structure
<div class="row junction-row">
<div class="col-6 col-sm-3">
<div class="block bg-primary"></div>
</div>
</div class="col-6 col-sm-4 offset-sm-5">
<div class="block bg-danger"></div>
</div>
</div>
CSS
.junction-row {
height: 6rem;
position: relative;
}
.junction-row::after {
content: '';
position: absolute;
background-color: var(--danger);
height: 5%;
// Default bootstrap row's padding is 1rem.
// Width = 100% - left padding of the row - right padding of the row
width: calc(100% - 2rem);
// Top = total height 100% - the height of the line, and then divide by 2
// to have the line stay in the center of the row.
top: calc((100% - 5%) / 2);
// Left = starting after the row's left padding
left: 1rem;
// Any value here, but it needs to be lower than what .block has
z-index: 1;
}
.block {
position: relative;
height: 6rem;
z-index: 2;
}
Result
demo: https://jsfiddle.net/davidliang2008/vknor3cz/32/
I don't believe you can have this and have your column sizes at 6 each. I can think of 2 ways. Make them 5 and use this. This comes from their documentation on the grid system.
https://getbootstrap.com/docs/4.0/layout/grid/
<div class="row justify-content-between">
<div class="col-5">
One of two columns
</div>
<div class="col-5">
One of two columns
</div>
</div>
Or if you don't mind that junction being static width then you could do this. Effectively making the junction width static and each side equal in the remaining width.
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col-auto" style="width:30px"></div>
<div class="col">
2 of 2
</div>
</div>
I am using the following to create a 3 columns layout feel to my website:
<div>
<div class="foo col-md-4">
</div>
<div class="foo col-md-4">
</div>
<div class="foo col-md-4">
</div>
<div class="foo col-md-4">
</div>
</div>
The above works great, and no matter how many foo items I added, it will format it to three columns layout automatically. However, I wanted to add a boxed feeling to each of the foo item, so that it does not look like that they're attached to each other. To achieve this, I added margin to the foo class:
.foo
{
margin: 3px 3px 3px 3px;
}
Adding the above, changes the layout become a two column layout.
My goal is to replicate responsive boxed layout, just like one we find in google plus.
Since the Bootstrap cols already having padding, you could make the content of your columns boxed.. For example, the panel creates a boxed effect.. No additional CSS required:
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here..</div>
</div>
</div>
Demo on Bootply: http://bootply.com/96277
Also, you may be interest in this Bootstrap Google+ project:
http://iatek.github.io/bootstrap-google-plus/
http://jsbin.com/akaQufU/3
Put a div inside the col-* this can be done.
CSS
body {background:#eee}
/* demo */
.container {padding:3%;}
/* put a div inside .foo style for demo */
.foo > div {
background:#fff;
margin-bottom:4px;
padding:2%
}
/* adjust row margins */
.row.foo-row {
margin-left: -2px;
margin-right: -2px;
}
/* adjust padding */
.row.foo-row .col-sm-4,
.row.foo-row .col-md-4,
.row.foo-row .col-lg-4 {
padding-left: 2px;
padding-right: 2px;
}
HTML
<div class="container">
<div class="row foo-row">
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
</div>
</div>
how about adding inset border instead
.foo
{
border-color:transparent;
border:inset 3px;
}
because margin will be calculated as a column extra width
anyway if you want to seperate them without using borders , then just use padding
.foo
{
padding:3px 3px 3px 3px;
}
Your columns should already spaced properly by your code and bootstrap's grid system, you just need need to added a margin to the bottom to stop them touching.
margin-bottom: 3px;
The problem you had with it converting to a 2 column was because you were adding side margin of 3px as well, which throws bootstraps grid system out.
You can't use padding (well) because bootstrap uses it for spacing and that will be more pain than gain.
I have two columns:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
How can I add a space between them?
The output would simply be two columns right next to each other taking up the whole width of the page. Say the width was set to 1000px then each div would be 500px wide.
If I wanted a 100px space between the two how could I achieve this automatically with Bootstrap: the divs sizes would become 450px each to compensate for the spacing.
I was facing the same issue; and the following worked well for me.
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
Some Content..
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
Some Second Content..
</div>
</div>
</div>
This will automatically render some space between the 2 divs.
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
I know I'm late to the party, but you could try spacing the boxes with padding.
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
CSS:
.box {
padding: 0 5px 0 5px;
}
.box .inner {
background-color: #fff;
}
Have a go at it
you can use background-clip and box-model with border proprety
.box{
box-sizing: border-box;
border: 3px solid transparent;
background-clip:padding-box;
}
<div class="row">
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
</div>
I have had similar issues with space between columns. The root problem is that columns in bootstrap 3 and 4 use padding instead of margin. So background colors for two adjacent columns touch each other.
I found a solution that fit our problem and will most likely work for most people trying to space columns and maintain the same gutter widths as the rest of the grid system.
This was the end result we were going for
Having the gap with a drop shadow between columns was problematic. We did not want extra space between columns. We just wanted the gutters to be "transparent" so the background color of the site would appear between two white columns.
this is the markup for the two columns
<div class="row">
<div class="col-sm-7">
<div class="raised-block">
<h3>Facebook</h3>
</div>
</div>
<div class="col-sm-5">
<div class="raised-block">
<h3>Tweets</h3>
</div>
</div>
</div>
CSS
.raised-block {
background-color: #fff;
margin-bottom: 10px;
margin-left: 0;
margin-right: -0.625rem; // for us 0.625rem == 10px
padding-left: 0.625rem;
padding-right: 0.625rem;
}
#media (max-width: 33.9em){ // this is for our mobile layout where columns stack
.raised-block {
margin-left: -0.625rem;
}
}
.row [class^="col-"]:first-child>.raised-block {
// this is so the first column has no margin so it will not be "indented"
margin-left: -0.625rem;
}
This approach does require an inner div with negative margins just like the "row" class bootstrap uses. And this div, we called it "raised-block", must be the direct sibling of a column
This way you still get proper padding inside your columns. I have seen solutions that appear to work by creating space, but unfortunately the columns they create have extra padding on either side of the row so it ends up making the row thinner that the grid layout was designed for. If you look at the image for the desired look, this would mean the two columns together would be smaller than the one larger one on top which breaks the natural structure of the grid.
The major drawback to this approach is that it requires extra markup wrapping the content of each columns. For us this works because only specific columns needed space between them to achieve the desired look.
According to Bootstrap 4 documentation you should give the parent a negative margin mx-n*, and the children a positive padding px-*
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row mx-n5">
<div class="col px-5">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col px-5">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
This will allow a space between the two columns and obviously if you want to change the default width you can go for mixins to modify the default bootstrap width. Or, you can give the width using the inline CSS style.
<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>
You can achieve spacing between columns using the col-xs-* classes,within in a col-xs-* div coded below. 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="container">
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
</div>
Since you're using bootstrap, I guess you want to make the thing responsive. In that case you should'n use fixed sizes, in 'px' for example.
As a workaround to other solutions, I propose make both columns "col-md-5" instead of "col-md-6", and then in the parent element "row" that contains the columns, add the class "justify-content-between", which puts the free space in the middle, as you can check in the bootstrap doc here
This solution is also valid for more than two columns adjusting the "col-md-x" of course
hope it helps ;)
Inside the col-md-?, create another div and put picture in that div, than you can easily add padding like so.
<div class="row">
<div class="col-md-8">
<div class="thumbnail">
<img src="#"/>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="#"/>
</div>
</div>
</div>
<style>
thumbnail{
padding:4px;
}
</style>
Bootstrap 4, file custom.scss you can add following code:
$grid-gutter-width-base: 20px;
$grid-gutter-widths: ( xs: $grid-gutter-width-base,
sm: $grid-gutter-width-base,
md: $grid-gutter-width-base,
lg: $grid-gutter-width-base,
xl: $grid-gutter-width-base
);
by default $grid-gutter-width-base: 30px;
Since you are using Bootstrap, the column-gap property will be useful to implement. W3Schools Column-Gap for Bootstrap has documentation on how this can be used.
CSS:
.col-gap {
column-gap: 2rem;
}
And for the HTML, have the class (col-gap) in the row div.
But also note this may throw off the spacing of the col-md-6 (or other sizes) so to compensate reduce the size for each column.
(i.e. col-md-6 -> col-md-5, even if there are only 2 columns)
HTML:
//Row
<div class="row col-gap justify-content-center">
//Col 1
<div class="col-md-5 ms-3 card p-5">
<p>Div 1</p>
</div>
//Col 2
<div class="col-md-5 ms-3 card p-5">
<p>Div 2</p>
</div>
</div>
bootstrap 5 provides a more comfortable way to add cols gaps using g-* class
<div class="container">
<div class="row g-2">
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
</div>
docs: https://getbootstrap.com/docs/5.0/layout/gutters/
Bootstrap 4 - Separate columns using nested rows.
<div class="container">
<div class="row bg-info p-3">
<!-- left column -->
<div class="col-8 ">
<div class="col-12 bg-light p-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
</div>
</div>
<!-- right column -->
<div class="col-4 ">
<div class="col-12 bg-light p-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
</div>
</div>
</div>
</div>
I had to figure out how to do this for 3 columns. I wanted to round the corners of the divs and couldn't get the spacing to work. I used margins. In my case I figured for 90% of the screen to be filled in by the divs and 10% for margins:
html:
<div class="row">
<div id="orange" class="col-md-4">
<h1>Orange Div</h1>
</div>
<div id="green" class="col-md-4">
<h1>Green Div</h1>
</div>
<div id="aqua" class="col-md-4">
<h1>Aqua Div</h1>
</div>
</div>
and CSS:
#orange {
background-color:orange;
border-radius: 30px;
padding: 20px;
margin: 2.5% 2.5% 0 2.5%;
width:30%;
}
#green {
background-color:green;
border-radius: 30px;
padding: 20px;
margin: 2.5% 0 0 0;
width:30%;
}
#aqua {
background-color:#39F;
border-radius: 30px;
padding: 20px;
margin: 2.5% 2.5% 0 2.5%;
width: 30%;
}
To make it resize correctly for mobile devices, I had the CSS change the width from 30% to width:92.5%; under #media (max-width:1023px)
it's simple .. you have to add solid border right, left to col-*
and it should be work ..:)
it looks like this : http://i.stack.imgur.com/CF5ZV.png
HTML :
<div class="row">
<div class="col-sm-3" id="services_block">
</div>
<div class="col-sm-3" id="services_block">
</div>
<div class="col-sm-3" id="services_block">
</div>
<div class="col-sm-3" id="services_block">
</div>
</div>
CSS :
div#services_block {
height: 355px;
background-color: #33363a;
border-left:3px solid white;
border-right:3px solid white;
}
Just white border around wrap element
.padding-pls{
border-left: 13px solid white;
border-right: 13px solid white;
}
.row .col-md-6:first-child>.padding-pls {
border-left: 0px solid white;
}
.row .col-md-6:last-child>.padding-pls {
border-right: 0px solid white;
}
and first+last child no border
<div class="row">
<div class="col-md-6">
<div class="col-md-12 padding-pls">
Keci
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 padding-pls">
Keci
</div>
</div>
</div>
Use bootstrap's .form-group class. Like this in your case:
<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>
I know this post is a little dated but I ran in to this same problem. Example of my html.
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<label asp-for="FirstName" class="control-label"></label>
<input asp-for="FirstName" class="form-control" />
<span asp-validation-for="FirstName" class="text-danger"></span>
</div>
</div>
<div class="col-xs-3">
<div class="form-group">
<label asp-for="LastName" class="control-label"></label>
<input asp-for="LastName" class="form-control" />
<span asp-validation-for="LastName" class="text-danger"></span>
</div>
</div>
</div>
In order to create space between the groups I overrode bootstrap's margin of -15px in my site.css file by reducing the negative margin by 5.
Here's what I did...
.form-group {
margin-right: -10px;
}
I hope this helps somebody else.
I needed one column on mobile and two columns from tablet portrait up, with equal spacing between them in the middle (also without any grid-added padding inside columns). Could be achieved using spacing utilities and omitting the number in col-md:
<div class="container-fluid px-0">
<div class="row no-gutters">
<div class="col-sm-12 col-md mr-md-3" style="background-color: orange">
<p><strong>Column 1</strong></p>
</div>
<div class="col-sm-12 col-md ml-md-3" style="background-color: orange">
<p><strong>Column 1</strong></p>
</div>
</div>
</div>
Bootstrap col slightly uses some spaces both to the left and right. I have just added a block element like div and set the border for the differences. Also, adding some extra padding or margin in that extra div will work perfectly..
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<br><br>
<div class="container">
<div class="row">
<div class="col-6 ">
<div class="border border-danger ">
<h2 class="text-center">1</h2>
</div>
</div>
<div class="col-6">
<div class="border border-warning">
<h2 class="text-center">2</h2>
</div>
</div>
</div>
</div>
I don't think you can do this with Bootstrap alone. The space between columns is automatically added/maintained.
If you need to add a specific width between columns you can do this trick to simulate the space: https://jsfiddle.net/loginet/3rogbh9s/5/
<div class="row">
<div class="col-6">
<div class="left-column">Left column</div>
</div>
<div class="col-6">
<div class="right-column">Right column</div>
</div>
</div>
and CSS
.left-column {
padding: 10px;
padding-right: 50px;
background: white;
}
.right-column {
padding: 10px;
padding-left: 50px;
background: white;
}
How about just adding a border the same color as the background using css? I'm new to this, so maybe there's a good reason not to, but it looked good when I tried it.
To obtain a particular width of spacing between columns, we have to set up padding in the standard Bootstrap's layout.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
/* Check breakpoint at http://getbootstrap.com/css/#grid-media-queries */
#media (min-width: 992px) {
.space-100-px > .row > .col-md-6:first-child {
padding: 0 50px 0 0; /* The first half of 100px */
}
.space-100-px > .row > .col-md-6:last-child {
padding: 0 0 0 50px; /* The second half of 100px */
}
}
/* The result will be easier to see. */
.space-100-px img {
width: 100%;
height: auto;
}
<div class="container-fluid space-100-px">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/450x100?text=Left" alt="Left">
</div>
<div class="col-md-6">
<img src="http://placehold.it/450x100?text=Right" alt="Right">
</div>
</div>
</div>
This will be useful..
.list-item{
margin-right:-10px;
margin-top:10px;
margin-bottom: 10px;
border: 1px solid #eee;
padding: 0px;
}
<div class="col-md-4">
<div class="list-item">
<h2>Your name</h2>
</div>
</div>
<div class="col-md-4">
<div class="list-item"></div>
</div>
If use want to increase or decrease further margin in right side of the box then simply edit margin-right property of list-item.
sample output
<div class="col-md-12 no_padding header_row"></div>
<div class="second_row">
<div class="col-md-4 box_shadow"></div>
<div class="col-md-8 no_padding_right">
<div class="col-md-12 box_shadow"></div>
</div>
</div>
body{
background:#F0F0F0;
}
.main_holder{
min-height: 600px;
margin-top: 40px;
height: 600px;
}
.box_shadow{
box-shadow: 0 1px 2px rgba(0,0,0,.1);
background: white;
height: auto;
min-height: 500px;
}
.no_padding{
padding: 0px !important;
}
.no_padding_right{
padding-right: 0px !important;
}
.header_row{
height: 60px;
background: #00796B;
-webkit-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
-moz-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
}
.second_row{
position: relative;
width: 100% !important;
top: 20px;
}
<div class="col-md-6">
<div class="inner">
<!-- Put the col-6 elements in the inner div -->
</div>
</div>
This by default provides some padding inside the outer div the way you seem to need. Moreover you can also modify the padding using custom CSS.
Simple Way
.row div{
padding-left: 8px;
padding-right: 8px;
}
Bootstrap 4
Documentation says (here):
Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
So the right answer is: set cols' padding-left/right equal to minus your row's margin-left/right. That simple.
#my-row {
margin-left: -80px;
margin-right: -80px;
}
#my-col {
padding-left: 80px;
padding-right: 80px;
}
Demo: https://codepen.io/frouo/pen/OqGaWN
Create a class and use:
margin: 1.5em .5em;
max-width: calc(50% - 1em)!important;
Where 1em on the max-width is equal to the left/right margin added together.