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

user_13847690 0
Viewed 162

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" 
   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>

bootstrap-4 css html
3 Answers

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

user_95860730

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.

user_113544070

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:

  1. Bootstrap - Flex
  2. Box Model, inc. Margin
  3. Bootstrap - Spacing

<!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">
    <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>

user_171390530
Related