The gap between columns in Bootstrap grids

Currently, I am dynamically fetching "boxes" and adding them to the HTML document using ngFor. The number of boxes is unknown in advance. Here is the code I am currently using:

<div *ngIf="items && items.length" class="row">
    <div *ngFor="let item of items"
         class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
        <app-single-item [item]="item"></app-single-item>
    </div>
</div>

The current layout looks like this:

https://i.sstatic.net/inTFn.png

However, I would like to increase the spacing between the elements to achieve a layout similar to this:

https://i.sstatic.net/5kfIi.png

To accomplish this, I set width: 21% for col-xl-3 and added display: flex and justify-content: between to the row div.

The issue now is that when there are fewer than 4 boxes in a row, the spacing becomes uneven as shown below:

https://i.sstatic.net/XMzuI.png

My question is how can I maintain consistent spacing between the boxes regardless of their quantity without fixing the width of each item div? It's important that these items always align with the top of the outer div. Thank you.

htmlcssangulartwitter-bootstrap

Answer №1

To add some space between columns, you can simply utilize the margin right class from Bootstrap for each column. This will create a margin to the right of each column, as shown below:

<div *ngIf="items && items.length" class="row">
  <div *ngFor="let item of items"
     class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4 mr-3">
     <app-single-item [item]="item"></app-single-item>
  </div>
</div>

Answer №2

Ensure width remains consistent by employing justify-content-center

Make adjustments according to feedback-

Add container class to encompassing div and implement -

@include media-breakpoint-down(lg) {
.container {
    width: 100%;
    max-width: none;
}

}

Answer №3

If you want to make adjustments to the layout of your elements, consider updating the padding instead of the margin or width, as it will only impact the inner content and not the outer appearance.

Sample Code (not tested)

<div *ngIf="items && items.length" class="row">
  <div *ngFor="let item of items"
     class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4 pr-2 pl-2">
     <app-single-item [item]="item"></app-single-item>
  </div>
</div>

By following these guidelines, you can easily control the spacing between elements.
Additionally, if you prefer certain elements not to have padding on the left or right sides, you can utilize media queries breakpoints to selectively remove pl-2 from specific elements based on their position in the row for different breakpoints. For example, removing pl-2 from the first element and every second element for the sm breakpoint, and removing pr-2 from the second element and every second odd element for the sm breakpoint (and adjusting for other breakpoints depending on the number of elements per row).

Check out the documentation

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

Having trouble with the Angular router link suddenly "failing"?

app.routes.ts: import { environment } from './environment'; import { RouterModule } from "@angular/router"; import { ContactUsComponent } from './static/components/contact-us.component'; import { HomeComponent } ...

javascriptangular

Decreasing the vertical size of the page

My mobile page was meant to be all black, but it's only half black now. I tried the following CSS: @media (max-width: 768px) {body, html.page-id- 28{background-color: black! important;}} @media (max-width: 768px) {. parallax-window {background ...

htmlcss

Can anyone lend a hand with styling this menu without relying on margins in CSS?

I've been working on a website and I've noticed a significant lag in Internet Explorer when hovering over the menus. It appears that Cufon is contributing to this issue, especially when applying height, width, margins, or paddings to the li:hover ...

htmlcsshtml-listsmargin

The Angular parent component is able to detect changes in the ng-content child component

I am looking for a way to have a function execute in my parent component when an event is emitted from my child component. The child component is inserted into the parent using ng-content. I have simplified the code but I am struggling to get the child com ...

angularangular5angular6

The hover effect is not activated by the mouse movement event

I previously encountered an issue related to flickering with an absolute div when moving my mouse, which I managed to resolve by increasing the distance between my mouse pointer and the div. Now, I am working on the next phase of my project: My goal is t ...

javascriptjqueryhtmlcss

Decrease the gap between rows in CSS Grid

I'm struggling to minimize the space between the rows. I've attempted adjusting margins and paddings to 0, but nothing seems to be working effectively. Displaying desktop view on the left and mobile view on the right side. https://i.sstatic.net ...

