ways to add spacing between bootstrap columns

I am currently using Bootstrap 5 and I'm trying to create a row with 6 columns. I have added gutter in the row but for some reason, the spacing between the columns is not being applied. Can anyone help me figure out what I'm doing wrong here? Below is my code snippet:

.box{
    height: 100px;
    background-color: blue;
    box-sizing: border-box;
}
.myrow{
    background-color: red;
}
<div class="container">
     <div class="row myrow gx-5">
        
        <div class="box col-lg-2">1</div>
        <div class="box col-lg-2">2</div>
        <div class="box col-lg-2">3</div>
        <div class="box col-lg-2">4</div>
        <div class="box col-lg-2">5</div>
        <div class="box col-lg-2">6</div>
        
     </div>

 </div>
htmlcssbootstrap-5

Answer №1

I have tested your code and confirmed that the gutters are functioning correctly. It seems that the issue may be due to applying the background color to the columns instead of the column containers. Please refer to the example below for clarification. https://codepen.io/QuiteQuinn/pen/JjNLVbO

https://i.sstatic.net/4FeYN.png

.box{
    height: 100px;
    background-color: blue;
}
.myrow{
    background-color: red;
}
span{
    width: 100%;
    background: yellow;
    display: inline-block;
}


<div class="container">
  <div class="row myrow gx-5">
    <div class="box col-lg-2"> <span>1</span></div>
    <div class="box col-lg-2"> <span>2</span></div>
    <div class="box col-lg-2"> <span>3</span></div>
    <div class="box col-lg-2"> <span>4</span></div>
    <div class="box col-lg-2"> <span>5</span></div>
    <div class="box col-lg-2"> <span>6</span></div>
  </div>
</div>

Answer №2

It seems like you're looking to arrange images in columns with some spacing between them to prevent overlap.

If you prefer not to use paddings, another option is to utilize margins. In bootstrap, classes like ml-1, ml-2 (up to 5) can be used to create the desired margins.

ml -> margin-left

mr -> margin-right

Below is a simple example tailored to your requirements. I hope this helps!

.box{
    height: 100px;
    background-color: blue;
    box-sizing: border-box; 
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px;
}
.myrow{
    background-color: red;
}

img {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  
}
<div class="container">
     <div class="row myrow gx-5">
        
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        
     </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

Is there a way to change the orientation of the cards so that they move from left to right instead of

I am looking to have my cards displayed from left to right rather than vertically, but I'm struggling to achieve this. I have tried using the float: left property with no success. Below is an example of a single card in my layout. They all follow the ...

htmlcss

Opening an HTML file in Eclipse is a simple process that can be

Q1) Is there a way to open this file in a browser for testing? Q2) Can I quickly open this in Chrome from Eclipse and test it? click here for image ...

htmleclipse

How can the dropdownlist CSS be modified when it is clicked or hovered over?

I recently came across a solution on how to enable a disabled dropdown list when clicked at . I attempted to implement this and added a grey background to the disabled selection. However, I encountered an issue where the background of the dropdown list re ...

jqueryhtmleventsdrop-down-menuradio-button

What is the best way to extract text from a list item in an unordered list (

I am trying to search a ul list that populates a ddSlick dropdown box. ddSlick adds pictures to list items, making it a visually appealing choice. To see more about ddSlick, you can visit their website here: Here is the code I am using to loop through the ...

javascriptjqueryhtmlhtml-lists

Generate an image on Canvas using a URL link

I have a unique URL that generates canvas images with specific parameters. It functions properly when loaded in a browser. The final line of code is: window.location = canvas.toDataURL("image/png"); However, when attempting to use this URL from another ...

javascripthtmlcanvas

The flying saucer fails to display images when viewing PDFs

Having some trouble converting HTML to PDF as the images in the HTML are not showing up in the PDF file. pom.xml <dependency> <groupId>org.xhtmlrenderer</groupId> <artifactId>flying-saucer-core</artifactId> <v ...

javahtmlhtml-to-pdfflying-saucer

How can I hover over multiple cells in a table?

Is there a way to change the color of multiple adjacent cells when hovering over one cell, and can this be done dynamically (so the number of adjacent cells that change color can vary)? Here is the code snippet: I'm using React to create a table wit ...

javascriptcssreactjsmaterial-ui

Is there a way to trigger two distinct CSS transitions simultaneously with a single click?

Below is a script that rotates two images in opposite directions when clicked. One image spins clockwise while the other spins counter-clockwise. The challenge is that each image requires an individual click to rotate. My goal is to make both images rotate ...

jquerycss

Can you explain the significance of xpath=1 in an HTML document?

I am confused about a line in my design code that reads xpath="1". Can someone explain what this means in the context of the following code snippet? <select class="search-category" id="ddlTemp" name="Template" x ...

htmlxmlselenium-webdriverxpathchropath

With *ngFor in Angular, radio buttons are designed so that only one can be selected

My goal is to create a questionnaire form with various questions and multiple choice options using radio buttons. All the questions and options are stored in a json file. To display these questions and options, I am utilizing nested ngFor loops to differ ...

htmljsonangularradio-buttonngfor

Modifying icons with JavaScript

When I click on the play icon, it changes to the pause icon. However, I am only able to change the first icon from play to pause in my JavaScript code. How can I apply this functionality to all the audio elements on the page? let playIcon = "https://ima ...

javascripthtmlcss

Creating HTML in Go using data from a struct

I have an HTML file named email.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shareholder</title> </head> <body> <h1> {{.PageTitle}} </h1> ...

htmlgogo-templates

problem with placing text into input field

When using my search program, I am encountering an issue where there is some added space before the text once it is set into the input box after clicking on a search result. To see the problem in action, you can visit the following link: http://jsfiddle. ...

jqueryhtml

Issues arise when trying to implement Angular SCSS with ngx-datatable

I am encountering an issue with my SCSS. It seems that the CSS command from the SCSS file below is not being utilized. This particular SCSS file is generated with the component. Interestingly, when I place the code in the styles.scss file included in the ...

cssangularhtmlsassstylesheet

JQuery content displaying only on the first instance

<script> $(document).ready(function () { $('nav>li').hide(); $('ul').hide(); $('h2').hide(); $('a.btnDown').click(function () { $('body').css('background&apos ...

jqueryhtml

designing the border at the bottom of the existing menu selection

I am trying to enhance the look of my current-menu-item div by adding a border at the bottom. It seems simple enough to achieve this by simply including the border in the div. However, I'm facing an issue with the width and position of the border. Ide ...

phpwordpresscss

Display v-select options by clicking a button

I am trying to figure out a way to make the vuetify v-select component appear when I click on an icon button. The v-select should remain hidden when closed, only visible when triggered by clicking the button. It's like having the button toggle the vis ...

htmlvue.jsvuetify.jsv-select

button to dim the image collection

On the top right corner of my image gallery, there's a button that, when clicked, creates an overlay darkening the image. I'm trying to figure out how to toggle this effect on and off with a click. Any suggestions on how I can achieve this? Here ...

javascripthtmlcss

What are some solutions for adjusting this sidebar for mobile devices?

My mobile version sidebar is not functioning properly on my website. To see the issue, you can visit Zinexium. As I am new to HTML, I don't know how to fix it. Here is a link to the code. Thank you! <!DOCTYPE html> // Code snip ...

htmlcss

Why does the styling of the inner Span adhere to the style of the outer Span?

How can I adjust the opacity of the color "blue" to 1 in the code snippet below? <!DOCTYPE html> <html> <body> <p>My mom's eyes are <span style="color:blue;font-weight:bold;opacity:0"> <span style="color:blue;fo ...

javascripthtmlcss