Adding space between 2 columns in Bootstrap

[toolman]

Hi there,

I have the following two columns using Bootstrap 4, but I cannot work out how to have a 15px gap to the right of the first box on desktop which is then removed when on mobile, nbut at the same time not having space on the left.

This is my code:

	<div class="container">
		<div class="row">
			<a href="#" class="col-lg-6 col-md-12 listing-plan free-listing">
				<h4>Heading</h4>
				<p>Text</p>
				<div class="btn-pink">Link</div>
			</a>
			
			<a href="#" class="col-lg-6 col-md-12 listing-plan premium-listing">
				
				<h4>Heading</h4>
				<p>Text</p>
				<div class="btn-pink">Link</div>
			</a>
		</div>
	</div>

.listing-rates{
display: flex;
	align-items: center;
}
a.listing-plan:hover{
	    box-shadow: 0 0 12px rgba(0,0,0,0.15);
    -moz-box-shadow: 0 0 12px rgba(0,0,0,0.15);
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.15);
    -o-box-shadow: 0 0 12px rgba(0,0,0,0.15);

}

.free-listing{
	background: #fe0b5b;
	padding: 30px;
	border-radius: 3px;
	text-align: center
}

.premium-listing{
	background: #492e77;
	padding: 30px;
	border-radius: 3px;
	text-align: center
}


.free-listing h4, .free-listing p, .premium-listing h4, .premium-listing p{
	color: #fff;
}

.free-listing h4, .premium-listing h4{
	font-size: 32px;
	font-weight: 300;
}

Can anyone suggest a way of doing this. I’m trying to achieve something like this:

Thanks

[PaulOB]

Bootstrap handles its gutters automatically so you really should use the framework in the way that it was intended for best results.

In your example you would need to nest elements inside the column classes and then you get built in gutters that automatically go away for smaller screens.

Here’s a quick codepen to show the technique.

[toolman]

Thank you, that worked fantastically.

I had to add width: 100% to the .listing-plan class to get the boxes full width ,but it worked great, thank you