htmlcssresponsivecss-grid

Leveraging property values in Angular 2 to dynamically generate HTML elements as tag names

Is it feasible to use a property as an HTML tag name? For instance, something along the lines of: <{{property.name}}>Hello world</{{property.name}}> ...

htmlangular

Launch the sidebar window using jQuery

I've been attempting to create something similar to this. However, I'm having trouble replicating it exactly. What I've attempted I've managed to create a replica, but the issue is that the buttons are fixed. Could setting the left ...

javascriptjqueryhtmlcss

The filter search feature fails to return any results when data is inputted into the tables

I have implemented a filter search feature within two tables on my website. My goal is to retrieve the search results for a specific drink while keeping the table headings fixed in their positions. For instance, if I type "Corona" into the search box, I ...

htmlcss

Why is it that jQuery is not working in Internet Explorer but works fine in Firefox?

Below is the code for handling file upload onchange event: <input type='file' onchange="displayFilePath(this);" id="loadfile" /> This text field will display the full path of the uploaded file. <script type="text/javascript"> fun ...

jqueryhtml

Steps for creating a new tab and refreshing the address bar with a different URL without having to reload the current page

I'm trying to create a functionality on my page where clicking a button will open a new tab with a modified URL, all without reloading the current page. Below is the code that I'm using when the button is clicked: function changeUrl(){ var pri ...

javascriptangularjshtml

What is the best way to layer four images in a 2x2 grid over another image using CSS as the background

I am attempting to place 4 images of the same size on a 5th image defined as the background. Currently, it looks like this: It works perfectly when the height is fixed, but in my case, the height may vary causing this issue: This problem isn't surp ...

javascriptcss

span element causing border-spacing problem

Is there a way to adjust the spacing between these borders? I've tried using border-spacing but it doesn't seem to be working. {{#each spacing}} <span class='space'> {{business}} ({{Count}}) </span> {{/each}} CSS .spac ...

javascripthtmlcsshandlebars.js

Error: The Class 'Subject<T>' does not properly extend the base class 'Observable<T>'

I encountered an error that says: **Build:Class 'Subject<T>' incorrectly extends base class 'Observable<T>** . I have TypeScript 2.4.1 installed and obtained angular quick starter files from the GitHub repository angular quick ...

angulartypescript

Can you explain the functionality of the NextSibling method?

I have a question about how the property NextSibling behaves when using the method getElementsByClassName(). Let me illustrate the issue with this code example: function Sibling() { var x = document.getElementsByClassName('firstClass')[0]; ...

javascripthtmldom

Using CSS to create a strikethrough effect on prices with spacing

I have a woocommerce setup and I want to showcase the original prices by striking them out like a price tag when products are on sale. However, there seems to be an issue with the space that woocommerce automatically adds between the currency and the pric ...

csswoocommercetext-decorationsstrikethrough

Utilizing Bootstrap to display side by side images at full height

Can someone help me achieve the layout shown in the image below? I want a container that spans full width and height with 2 images and other elements inside. The images should be full-height within the container, but also automatically adjust their width t ...

htmlcsstwitter-bootstrap

Creating a model and assigning values in TypeScript

I am currently developing an angular application and need to send data to a post API. The JSON structure I am working with is as follows: { "name": "julie", "id": 1, "PersonalDetails": { "hom ...

angulartypescriptangular8

Displaying two images side by side in HTML using Bootstrap

As a beginner in HTML, I am faced with the challenge of placing two images of different sizes side by side on the same row using HTML and Bootstrap. Below is my current code: <div class="row"> <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6"> ...

jqueryhtmlcsstwitter-bootstrap

Setting up a Bootstrap tokenfield for usage with a textarea

I was attempting to set up a tokenfield on a textarea with increased height, but it is showing up as a single-line textbox. How can I modify the tokenfield to function properly with a textarea? <textarea name="f1_email" placeholder="Enter Friends' ...

javascriptjqueryhtmlcsstwitter-bootstrap