Reducing the Distance Between Columns in Bootstrap 4

I am currently working on embedding two websites onto my own website. The idea is to showcase these websites side by side within a custom-sized iframe that adjusts responsively based on the viewport size. To achieve this, I am utilizing Bootstrap 4's column and row capabilities. However, I am facing an issue with the spacing between the columns being too excessive: https://i.sstatic.net/Evr5g.png

It's worth noting that this question has been asked before, and I have explored Forum A and Forum B, but unfortunately, neither of them provided a satisfactory solution to my problem.

Here is the code snippet:

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

htmlcssbootstrap-4

Answer №1

To remove the spacing between columns, simply utilize the .no-gutters class within your row element like this:

<div class="row no-gutters">

Answer №2

If you're facing an issue with a large gap between columns, it may be due to the padding and margin settings in the .card and .card-body classes. By setting margins and paddings to 0, you can control the gap between columns more effectively. Here's an example of how you can adjust these settings:

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

An alternative solution is to customize the Bootstrap source code by adjusting the padding and margins of columns directly. This method may require more time but could result in a cleaner solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exclusive JQuery Mobile Styles

Although I enjoy using JQuery Mobile, I'm facing compatibility issues with my custom Javascript on the page. Despite everything functioning correctly without JQuery Mobile, adding the library causes problems that I've been unable to resolve. Ess ...

jqueryjquery-uicssjquery-mobile

Equal spacing title in horizontal menu with Bootstrap design

Is there a way to evenly distribute menu links with varying text lengths in equal width bootstrap columns? Adjusting the column class between col-md-1 and col-md-3 doesn't seem to give accurate spacing. If you want to see, I've set up a fiddle h ...

csstwitter-bootstrap

In Bootstrap 4.4.1, there is a known issue where HTML may not be rendered properly after a certain section

There seems to be an issue with the placement of my buttons section in the markup. It does not appear after the DIV containing the select tag, but it does when placed before it. I have tried moving the buttons section around to troubleshoot, and it does s ...

htmlcssbootstrap-4

What are the proper steps to ensure images are displayed correctly on mobile devices?

https://i.sstatic.net/M68Ob.jpg https://i.sstatic.net/fPKXr.jpg Our background image is 1920x1080p and looks great on desktop browsers, but it's not displaying properly on mobile devices in either portrait or landscape mode. Is there a way to resolv ...

htmlcssresponsive-design

What is the best way to customize the color scheme of a Bootstrap 4 range slider?

https://i.sstatic.net/MBona.png Looking for suggestions on how to customize the colors of ranges in Bootstrap 4 and change the blue thumb color to 'gray'. Below is the example HTML input code: <p id="slider" class="range-field"> <in ...

cssbootstrap-4

When utilizing the `express.static(__dirname)` function in Node.js with Express, the visitor may be directed to an incorrect HTML page

My website consists of a login page named login.html and an index page named index.html. I want to implement authentication so that only logged in users can access the index page. I have not set up the post method on the login HTML page. Therefore, I have ...

javascripthtmlnode.jsexpress

Tips for verifying that one of the two input fields is filled in Bootstrap 5 validation

I have implemented Bootstrap validation for the other input fields in this form by using the 'required' attribute. However, for these two specific fields, if at least one is not empty, then the form should be submitted. <form class="needs ...

javascripthtmlvalidationbootstrap-5

What is the best way to ensure that the viewBox of an SVG perfectly matches the size of the image it overlays?

I am looking to create a simple GUI using the Python NiceGUI Library. In my design, I have divided the interface into two columns using the grid element, with cards containing checkboxes on the left for overlays. On the right side, I have inserted an imag ...

pythonhtmlcssviewboxnicegui

"Blank Canvas: Exploring the Void in Laravel Blade Templates

This is the route that I am using Route::get('login', function(){ return View::make('admins.login'); }); In this code, I have created a admins/login.blade.php file to handle the login view. <!doctype html> <html> < ...

phphtmllaravellaravel-4laravel-blade

How to make text transition between colors using CSS or jQuery

I'm looking to make a text blink with alternating colors: For instance: blinking a text with white, green, white, green, white, green I am open to either using jQuery or CSS. ...

jquerycssblink

Using jQuery to send an image to web service

I'm currently working on a project for a Blackberry OS 5 + application and I have a requirement to send data along with an image. For the development of this application, I am utilizing HTML5, jQuery, and Webworks SDK. The form structure looks like ...

jqueryhtmlblackberry-webworksmultipartform-data

exciting, showcasing a dependency map using svg within an html5 environment

I am working on creating a polygon background for my menu, which needs to be responsive in design. Here is an example of what I am trying to achieve: example image. Should I use JavaScript to listen for size changes and adjust the points for the polygon e ...

javascriptcsshtmlsvgtwitter-bootstrap-3

Exploring Angular 7: Understanding the HTML5 Fullscreen API and Overcoming Errors

I am currently using Angular 7 and I am trying to implement a fullscreen button in my app. I have utilized the HTML5 Fullscreen API and created two functions for this purpose: openfullscreen() { // Trigger fullscreen console.log('gg'); ...

angularhtmltypescriptangular-clifullscreen

Interact with the horizontal click and drag scroller to navigate through various sections effortlessly, each designed to assist you

Currently, I am facing an issue with my horizontal scrolling feature in JavaScript. It works perfectly for one specific section that has a particular classname, but it fails to replicate the same effects for other sections that share the same classname. ...

javascripthtmljquerywordpresshorizontal-scrolling

Showcasing the most recent three Wordpress blog posts in a Bootstrap4 carousel

I'm currently working on a Bootstrap4 carousel that should display the featured image, title, and the beginning of the 3 latest blog posts. Although the desired content is showing up in the carousel, it seems to be stuck on the first post without auto ...

wordpressbootstrap-4

Angular Oops! We ran into a small hiccup: [$injector:modulerr]

I am facing an issue with an angular js error angular.js:36 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.19/$injector/modulerr?p0=app&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.19%2Fangular.min.js%3A18%3A139) ...

javascripthtmlangularjswordpress

Sometimes, JQuery struggles to set input values accurately

Exploring the single page app sample provided here, I have encountered some anomalies when attempting to manipulate input controls with JQuery under certain conditions. Below is the consistent HTML structure followed by the JavaScript snippets in question. ...

javascriptjqueryhtmlbootstrap-4single-page-application

Performing a series of SQL queries in order to fill out the contents of

I am currently working on populating a summary table from a MySQL database, which consists of multiple rows and cells. Here is the image of my table: https://i.sstatic.net/8anPa.jpg I initially thought about writing individual SQL queries for each cell, b ...

phphtmlmysqlhtml-table

Identifying the HTML elements beneath the mouse pointer

Does anyone know the method to retrieve the HTML tag located directly under the mouse cursor on a webpage? I am currently developing a new WYSIWYG editor and would like to incorporate genuine drag and drop functionalities (rather than the common insert at ...

javascripthtml

Exploring ways to adjust font and table dimensions with the use of <style type="text/css"> in rmarkdown

Could someone assist me in adjusting table cell sizes on rmakrdown? I attempted to add the following code, but it did not have any effect on the tables within the document: <style type="text/css"> } td { /* Table */ font-size: 12px; border-c ...

csshtml-tabler-markdown