Tips for eliminating the gap between Bootstrap 4 columns

Is there a way to eliminate the spacing between Bootstrap columns? I have three columns set up using Bootstrap but no matter what I do, I can't seem to get rid of the space between them.

<!doctype html>
 <html lang="en>
  <head>
  <!-- Required meta tags -->
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
   <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
        <!--jquery easing plugin-->
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 <!--custom css---->
     <link href="phcoding.css" type="text/css" rel="stylesheet">
          <title>delinahproducts</title>
  <style>
.col-md-3
{
margin:auto!important;
padding:0 !important;
}
  </style>
           </head>
            <body>
<div class="container">
               <div class="row">
                <div class="col-md-3">
<div class="card">
                lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</div>
<div class="col-md-3">
<div class="card">
                lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</div>
<div class="col-md-3">
<div class="card">
                lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</div>

javascripthtmlcssbootstrap-4

Answer №1

If you're working with Bootstrap's grid system, remember that it's divided into 12 columns. To adjust the layout, switch from col-md-3 to col-md-4. If you want to eliminate spacing between columns, you can include no-gutters in your row class like so:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<!--jquery easing plugin-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--custom css---->

<div class="container">
  <div class="row no-gutters">
    <div class="col-md-4">
      <div class="card">
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      </div>
    </div>
  </div>
</div>

Answer №2

Is auto margin necessary? Here is an alternative approach:

.col-md-3 {
margin:0!important;
padding:0!important;
}

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

NEXT JS - Application renders twice due to rewrites in place

I'm currently working on a NEXT JS project and facing the issue of the app rendering twice! Challenge After implementing rewrites in next.config.js, the app is being rendered twice. Removing the rewrites solves the issue and only renders once. next ...

javascriptreactjsnext.js

Incorporate HTML into server forms while dynamically appending form elements in ASP.NET

I have a database table that stores custom fields for specific forms. While I am able to dynamically build these forms from the code behind, the layout is not visually appealing. I am looking for a way to neatly wrap the form in a table. Below is the code ...

htmlasp.netforms

Alter the responseType within Angular (5) once the response has been received

Is it possible to dynamically change the response type in the post method (angular 5) after receiving the response? The challenge: I need the response type to be blob when the response is successful, and json when there's an error. I've searc ...

javascriptjsonangularblobresponse

sending the AJAX request from back to the original JavaScript function

Here presents an issue. I am dealing with an HTML Form that contains a submit button with an onclick=validationFunction(). When this button is clicked, the form values are passed to the mentioned function. Within this function, the form values undergo va ...

phpjavascriptajax

Is it possible to modify the content of an element with a click event in Angular/HTML?

How can I implement a feature in my mat-accordion using mat-expansion-panels where the text becomes underlined when the panels are clicked? I want the title to be underlined when the panels are open and for the underline to disappear when they are closed ...

htmlangulartypescriptangular-material

Designing a unique pagination layout for your WordPress website

Currently, I am working on a WordPress project. I have created my own template using CSS and HTML format. The implementation is going well, but I am facing difficulty integrating WP pagination design into my template. Below is the pagination code from my ...

phphtmlcsswordpress

Showcasing all information from the JSON response within an HTML format

Below is a sample JSON response that I need to showcase as search results in an HTML format. I am considering using a forEach loop, but I am struggling to fully grasp how it will function. Refer to the example provided. "data": [{ "CountryISO2": "US ...

javascript

Advancing past the stage of developing basic functions in the document.ready() event handler

When I develop a website, I have a personal preference of creating a main JavaScript file with window.load and window.ready functions at the top. I find it easier to refactor any logic into separate functions within these functions for better readability. ...

javascriptjqueryrefactoringdocument-ready

Exploring the world of Django and JSON POSTs in the realm of Google API mania

Project Overview I am currently developing an application aimed at assisting users in finding rides. My tech stack includes Django, Python 2.7, and integration with Google Maps and Directions APIs. Within a specific view, I present a map where users can ...

javascriptdjangojsonpostgoogle-directions-api

Having trouble scrolling to the top in Flickr Search using AngularJS, the results are restricting my movement

I recently followed a tutorial on creating a Flickr Search App with AngularJS (https://www.youtube.com/watch?v=lvGAgul5QT4). I managed to show the search results on my page, but encountered an issue: I couldn't scroll all the way back up to the search ...

javascripthtmlcssangularjsflickr

Is it possible to manually trigger a version change transaction in IndexedDB?

I have been working on a Chrome extension that uses the IndexedDB to store data client-side in an IDBObjectStore within an IDBDatabase. The data structure requires users to be able to modify the object store freely, such as adding new objects or modifying ...

javascripthtmlgoogle-chrome-extensiondom-eventsindexeddb

Can I modify individual properties of xAxis.labels in HighCharts?

I am seeking to customize the properties of my labels on the x-axis in a unique way (View my query here). I have a clear understanding of how to achieve this for dataLabels: See API reference. This process is akin to what has been explained here. Howeve ...

javascriptjqueryhighcharts

Can you tell me the standard CSS easing curves?

When working with css, we have the option to incorporate easing for transitions, like this: transition: all .5s ease-in-out CSS provides predefined easings such as ease, ease-in, ease-out, and ease-in-out. We can also create a customized easing using a ...

csseasing

Postpone the inclusion of html files within ng-include in AngularJS

I need to optimize the startup performance of my app by delaying the loading of a series of HTML files that are being included into my main controller. These files are not needed for at least 4 seconds while one specific HTML file processes. How can I de ...

javascripthtmlangularjsangularjs-ng-include

Snapping a photo from the webcam for your profile picture

Is there a way to capture images using a webcam and upload them to a server in a PHP & Mysql application? I've been searching on Google but only find outdated code that is not supported in all browsers. Here are some links you can check out for more ...

javascriptphphtmlwebcam

Ajax is coming back with a value that is not defined

Currently, I am working on a search function that is responsible for searching a name from the database. When the user clicks "add", the selected item should appear below the search field so that it can be saved in the database. However, I am encountering ...

javascriptphpjqueryajaxzend-framework

Create a line with elements that end on the next line without taking up the full width

In a row of three links, I want the third one to be on the next line, but using .new-line { display:block; } makes the link 100% width on the next line, causing the entire area to be clickable. I also have content in the :before that should appear inline w ...

css

Is there a native horizontal divider available in Bootstrap 4?

Is there a predefined horizontal divider in Bootstrap 4? I currently have this: <style type="text/css> .h-divider{ margin-top:5px; margin-bottom:5px; height:1px; width:100%; border-top:1px solid gray; } </style> However, I would prefer t ...

htmlcssbootstrap-4twitter-bootstrap-4

Issue with Pop Up not redirecting correctly after a successful login in Azure AD

I recently integrated Azure AD with my web application. When clicking on the login window, a pop-up appears with the URL . It prompts for the Azure AD username and password. However, after successfully logging in, a code is returned as a parameter but the ...

javascriptangularazure-active-directory

Preventing default behavior in a JQuery post request

Encountering an issue with jQuery functionality on a mobile device. function send() { $.post("scripts/post.php", { username: $("input[name=username]").val(), password: $("input[name=password]").val() }, function(data) { if ($(".data div" ...

javascriptjqueryhtmlpostinput