Mixing
Separating Bootstrap Div's in a grid [duplicate]
This question already has an answer here:
Bootstrap 4 how to have margin between columns without going over space
2 answers
I'm sure I'm missing something obvious but I can't add a right margin to separate these div elements without causing the second to move to a new line.
https://codepen.io/jvern22/pen/GwQpgZ
I have 2 row's with 4 col's in this format;
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
I haven't set the elements to block or inline
I'm missing something.
html css bootstrap-4
asked Nov 21 '18 at 13:52
jvern22jvern22
356
marked as duplicate by Pete css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 '18 at 14:15
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
Bootstrap 4 how to have margin between columns without going over space
2 answers
I'm sure I'm missing something obvious but I can't add a right margin to separate these div elements without causing the second to move to a new line.
https://codepen.io/jvern22/pen/GwQpgZ
I have 2 row's with 4 col's in this format;
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
I haven't set the elements to block or inline
I'm missing something.
html css bootstrap-4
asked Nov 21 '18 at 13:52
jvern22jvern22
356
marked as duplicate by Pete css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 '18 at 14:15
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
Bootstrap 4 how to have margin between columns without going over space
2 answers
I'm sure I'm missing something obvious but I can't add a right margin to separate these div elements without causing the second to move to a new line.
https://codepen.io/jvern22/pen/GwQpgZ
I have 2 row's with 4 col's in this format;
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
I haven't set the elements to block or inline
I'm missing something.
html css bootstrap-4
asked Nov 21 '18 at 13:52
jvern22jvern22
356
This question already has an answer here:
Bootstrap 4 how to have margin between columns without going over space
2 answers
I'm sure I'm missing something obvious but I can't add a right margin to separate these div elements without causing the second to move to a new line.
https://codepen.io/jvern22/pen/GwQpgZ
I have 2 row's with 4 col's in this format;
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
I haven't set the elements to block or inline
I'm missing something.
This question already has an answer here:
Bootstrap 4 how to have margin between columns without going over space
2 answers
html css bootstrap-4
html css bootstrap-4
asked Nov 21 '18 at 13:52
jvern22jvern22
356
asked Nov 21 '18 at 13:52
jvern22jvern22
356
asked Nov 21 '18 at 13:52
jvern22jvern22
356
asked Nov 21 '18 at 13:52
jvern22jvern22
356
asked Nov 21 '18 at 13:52
jvern22jvern22
356
356
marked as duplicate by Pete css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 '18 at 14:15
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Pete css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 '18 at 14:15
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Let's nest your div inside col-lg-6. Something like that
<div class="col-lg-6">
<div class="features-box wow fadeInLeft f-box-icon1 p-5">
<div class="row">
<div class="col-lg-3 features-box-icon">
<i class="fas fa-video"></i>
</div>
<div class="col-lg-9">
<h3>Picture & Video Tours</h3>
<p>
We will visit you with our equipment and create the tour that you want! A photo tour allows your customers to make their own way round your special place, we can add as many notes and information as you want. A video tour can be used to give a guided tour even with your own voiceover.
</p>
</div>
</div>
</div>
</div>
Then add margin to you features-box class. Also what was your point adding background image to before selector? Is it not easier to add this property simpy to f-box-icon class?
In addition, you repeat your code. The code for the before selector is practically the same in 4 places. The difference is only in the backgroun-image.
answered Nov 21 '18 at 14:00
hetioushetious
28916
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Let's nest your div inside col-lg-6. Something like that
<div class="col-lg-6">
<div class="features-box wow fadeInLeft f-box-icon1 p-5">
<div class="row">
<div class="col-lg-3 features-box-icon">
<i class="fas fa-video"></i>
</div>
<div class="col-lg-9">
<h3>Picture & Video Tours</h3>
<p>
We will visit you with our equipment and create the tour that you want! A photo tour allows your customers to make their own way round your special place, we can add as many notes and information as you want. A video tour can be used to give a guided tour even with your own voiceover.
</p>
</div>
</div>
</div>
</div>
Then add margin to you features-box class. Also what was your point adding background image to before selector? Is it not easier to add this property simpy to f-box-icon class?
In addition, you repeat your code. The code for the before selector is practically the same in 4 places. The difference is only in the backgroun-image.
answered Nov 21 '18 at 14:00
hetioushetious
28916
add a comment |
Let's nest your div inside col-lg-6. Something like that
<div class="col-lg-6">
<div class="features-box wow fadeInLeft f-box-icon1 p-5">
<div class="row">
<div class="col-lg-3 features-box-icon">
<i class="fas fa-video"></i>
</div>
<div class="col-lg-9">
<h3>Picture & Video Tours</h3>
<p>
We will visit you with our equipment and create the tour that you want! A photo tour allows your customers to make their own way round your special place, we can add as many notes and information as you want. A video tour can be used to give a guided tour even with your own voiceover.
</p>
</div>
</div>
</div>
</div>
Then add margin to you features-box class. Also what was your point adding background image to before selector? Is it not easier to add this property simpy to f-box-icon class?
In addition, you repeat your code. The code for the before selector is practically the same in 4 places. The difference is only in the backgroun-image.
answered Nov 21 '18 at 14:00
hetioushetious
28916
add a comment |
Let's nest your div inside col-lg-6. Something like that
<div class="col-lg-6">
<div class="features-box wow fadeInLeft f-box-icon1 p-5">
<div class="row">
<div class="col-lg-3 features-box-icon">
<i class="fas fa-video"></i>
</div>
<div class="col-lg-9">
<h3>Picture & Video Tours</h3>
<p>
We will visit you with our equipment and create the tour that you want! A photo tour allows your customers to make their own way round your special place, we can add as many notes and information as you want. A video tour can be used to give a guided tour even with your own voiceover.
</p>
</div>
</div>
</div>
</div>
Then add margin to you features-box class. Also what was your point adding background image to before selector? Is it not easier to add this property simpy to f-box-icon class?
In addition, you repeat your code. The code for the before selector is practically the same in 4 places. The difference is only in the backgroun-image.
answered Nov 21 '18 at 14:00
hetioushetious
28916
Let's nest your div inside col-lg-6. Something like that
<div class="col-lg-6">
<div class="features-box wow fadeInLeft f-box-icon1 p-5">
<div class="row">
<div class="col-lg-3 features-box-icon">
<i class="fas fa-video"></i>
</div>
<div class="col-lg-9">
<h3>Picture & Video Tours</h3>
<p>
We will visit you with our equipment and create the tour that you want! A photo tour allows your customers to make their own way round your special place, we can add as many notes and information as you want. A video tour can be used to give a guided tour even with your own voiceover.
</p>
</div>
</div>
</div>
</div>
Then add margin to you features-box class. Also what was your point adding background image to before selector? Is it not easier to add this property simpy to f-box-icon class?
In addition, you repeat your code. The code for the before selector is practically the same in 4 places. The difference is only in the backgroun-image.
answered Nov 21 '18 at 14:00
hetioushetious
28916
edited Nov 21 '18 at 14:05
answered Nov 21 '18 at 14:00
hetioushetious
28916
answered Nov 21 '18 at 14:00
hetioushetious
28916
answered Nov 21 '18 at 14:00
hetioushetious
28916
28916
add a comment |
add a comment |
