0
<div class="row">
  <div class="col-sm-6">CONTENT</div>
  <div class="col-sm-6">CONTENT</div>
</div>

soo, if I add margin to the first element like margin right : 1px. the next element go below the first element.

how to give space between the element without inflicting the breakpoint. thanks, sorry for bad English

Yovan Gaming
  • 55
  • 1
  • 1
  • 10
  • try adding padding. i don't think bootstrap col classes have any paddings. so it won't break the responsiveness. – Gulam Hussain Jun 29 '21 at 10:41
  • thanks sir for the reply, but if I add padding.. the element still doesn't have space between the other element, it's only give space to the content inside. – Yovan Gaming Jun 29 '21 at 10:59

1 Answers1

0

duplicate of this question.

in summary the best approach for your case is to surround your content with a div that has col-md-12 or to have more control simply use padding instead of margin.

Sol #1:

<div class="row">
  <div class="col-sm-6">
    <div class="col-md-12">
        CONTENT
     </div>
  </div>
  <div class="col-sm-6">
    <div class="col-md-12">
        CONTENT
     </div>
  </div>
</div>

Sol #2:

<div class="row">
  <div class="col-sm-6">
    <div class="p-1">
        CONTENT
     </div>
  </div>
  <div class="col-sm-6">
    <div class="p-2">
        CONTENT
     </div>
  </div>
</div>
Omar Bishtawi
  • 29
  • 4