1

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>
Merbin Joe
  • 611
  • 6
  • 27
  • row should have 12 columns ... add classes to rows and You can always add maring: 0px 0px 5px 0px !important for every row – Wordica Sep 28 '21 at 16:24

3 Answers3

2

In each div class, add m-1 or m-2 as per your requirement to add margin from all sides. Use mt-1 or mt-2 to add only top margin and mb-1 or mb-2 for the bottom margin. See this documentation for more examples.

Ojas Mahajan
  • 42
  • 3
1

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.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
0

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.

ItsDr4g0n
  • 46
  • 1