Spacing Between Bootstrap Columns

Is there a way to add a gap between each column while still maintaining 4 columns per row? When I try using the margin property, the columns do not align properly. Can you suggest a solution?

<style>
.test {
    border: 5px solid red;
}
</style>

<div class="container-fluid test">
        <div class="row">
            <div class="col-md-3 test m-2">
                Hello
            </div>
            <div class="col-md-3 test m-2">
                Hello
            </div>
            <div class="col-md-3 test m-2">
                Hello
            </div>
            <div class="col-md-3 test m-2">
                Hello
            </div>
        </div>
    </div>

view image description here

EDIT: I may have missed something earlier ... This approach seems to work well:

.gap {
      margin: 10px;
      border: 1px solid black;
      width: fit-content;
      padding: 10px;
    }

    .row {
      display: flex;
      border: 1px solid black;
    }
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Homepage</title>

    <!-- Basic Icons-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="styletest.css">
  
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-3 gap">
                columns 1
            </div>
            <div class="col-sm-3 gap">
                columns 2
            </div>
            <div class="col-sm-3 gap">
                columns 3
            </div>
            <div class="col-sm-3 gap">
                columns 4
            </div>
            <div class="col-sm-3 gap">
                columns 5
            </div>
        </div>
    </div>
</body>

</html>

If I include the latest Bootstrap reference, the previous method no longer works. Like this:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.gap {
margin: 10px;
border: 1px solid black;
width: fit-content;
padding: 10px;
}

.row {
display: flex;
border: 1px solid black;
}
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Homepage</title>

    <!-- Basic Icons-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="styletest.css">

</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-3 gap">
                columns 1
            </div>
            <div class="col-sm-3 gap">
                columns 2
            </div>
            <div class="col-sm-3 gap">
                columns 3
            </div>
            <div class="col-sm-3 gap">
                columns 4
            </div>
            <div class="col-sm-3 gap">
                columns 5
            </div>
        </div>
    </div>
</body>

</html>
htmlcssbootstrap-4

Answer №1

Understanding the importance of margins in relation to grid column functionality is crucial. Instead of manipulating margins, consider adjusting the padding to control the spacing around the content within the columns...

 <div class="container-fluid test">
    <div class="row">
        <div class="col-md-3 p-2">
            <div class="test">Hello</div>
        </div>
        <div class="col-md-3 p-2">
            <div class="test">Hello</div>
        </div>
        <div class="col-md-3 p-2">
            <div class="test">Hello</div>
        </div>
        <div class="col-md-3 p-2">
           <div class="test">Hello</div>
        </div>
    </div>
</div>

It's important to note that the space between columns is commonly referred to as the "gutter".

Answer №2

.background {
  background: blue;
}
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="col-md-12 background">
        <h1>test1</h1>
      </div>
    </div>
    <div class="col-md-4">
      <div class="col-md-12 background">
        <h1>test2</h1>
      </div>
    </div>
    <div class="col-md-4">
      <div class="col-md-12 background">
        <h1>test3</h1>
      </div>
    </div>
  </div>
</div>

Check out the code on CodePen

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

Button that floats on the left or right side within a div container

Is there a way to ensure that a button floats only within a specific div area? Below is the CSS and HTML example for reference. .test { width: 60%; display: inline; overflow: auto; white-space: nowrap; margin: 0px auto; } <div class=' ...

csshtml

Step by step guide on transferring driver control from the top window to the iframe with the id of mainFrame

Currently, I am utilizing firebug to analyze the xpath. One section of firebug indicates whether the element you are trying to locate is in the window or an iframe, among other options. I have encountered a similar issue where I see 2 available choices: 1: ...

javascriptjqueryhtmlseleniumiframe

Top method for achieving a smooth transition in a loading CSS3 animation

Having trouble implementing a fade in/fade out effect on a div with a CSS3 based login animation when a function is loaded. I have set up a jsfiddle but still can't get it to work. Any assistance would be greatly appreciated! http://jsfiddle.net/adam ...

javascriptjquerycssfadeinfadeout

Why aren't the divs appearing on the page?

