How to set margin between two rows in bootstrap?-CodePudding

How to set space between two rows in bootstrap, if we using row class for every row, it is very easy to set margin or padding. But while set all the column under one row class, not able to set the margin. Kindly check the following code.

<div class="row">
 <div class="col-sm-4 col-md-3"> Div 1</div>
 <div class="col-sm-4 col-md-3"> Div 2</div>
 <div class="col-sm-4 col-md-3"> Div 3</div>
 <div class="col-sm-4 col-md-3"> Div 4</div>
 <div class="col-sm-4 col-md-3"> Div 5</div>
 <div class="col-sm-4 col-md-3"> Div 6</div>
 <div class="col-sm-4 col-md-3"> Div 7</div>
 <div class="col-sm-4 col-md-3"> Div 8</div>
 <div class="col-sm-4 col-md-3"> Div 9</div>
 <div class="col-sm-4 col-md-3"> Div 10</div>
</div>

In the above code how can I set margin for every row?

I can set margin, if the code is in the below format but it won't give responsive grid. Also the col-md-* and col-sm-* class is waste, we can only use col-* class.

<div class="row">
     <div class="col-sm-4 col-md-3"> Div 1</div>
     <div class="col-sm-4 col-md-3"> Div 2</div>
     <div class="col-sm-4 col-md-3"> Div 3</div>
     <div class="col-sm-4 col-md-3"> Div 4</div>
</div>

<div class="row">
     <div class="col-sm-4 col-md-3"> Div 5</div>
     <div class="col-sm-4 col-md-3"> Div 6</div>
     <div class="col-sm-4 col-md-3"> Div 7</div>
     <div class="col-sm-4 col-md-3"> Div 8</div>
</div>

<div class="row">
     <div class="col-sm-4 col-md-3"> Div 9</div>
     <div class="col-sm-4 col-md-3"> Div 10</div>
</div>

CodePudding user response：

Have you tried using the row-gap: 10px; syntax in your CSS file? It would go in the .row class. This should set a "margin" between every row in the div.

CodePudding user response：

This is exactly what vertical Gutters are for...

  <div class="row gy-5">
        <div class="col-sm-4 col-md-3"> Div 1</div>
        <div class="col-sm-4 col-md-3"> Div 2</div>
        <div class="col-sm-4 col-md-3"> Div 3</div>
        <div class="col-sm-4 col-md-3"> Div 4</div>
        <div class="col-sm-4 col-md-3"> Div 5</div>
        <div class="col-sm-4 col-md-3"> Div 6</div>
        <div class="col-sm-4 col-md-3"> Div 7</div>
        <div class="col-sm-4 col-md-3"> Div 8</div>
        <div class="col-sm-4 col-md-3"> Div 9</div>
        <div class="col-sm-4 col-md-3"> Div 10</div>
  </div>

https://codeply.com/p/g7ewLO9nbJ

Gutters gy-* are used to increase or decrease vertical spacing between columns.

CodePudding user response：

Paste this in your css file..

.col-sm-4{
margin:10px;
}