Introducing space between div elements changes the arrangement of columns

I am facing an issue with my layout consisting of 6 div tags divided into 2 rows of fixed height. Whenever I try to add a margin around the divs, the rightmost div gets pushed down to the next row. How can I solve this problem?

HTML:
<div class="container">
          <div class="row">
            <div class="col-4 frontPageCells">
              hh
            </div>
            <div class="col-4 frontPageCells">
              hh
            </div>
            <div class="col-4 frontPageCells">
              ty
            </div>
          </div>
          <div class="row">
            <div class="col-4 frontPageCells">
              hh
            </div>
            <div class="col-4 frontPageCells">
              hh
            </div>
            <div class="col-4 frontPageCells">
              ty
            </div>
          </div>
        </div>

CSS:
.frontPageCells{
  background-color: white;
  height: 200px; 
  margin: 2px;
}

I attempted to counteract the margin issue by using a negative padding value, but unfortunately, this did not yield the desired result.

csstwitter-bootstrapbootstrap-4

Answer №1

One simple solution is to nest col-12 inside your col-4 div

.frontPageCells {
  background-color: red;
  height: 200px;
  margin-top: 10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>

  </style>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-4 ">
        <div class="col-12  frontPageCells">
          hh
        </div>
      </div>
      <div class="col-4 ">
        <div class="col-12  frontPageCells">
          hh
        </div>
      </div>
      <div class="col-4 ">
        <div class="col-12  frontPageCells">
          hh
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-4 ">
        <div class="col-12  frontPageCells">
          hh
        </div>
      </div>
      <div class="col-4 ">
        <div class="col-12  frontPageCells">
          hh
        </div>
      </div>
      <div class="col-4 ">
        <div class="col-12  frontPageCells">
          hh
        </div>
      </div>
    </div>
  </div>
</body>

</html>

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

Choose either immediate offspring or immediate offspring of immediate offspring

I am struggling to create a CSS Selector that follows DRY principles. The selector needs to target elements within a group but not those within a subgroup of the main group. Elements should only be direct children of the main group or wrapped in an addit ...

javascripthtmlcss

Scroll bar for multiple selection select tag without using div element (not supported in firefox)

.selector select[multiple="multiple"] { border-radius: 0; height: 200px; margin: 0 0 0 -1px; max-width: 368px !important; padding-left: 3px; width: 368px !important; } <select id="id_included_packages_from" class="filtered" multiple="multipl ...

htmlcss

What is the best method for overlaying text on individual images in a slideshow?

Currently, I am delving into the world of jQuery, experimenting with various slideshows and attempting to incorporate text and effects. In my endeavors, I stumbled upon this codepen that served as an excellent template. However, when I tried adding text o ...

jqueryhtmlcssslideshow

Is there a way to turn off the "swipe to navigate back" feature in Microsoft Edge using JavaScript or jQuery?

Working on a website that features horizontal object rotation. For instance, starting with the front view of an object followed by side, back, other side, and then back to the front. In this case, there are 24 images of an object, each taken at a 15 degre ...

javascriptjqueryioscssmicrosoft-edge

What advantages does implementing W-100 on the row class offer in Bootstrap 4?

Currently in my project, the container is fluid and expanding to take up the full width of the screen. However, the row that follows it is only utilizing about 60% of the available space. Images Container: Row: What could be causing this discrepancy, e ...

twitter-bootstrapbootstrap-4

Adapt appearance according to the length of the text

Currently, I have an array that stores multiple strings based on displayed charts. My objective is to find the longest string within this array. So far, this task has been executed without any issues. The code snippet for this process is as follows: var ...

javascriptjquerycssstyles

Is there a way to prevent a span from appearing at the end of a line?

Imagine a scenario where I have a paragraph with various span elements that are styled using classes. What if there are numbers interspersed within the text for easy reference, and I want to ensure they do not end up at the end of a line? For example: 1 ...

htmlcssformattingstyles

Issue with custom Javascript not executing in Internet Explorer versions 9 and 10

Initially, this script is found in the document's head section. <script> document.addEventListener("DOMContentLoaded", function () { var e, t = document.querySelectorAll("div.bounceInDown"); for (var n = 0, r = t.length; n & ...

javascripthtmlinternet-explorercss

Ensure that the div expands to accommodate the content

I'm experiencing an issue where the content within a div with a blue border exceeds the boundaries of the div when it expands. How can I make sure that the div extends to contain all the content? Here is a demonstration of the problem: When I expand ...

htmlcss

What is the process for implementing a grid with 5 columns on larger screens and 2 columns on smaller screens using reactjs?

I am currently working on building a Grid using material UI and reactJs. I found the guidelines on this link https://mui.com/system/react-grid/. However, there seems to be an issue with creating 5 columns in the grid. I attempted to create a custom grid ...

javascriptcssreactjsmaterial-ui

The dropdown menu with Bootstrap's <li> sub menu is not expanding as expected

<li class="dropdown"> <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">Utilitas<span class="c ...

cssbootstrap-4drop-down-menuhtml-listssubmenu

Is it possible to apply a specific CSS color to a row in Angular 9 mat-tables without having to individually set it in multiple locations?

I am working on a mat-table in Angular 9 where I need to implement a function that determines the CSS class for each row... getRowClass(item: Item): string { let class_ = ""; if (...condition1...) { ... } else { class_ ...

cssangularangular9mat-table

Integrating autoprefix-cli into ANT build

I've been attempting to integrate autoprefix-cli into my ANT build. The code snippet below shows what I've tried so far. <target name="auto"> <apply executable="autoprefixer-cli.bat" verbose="true" force="true" failonerror="true"> ...

javacssbuildantautoprefixer

Utilizing Emotion CSS to incorporate images into buttons

I'm trying to add some style to two buttons, Up and Down, by using emotion CSS but I'm having trouble. Currently, I typically style my elements within a function. Is there a way for me to accomplish this with emotion CSS? I checked out but still ...

cssreactjstypescriptemotion

deleting hyperlink on mobile device

I'm trying to hide a specific div when the screen size is mobile, and currently I have: HTML <div id='top-btn'> <a class="fade-in" href="...">Top</a> </div> CSS #top-btn a { visibility: visible; opacity: 1 ...

htmlcss

React: Create a collapsible table to showcase nested JSON data in a structured format

I have a JSON structure that is hierarchical and I am looking to showcase it in a collapsible and nested table format. Is there a React UI framework or plugin that can handle displaying hierarchical data with a slide bar for the "volume" field? And how wou ...

reactjsbootstrap-4material-uireact-bootstrap

"Troubleshooting a matter of spacing in HTML5 body

I've been struggling to eliminate the gap between the top of my webpage and the <div> element. Here's the code snippet causing the issue: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="v ...

csshtml

Tips for positioning an advertisement at the center of a full-screen HTML5 game

I am struggling to find a way to perfectly center my advertisement in a fullscreen HTML5 game. The game automatically expands to fullscreen when played, and I want the advertisement to always be positioned in the center, regardless of whether the game is b ...

javascriptcsshtml

Dividing one SVG into Multiple SVGs

I'm facing a challenge with loading an SVG overlay on a Google Map. The SVG file is quite large, about 50mb, resulting in a delay of around 10 seconds for it to load in the browser. One solution I'm considering is splitting the SVG into 171 smal ...

javascripthtmlcssgoogle-mapssvg

How can one import files from an external CSS template in CakePHP 2.x?

I recently acquired an external HTML template that I purchased from a website called themeforest: https://i.sstatic.net/UIu6g.png The folder structure is as follows: base/ - css/ - fonts/ - images/ - img/ - js/ - index.html The template file Index.html ...

htmlcsstemplatescakephp