I have developed a JavaScript and PHP page where the script in the PHP page sends data to my SQL database. However, the result is not displayed on my home page. Here is the code snippet: function getVote(question_ID) { var option_ID = document.queryS ...

javascriptphphtml

Implementing hover-over tooltips with JavaScript and HTML

New JS function: function DisplayToolTip() { let x = event.clientX; let y = event.clientY; document.getElementById('divToolTip').style.left = x + 'px'; document.getElementById('divToolTip').style.top = y + &ap ...

javascriptjqueryhtmltooltip

What is the best way to extract a specific data point from a website?

Imagine we had a website similar to PewDiePie's YouTube homepage at https://www.youtube.com/channel/UC-lHJZR3Gqxm24_Vd_AJ5Yw. Now, I want to create a script that retrieves his subscriber count. Do I need to use Beautiful Soup for this task? I am awar ...

pythonhtmlpython-3.xweb

CORS policy is preventing access to the XAMPP Server:

For the past 10 hours, starting at 10 am, I have been struggling with a persistent issue that I just can't seem to fix. Despite my continuous efforts, the problem remains unsolved. Problem Image / https://i.hizliresim.com/AtfbH9.png The methods I&apos ...

phphtmlajax

Adjust the floating menu to match the height of the content div

I'm facing an issue with the layout of my website - I have a main content div and a sidebar. The height of the content div adjusts based on the content being loaded, but I want the sidebar to always extend all the way down matching the maximum size of ...

htmlcss-floatsidebarcss

Troubleshooting Gulp Conversion of Bootstrap-Material Scss to CSS: Error Message "Import Not Found"

Upon completing my gulp task styles, I encountered the following error: Error in plugin "sass" Message: static\node_modules\bootstrap-material-design\scss\_variables.scss Error: File to import not found or unreadable: ~bootstrap/sc ...

cssnpmsassgulp

When an image is placed inside a parent div, the link should extend to the entire width of the div, rather than just hovering over

Essentially, I have a div that spans the entire width of its container, inside it is an image link. The image's width is set to adjust automatically with a fixed height of 600px. The link covers the whole width of the div, which in this case is the wi ...

htmlcssimagehyperlink

Error: Attempted to export 'e', however it was not defined in the module (located at vite.js?v=d59cec13:236:3) - occurring in the three.js/vite combination

After dabbling in javascript, I decided to explore three.js and found it quite intriguing. However, after hours of setting everything up, I encountered a roadblock. When I attempted to create geometry and render it, the code stopped working. Upon investiga ...

javascripthtmlthree.js

Bootstrap 4 row mysteriously shatters apart

I have searched for solutions to this issue but none of them on this forum have been helpful. Hopefully, someone here can offer some assistance. I am facing a problem with displaying 4 columns of data in one row: Here is the code snippet causing the layou ...

htmlcssbootstrap-4row

Troubleshooting Blade Template HTML Coloration Problem in Atom

When I include Laravel code inside the HTML element itself, it causes all subsequent HTML elements to appear discolored. For example, <body @php language_attributes() @endphp> will cause </body> to be discolored. However, if I use plain PHP i ...

phphtmllaravelatom-editorlaravel-blade

Guide to positioning Navigation Bar in the center

I'm currently in the process of updating my website, but I've encountered a problem that I can't seem to solve. The issue revolves around the positioning of my navigation bar. Currently, it is situated below some JavaScript content and on t ...

htmlcss

Using either Javascript or jQuery, I want to set a value within an if statement

Can I set a value within an if statement, like this: if (a = jQuery("#user > .mask.fix > .a1").css('display') != 'none'){ b = a + 'hello'; //b=jQuery("#user > .mask.fix > .a1").css('display')+&apos ...

javascriptjqueryhtmlfunctionif-statement

What is a more effective way to showcase tab content than using an iframe?

I currently have a webpage set up with three tabs and an iframe that displays the content of the tab clicked. The source code for each tab's content is stored in separate HTML and CSS files. However, I've noticed that when a tab is clicked, the ...

javascripthtmlcssiframetabs

Adding new rows between existing rows in an HTML table using Jquery syntax

How can jQuery be used to insert rows between existing rows in an HTML table? <Table id="TEST"> <tr>1</tr> <tr>2</tr> </table> I need to include a new row <tr>xx</tr> between the rows with values ...

jqueryhtmlhtml-tablerow

Guide to "flashing" an image momentarily on the screen using PHP

I'm looking for a way to display an image on my simple website for 3 seconds and then prompt the user to indicate if they recognized the image or not by clicking a button. I don't need help with the button, just how to create the timer. While I ...

phpjqueryhtmlimagetimer

Is there a way to determine if two distinct selectors are targeting the same element on a webpage?

Consider the webpage shown below <div id="something"> <div id="selected"> </div> </div> Within playwright, I am using two selectors as follows.. selectorA = "#something >> div >> nth=1&q ...

javascripthtmltypescriptdomplaywright

Disappear Image Overlay when Mouse Hovers

Currently, I am in the process of working on a new webpage. You can view the progress at the following link: . When hovering over the Referrals Button, a Background Overlay will appear. To enhance the visual effect, I am looking to implement a gradual appe ...

cssjquery-animateoverlay