How to give column gap on desktop and mobile devices using bootstrap 4 only?

I need to give a gap of 15px between two rows and two columns. I don’t know how to give the gaps on desktop and mobile devices using bootstrap only. There is something to do with margins but don’t know the ideal way to do it.

For the 2nd row, I have two columns that will be displayed side by side on greater than tablet devices and it will display one below the other on mobile devices.
I am getting difficulty in setting the gaps in the mobile devices only.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Gap</title>
  <link 
   rel="stylesheet"         
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 
   integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin="anonymous" />
</head>

<body>
  <div class="container mt-5">
    <div class="row">
      <div class="col-12 p-3" style="
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
      ">
        B
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12 col-sm-6 p-3" style="
        color: #004085;
        background-color: #cce5ff;
        border: 1px solid #b8daff;
      ">
        A
      </div>
      <div class="col-xs-12 col-sm-6 p-3" style="
        color: #004085;
        background-color: #cce5ff;
        border: 1px solid #b8daff;
      ">
        C
      </div>
    </div>
  </div>
</body>

</html>

Contents hide

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

What you need can be achieved very easily with a slight modification in B4. In that version, adding any margin to the columns breaks the layout completely. The workaround is to not add a margin to it, but an inner enclosing div. Which works the same. Your code thereby becomes:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Gap</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
    </head>
    <body>
        <div class="container mt-5">
            <div class="row mb-3">
                <div class="col-12 p-3" style="background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;">
                    B
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 px-0">
                    <div class="inner p-3 mb-3 mb-sm-0 mr-sm-3" style="color: #004085; background-color: #cce5ff; border: 1px solid #b8daff;">
                        A
                    </div>
                </div>
                <div class="col-sm-6 px-0">
                    <div class="inner p-3" style="color: #004085; background-color: #cce5ff; border: 1px solid #b8daff;">
                        C
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

JSFiddle

The same can be done very easily using g-* classes on the row in B5.

Edit: You should also keep in mind that *-3 in Bootstrap is by default 16px. There is nothing (by default) here which will give you 15px. You’ll need to add a custom class, OR if you’re using SASS, you can add another value like 15 (with value 15px) to the margin utility in Bootstrap, which will give you something like mb-15 that will be equivalent to margin-bottom: 15px;. Utilities API

Method 2

To make the gap appear on the mobile devices use mb-4 mr-4, and if you want to hide the gaps on larger screens use mb-md-0 mr-md-0or any other breakpoint you want.

Method 3

I don’t know if this is an effective way. Basically, I just add margin-bottom to container B and add margin-top to container A & C. Then, I use flex for the two columns. Instead of using margin, I use an empty container for the gap. The disadvantage is it’s not exactly `15px.

References:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Gap</title>
  <link 
   rel="stylesheet"         
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 
   integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin="anonymous" />
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12 p-3 mb-4" style="
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
      ">
        B
      </div>
    </div>

    <div class="row d-flex justify-content-sm-between mt-2">
      <div class="col-xs-12 col-sm p-3" style="
        color: #004085;
        background-color: #cce5ff;
        border: 1px solid #b8daff;
      ">
        A
      </div>

      <div class="col-sm-1 p-3">
      </div>

      <div class="col-xs-12 col-sm p-3" style="
        color: #004085;
        background-color: #cce5ff;
        border: 1px solid #b8daff;
      ">
        C
      </div>
    </div>
  </div>
</body>

</html>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating