How to give margins within two col-sm-6 grid boxes?

Question

<div class="container">
  <section class="eachmenu col-md-12 col-sm-6 col-xs-12">    
    <h3 id="chicken">Chicken</h3>
    ...
  </section>
  <section class="eachmenu col-md-12 col-sm-6 col-xs-12">    
    <h3 id="beef">Beef</h3>
    ...
  </section>

I want to give some margins between two boxes which are located in col-sm-6 each.

I want some margins between them.

I also want the length of two boxes matches well with the last col-sm-12 box.

two boxes of col-sm-6 and one box of col-sm-16

How I can do this? If i give margins like this,

    @media (min-width: 768px) and (max-width: 991px) {
  section {
    margin-right: 2%;
  }
}

then the second box goes down..

Giving some margins leads to breaking columns.

Thanks for your support, I solved it!

<div class="container">
    <h2>Our Menu</h2>
    <br><br>
    <div class="col-md-12 col-sm-6 col-xs-12">
      <div class="eachmenu">
        <h3>Chicken</h3>
        ...
      </div>
    </div>
    <div class="col-md-12 col-sm-6 col-xs-12">
      <div class="eachmenu">
        <h3>Beef</h3>
         ...
      </div>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="eachmenu">
        <h3>Sushi</h3>
           ...
      </div>
    </div>
</div> <!-- container-->

also changed with css file..

.eachmenu {
  position: relative;
  height: auto;
  background-color: rgb(47, 218, 146);
  float: left;
  border: 1px solid black;
  margin-bottom: 20px;
  padding-left: 2%;
  padding-right: 2%;
}

/* START SM */
@media (min-width: 768px) and (max-width: 991px) {
  .eachmenu {
    margin-right: 2%; => I erased it (it didn't match when 6-6-12 }
}
/* End SM */

and...

(Edited) (Erased margin-right:2% in media query => matches well now)

Does this answer your question? [Create a user-defined gap between two Bootstrap columns](https://stackoverflow.com/questions/18806251/create-a-user-defined-gap-between-two-bootstrap-columns) — Andris Jefimovs, Jan 25 '21 at 19:34

Riccardo Bertolini · Accepted Answer · 2021-01-25T20:14:04.760

1

Using style on section is quite dangerous since it will affect any section of your code. Better attribute a class and put it where you need. Also, there's a @media attribute quite specific, which it's working only on width between 768 and 991px.

EDIT

I saw from the screenshot what you're aiming is to set a border, or maybe a color around that section. Usually you first set up the grid, or skeleton of your website, then inside you can play around. This is because otherwise you will fight forever with spacing.

  .right-space {
      margin-right: 2%;
  }

and

  <section class="eachmenu col-md-12 col-sm-6 col-xs-12">   
   <div class="right-space">My content</div>

So as you can see, the section will define in which space we can move, then my div inside it will contain the border, the decoration and the content so it will adjust accordingly the bigger container.

edited Jan 25 '21 at 20:14

answered Jan 25 '21 at 19:41

Riccardo Bertolini

166
5

Thank you for your answer! I changed section tag to div tag. It works if I use col-sm-5 and col-sm-5.(col-sm-6 and col-sm-6 doesn't works well..) but I still wonder other way because two boxes and under-box doesn't match well.. – user13897665 Jan 25 '21 at 20:07
I've updated my answer, try to give a look and let me know ;) – Riccardo Bertolini Jan 25 '21 at 20:14
Oh I changed it by reading your support!

and added 'margin-right' in eachmenu!
– user13897665 Jan 25 '21 at 20:54
Great happy to help! If it solved your problem marked it as solved, so it will help other people as well :) – Riccardo Bertolini Jan 25 '21 at 20:57

G-Cyrillus · Answer 2 · 2021-01-25T20:20:32.223

You may use the col- class without a number but the breakpoint (.col-sm , .col-md , .col-lg , .col-xl ) and also the m(for margins) class with the breakpoint as well and the value you need. both your column are of the same size, built-in class should do without custom CSS (see equal column ).

possible example:

section {
  background: gray;/* see us */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <section class="eachmenu col-md-12  my-2 col-sm   mr-sm-2 col-xs  mr-xs-2">
      <h3 id="chicken">Chicken</h3>
      ...
    </section>
    <section class="eachmenu col-md-12 col-sm  my-2 mx-md-0 ml-sm-2 col-xs  ml-xs-2">
      <h3 id="beef">Beef</h3>
      ...
    </section>
    <section class="eachmenu col-12 my-2 ">
      <h3 id="duck">Duck</h3>
      <p class="bg-info text-white p-1"> run in full page mode , then resize the window.</p>
    </section>
  </div>
</div>

How to give margins within two col-sm-6 grid boxes?

2 Answers2