What is the best way to remove column and row gaps in a Bootstrap grid system?

Despite adjusting padding with the image, div section, and grid gap to 0px in the grid layout, the image still fails to cover the entire cell. I am seeking a solution to eliminate these unwanted paddings that are highlighted in blue.

The Bootstrap 5 .g-0 class effectively removes gutters between columns but does not address the issue of gutters between rows.

Displayed below is a screenshot of my current webpage:

.ai {
  width: 100%;
  height: 100%;
  padding: 0px;
}

.algo {
  padding: 0px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid added-by-community">
  <div class="row added-by-community">
    <div class="col-sm-6 col-lg-4 col-md-4 col-xl-4 col-xxl-4 algo bg-primary">
      <figure>
        <img class="img-fluid ai" src="https://via.placeholder.com/600x200" />
      </figure>
    </div>
    
    <div class="col-sm-6 col-lg-4 col-md-4 col-xl-4 col-xxl-4 algo bg-primary">
      <figure>
        <img class="img-fluid ai" src="https://via.placeholder.com/600x200" />
      </figure>
    </div>
    
    <div class="col-sm-6 col-lg-4 col-md-4 col-xl-4 col-xxl-4 algo bg-primary">
      <figure>
        <img class="img-fluid ai" src="https://via.placeholder.com/600x200" />
      </figure>
    </div>
    
    <div class="col-sm-6 col-lg-4 col-md-4 col-xl-4 col-xxl-4 algo bg-primary">
      <figure>
        <img class="img-fluid ai" src="https://via.placeholder.com/600x200" />
      </figure>
    </div>
    
    <div class="col-sm-6 col-lg-4 col-md-4 col-xl-4 col-xxl-4 algo bg-primary">
      <figure>
        <img class="img-fluid ai" src="https://via.placeholder.com/600x200" />
      </figure>
    </div>
    
    <div class="col-sm-6 col-lg-4 col-md-4 col-xl-4 col-xxl-4 algo bg-primary">
      <figure>
        <img class="img-fluid ai" src="https://via.placeholder.com/600x200" />
      </figure>
    </div>
  </div>
</div>

htmlcssbootstrap-5

Answer №1

My approach is to avoid directly altering the grid layout at a local level, instead preferring to utilize it as intended and make adjustments to the content itself. For example, using negative margins can help offset any unwanted spacing caused by the grid.

Another option is to bypass traditional rows and columns altogether and opt for basic flexbox utilities, such as those provided by Bootstrap. In this case, I have customized a class for creating 1/3 width elements above the 'md' breakpoint while also removing bottom margins on figures with the 'm-0' class.

@media (min-width: 768px) {
  body .w-md-33 {
    width: calc(100% / 3) !important;
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d0ddddc6c1c6c0d3c2f2879c809c80">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="d-flex flex-wrap">

  <div class="w-50 w-md-33 algo bg-primary">
    <figure class="m-0">
      <img class="img-fluid ai" src="https://via.placeholder.com/800x300" />
    </figure>
  </div>

  <div class="w-50 w-md-33 algo bg-primary">
    <figure class="m-0">
      <img class="img-fluid ai" src="https://via.placeholder.com/800x300" />
    </figure>
  </div>

  <div class="w-50 w-md-33 algo bg-primary">
    <figure class="m-0">
      <img class="img-fluid ai" src="https://via.placeholder.com/800x300" />
    </figure>
  </div>

  <div class="w-50 w-md-33 algo bg-primary">
    <figure class="m-0">
      <img class="img-fluid ai" src="https://via.placeholder.com/800x300" />
    </figure>
  </div>

  <div class="w-50 w-md-33 algo bg-primary">
    <figure class="m-0">
      <img class="img-fluid ai" src="https://via.placeholder.com/800x300" />
    </figure>
  </div>

  <div class="w-50 w-md-33 algo bg-primary">
    <figure class="m-0">
      <img class="img-fluid ai" src="https://via.placeholder.com/800x300" />
    </figure>
  </div>

</div>

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

Tips for including a lang attribute in HTML tags within Next.js

When I ran a performance check on my Next.js portfolio site, I discovered that the main index.html is missing a lang attribute. This absence results in a deduction from the accessibility score. I could add the locale by configuring i18n setup in the next. ...

htmlreactjsnext.js

Tips on showcasing an array as a matrix with a neat line property

I am currently developing an application using TypeScript, and utilizing a JSON array structured like this: data = [{"name":"dog", "line":1}, {"name":"cet", "line":1}, ...

htmljsonangulartypescript

Loading asp.net controls dynamically using JavaScript

In the process of creating ASP.NET controls that facilitate the development of dynamically generated websites based on a class.cs file, these controls are loaded into a Placeholder within an update panel. My goal is to leverage technologies like AJAX and ...

asp.netajaxjsonhtmlc#-4.0

The issue with Framer motion's whileInView is that it does not animate the element when it is within the viewport in Next.js

In my current Next.js 14 project with the App Router, I decided to play around with animations using Framer Motion. One specific feature I wanted to implement was animating text elements into view as they enter the viewport. The idea is for the text to gra ...

javascripthtmlreactjsnext.jsframer-motion

Prioritize the timepicker over the use of a modal window

Having an issue with my time picker in Angular being blocked by a modal window. Component.ts open() { const amazingTimePicker = this.atp.open(); amazingTimePicker.afterClose().subscribe(time => { console.log(time); }); } // T ...

htmlangulartypescripttimepicker

The font-size transition using CSS3 is experiencing a lack of smoothness specifically in the

I have crafted a simple animation for an h1 element, utilizing css3 and a transition on the font-size. Here is the link to view: http://jsbin.com/oPIQoyoT/1/edit h1 { position: relative; width:500px; height: 500px; font-size: 3em; tra ...

htmlcss

Change the background color on hover without affecting the text color

I am having some trouble with my code. I can only change the color of the "popup1_btn" button when hovering, but the text color remains the same. If I use .popup1_btn a:hover, it only changes the background and text color of the text, not the entire button ...

htmlcss

Interior CSS border

Check out my progress so far: jsfiddle.net/warpoluido/JkDhN/175/ I'm attempting to adjust the height of the green section to be slightly higher than the blue (or similar color) one, as shown in the image. The design needs to remain responsive. < ...

htmlcsscss-shapes

Intersection of content in panel-body using bootstrap tab pills

Can someone help me solve a major issue? I need the content of each tab to overlap as if they are unaware of each other. Currently, my code is saved in this fiddle: https://jsfiddle.net/axq882de/1/. When I click on different tabs, the contents should remai ...

jqueryhtmlcsstwitter-bootstrap-3

Is there a way to modify the background shade of an HTML meter element?

Can the background color of an HTML meter be customized? I noticed that by default, it has a green background. Is there a way to change this green background to a different color? I attempted using the style attribute with a red background color, but it ...

htmlcss

Steps to insert a column within an HTML document for PDF printing

Is there a way to create an HTML document that can be printed in PDF format but the column feature isn't functioning as expected? Would I need to use a specific library or tool? ...

htmldompdf

What impact do negative positioning have on CSS elements in terms of responsibility?

Just diving into CSS and I have a question to pose: Is it considered good practice to utilize negative positioning in CSS? Are there potential compatibility issues with browsers like IE7 and IE8? What is your suggestion? #example-bottom { position: relat ...

htmlcssinternet-explorer

Submitting search parameters with an HTML button

Is there a way to replace the lower input text field with a button, like this: <input type="button" class="button" name="search" value="Urban" onclick="">. HTML CODE: <form method="post" action="search.php" id="search_form"> <input typ ...

phphtml

Ways to conceal a div using ng-hide

Is there a way to make a div disappear using ng-hide? I have this code and I'm trying to hide the div with id="ApagarNA". The code displays a table with values, but some rows contain N.A in all 4 columns, and I want to hide those specific rows. For e ...

htmlangularjs

Styling a HTML div element with a header and footer, while also ensuring that the

My goal is to create a div that features a header with a unique background design. The content within the div should have a background consisting of a one-pixel repetition at y, or maybe something different? I also want a footer with its own distinctive ...

jquerycsshtml

Issue with Bootstrap 4 column width when using Angular 2 *ngFor

I have a container that displays search results. The layout is set up using Bootstrap columns, but there seems to be excessive padding or margin causing the results to appear very narrow. Interestingly, if I manually input each result instead of using *ngF ...

htmlcssangulartwitter-bootstrap-4bootstrap-4

Issues with Vertical Alignment and Navigation

Link: Please resize the browser to mobile view. Issue with Header: I am facing alignment issues in the header. The elements do not seem to be aligned properly at the center of the header. The Android logo is aligned, but the text and dash image are not. ...

htmlcss

A dynamic homepage that transforms upon login, created without the use of any content management systems

I am embarking on creating a website with registration and login features without relying on any CMS, using only pure HTML/CSS and other necessary tools. My main confusion lies in how I can develop a homepage that can cater to any visitor by displaying rel ...

csshtml

What is the best way to verify the status codes of multiple URLs using JavaScript?

In my JavaScript project, I am currently checking the status codes of various URLs. While I can successfully check the status for one URL at a time by writing the code manually, I am facing an issue as I have over 100 URLs to check. This is making my cod ...

javascriptjqueryhtml

How can I maintain circle radius while resizing SVG to 100% width?

Our line graphs are drawn using SVG technology: https://i.stack.imgur.com/PLpPT.png When generating SVG, the width is set to 100%, but the exact value remains unknown. To ensure that the SVG fills the entire width without distortion, we use preserveAspec ...

csssvg