Decreasing Column spacing - Bootstrap 4

Question

I am trying to embed two websites onto my website. My goal is to display these websites next to one another in a custom sized iframe while being responsive to the view port size. I am utilizing Bootstrap 4's column and row functions to try and accomplish this. However, the spacing between the columns is too large:

Note this is a previously asked question and I have looked at the Seen Forum A and SeenForumB however neither have been any good at solving my problem.

code:

<div class="col-auto mb-3">
  <div class="card" style="border: none;">
    <div class="card-body">
      <div class="card container-fluid justify-content-center" style="margin-top: 80px; min-width: 44vw; border: 0;">
        <div class="card-header" style="background-color: #3c525d; color: white; width: 100%;">
          <b>EXAMPLE WEBSITE
                        <span style="float: right; font-size: 20px;">
                            <a style="color: white;" href="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
                                <i class="fas fa-expand"></i>
                            </a>
                        </span>
                    </b>
        </div>
        <div class="card-body" style="padding: 0;">
          <iframe src="https://getbootstrap.com/docs/4.0/getting-started/introduction/" style="width: 100%; height: 600px; border: none;"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>
```

score 1 · Answer 1 · answered Jul 14 '20 at 10:17

1

You can use the .no-gutters class to knock off the spacing between the columns. I'd do it on the same line as your row so basically :

<div class="row no-gutters">

answered Jul 14 '20 at 10:17

ilovethedrama

43
8

score 0 · Accepted Answer · answered Jul 14 '20 at 03:08

In your case - the key element is padding and margin added to .card and .card-body classes. Have a look below what happens if you override margins and paddings to 0. The big gap disappears and you can control it by adding your own paddings and margins according to how big the gap between columns you want to create. Code below:

<div class="container">
<div class="row">

    <div class="col-6 m-0 p-0">
    <div class="card m-0 p-0" style="border: none;">
        <div class="card-body m-0 p-0">
            <div class="card container-fluid justify-content-center" style="margin-top: 80px; min-width: 44vw; border: 0;">
                <div class="card-header" style="background-color: #3c525d; color: white; width: 100%;">
                    <b>EXAMPLE WEBSITE
                        <span style="float: right; font-size: 20px;">
                            <a style="color: white;" href="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
                                <i class="fas fa-expand"></i>
                            </a>
                        </span>
                    </b>
                </div>
                <div class="card-body" style="padding: 0;">
                    <iframe src="https://getbootstrap.com/docs/4.0/getting-started/introduction/" style="width: 100%; height: 600px; border: none;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-6 m-0 p-0">
    <div class="card p-0 m-0" style="border: none;">
        <div class="card-body p-0 m-0">
            <div class="card container-fluid justify-content-center" style="margin-top: 80px; min-width: 44vw; border: 0;">
                <div class="card-header" style="background-color: #3c525d; color: white; width: 100%;">
                    <b>EXAMPLE WEBSITE
                        <span style="float: right; font-size: 20px;">
                            <a style="color: white;" href="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
                                <i class="fas fa-expand"></i>
                            </a>
                        </span>
                    </b>
                </div>
                <div class="card-body" style="padding: 0;">
                    <iframe src="https://getbootstrap.com/docs/4.0/getting-started/introduction/" style="width: 100%; height: 600px; border: none;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>


</div>
</div>

Another possibility is to recompile bootstrap from scss and override padding's and margin's of columns at the source. That would probably be a cleaner solution but a bit more time consuming.

Decreasing Column spacing - Bootstrap 4

2 Answers2