creating desired distance?

Question

1.00/5 (1 vote)

See more:

I have two div of col-md-6 spread over entire width page , I want to create gap between them of desired distance between them please help me how to do that??

HTML

<div class=" col-lg-6  col-md-6 col-sm-12 col-xs-12 Usage">
</div>

<div class=" col-lg-6  col-md-6 col-sm-12 col-xs-12 BillPayment">
</div>

What I have tried is offset, Putting them in a class margin, padding unsuccessfully.

thanks in advance

Posted 27-Jan-16 19:26pm

Member 12139960

Updated 28-Jan-16 3:05am

Richard Deeming

v2

Add a Solution

Comments

Sinisa Hajnal 28-Jan-16 2:42am

Show relevant markup and CSS, margin should do the trick if there is space for the elements and they are not inline. Try setting display: inline-block.

Richard Deeming 28-Jan-16 9:06am

I've fixed your code formatting. Code blocks need to be enclosed in <pre>...</pre> tags, and the tags need to be HTML-encoded - < instead of <, > instead of >, etc.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nathan Minier · Answer 1 · 2016-01-28T01:37:00

Solution 1

Using Bootstrap, you have 12 "units" in the page width. This means that if you have 2 columns of md-6 (which is half the screen width on a display of 992px+), you will never have a gap between them.

If you need the whitespace on a medium+ display, introduce a column between them and change their widths, like so:

HTML

<div class="col-md-5"></div><!--Content Element -->
<div class="col-md-2"></div><!--Spacing Element -->
<div class="col-md-5"></div><!--Content Element -->

With this we still have our 12 column units, but with a responsive gap between.

For more information about the Bootstrap grid system, get it from the horses mouth at:
CSS · Bootstrap[^]

Posted 28-Jan-16 1:37am

Nathan Minier

Comments

Member 12139960 28-Jan-16 8:17am

Thanks for solution
I have tried this but it gives too much space between two div

Nathan Minier 28-Jan-16 8:51am

In that case, you can create a custom css class to handle the spacing div based on the col-md classes but with a different width percentage.

For instance:
col-md-spacer{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
float: left;
width: 10%; /* Tweak this as needed */
}

Bear in mind, your screen is just your screen, and it will look different on user computers, tablets, and phones. The entire point of the Bootstrap grid system is to lend some consistency to design and layout, regardless of screen differences. Using a custom layout class like this breaks that.