Present a two-column layout using row formatting in Bootstrap with Angular

In my component file, I have an arrayData containing 4 datas, and I am trying to display them in two columns across two rows. 

 <div class="row">
      <div class="col-md-6" *ngFor="let cat of myArrayData; let index=index">
        <div class="card">
          <a href="#"  >
            <img [src]="cat.pictureURL"
            />
         </a>
        </div>
      </div>
  </div>

Unfortunately, my current code is not working as expected; I want the data to be displayed in two rows with two columns each. Any suggestions on how to achieve this?

jquerycssangularbootstrap-4

Answer №1

Have you checked out this sample? https://getbootstrap.com/docs/4.0/layout/grid/#equal-width-multi-row

In essence, you can create a new row by utilizing the w-100 class.

One possible method is to handle it in the following way, by adding a new row element every 2 entries:

 <div class="row">
   <ng-container *ngFor="let cat of items; let index=index">
      <div class="col-md-6">
        <div class="card">
          <a href="#"  >
            <img [src]="cat.pictureURL"
            />
         </a>
        </div>
      </div>
      <div class="w-100" *ngIf="(index+1) % 2 === 0"></div>
   </ng-container>
  </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

Enhance the &:hover effect of one class to match another class's hover state using SASS or SCSS

Is there a way to link the hover effect from one class to another in CSS? I'm trying to achieve this without disrupting the individual hover effects of each class: HTML <a href="#" class="button1">Button 1</a> <a h ...

htmlcsssasshover

The alignment of items to the top, center, and bottom is experiencing difficulties

I am facing an issue with positioning elements within a div. The layout consists of an image on the left, followed by information on the right (a span, an h3, and another span). My goal is to align the first span at the top, center the h3, and position the ...

htmlcssflexbox

"Within the boundaries of two tags, eliminate any spaces when using the display property set

I'm a bit confused about the behavior of display:inline-block. I noticed that when I use inline-block, it displays content in a smaller space across two tags. However, when I switch to using float: left, everything works fine. Does anyone have an ide ...

javascripthtmlcss

Unlocking the Power of the .data Attribute in Angular's In-Memory Web API

My objective is to seamlessly switch between using in-memory-web-api and a real backend. In the Angular 2 (or 4) Tour of Heroes tutorial, it explains how the server returns data. The in-memory web API example returns an object with a 'data' prop ...

angular

Angular 8 combined with Mmenu light JS

Looking for guidance on integrating the Mmenu light JS plugin into an Angular 8 project. Wondering where to incorporate the 'mmenu-light.js' code. Any insights or advice would be greatly appreciated. Thank you! ...

javascriptangulartypescript

Enhancing the style of child elements in jQuery using CSS

My goal is to create a popup that appears upon mouse hover using jQuery and CSS. The code functions properly, but I'm encountering difficulty adding CSS to the child elements within the popup window. Below is the jQuery code: $(document).ready(fun ...

javascriptjqueryhtmlcss

An issue has arisen where Selenium Auth0 is unable to establish a connection with the server

I am using a protractor selenium test for an angular2 application that I execute with the command protractor conf.js --params.login.username=John --params.login.password=Doe. The purpose of the test is to attempt to log in to the backend and intentionally ...

google-chromeseleniumangularprotractorauth0

Bizarre Incident Management

My latest project involves a simplistic website featuring arrow images (png) positioned on the left and right sides with fixed placement, allowing users to navigate to the next page. However, an issue arises where the cursor seems unable to select the an ...

htmlcssweb

Updating An Angular Application from version 11 to version 12 Challenge

Once I completed installing all the required dependencies as per: https://update.angular.io/ I executed the command 'ng serve' in the terminal and encountered the following errors: ./node_modules/leaflet/dist/images/marker-icon.png:1:0 - Error: ...

angular

Looking to update this jQuery pop-up menu script to be compatible with Ajax functionality

I came across this script at The issue arises when the script is called multiple times, resulting in a cascade of pop-outs within pop-outs. I am currently exploring ways to prevent the execution of the script if the pop-out has already been set. Below is ...

javascriptjqueryajax

Is it possible to merge two individually operational Jquery form elements into one cohesive unit?

Currently, I am in the process of constructing a form that utilizes Jquery-Elements such as sliders. Additionally, I have incorporated a Jquery-Plugin to enhance the dropdown element. Both components work flawlessly when they are kept in separate files. Ho ...

jqueryajaxforms

Add a distinctive tooltip to the final element in a table row within a loop using JQuery

My challenge involves appending unique tooltips to the last item in a row of data, where each tooltip is specific to that particular row. However, when I add a new tooltip for the latest item, it ends up replacing the tooltips from previous rows. The desi ...

jquery

Attempting to design a customized tooltip for an SVG element embedded within the HTML code

Recently, I've delved into Js with the goal of creating an interactive pronunciation guide using inline svg. If you're curious to see what I've done so far, check it out here. My current focus is on incorporating basic styled tooltips that ...

javascriptcsssvghovertooltip

The flex box container has an overflowing issue despite the implementation of overflow:hidden and setting a min-width of

Struggling to make my flex box container fit in the div Despite setting min-width: 0 and overflow: hidden as a last resort the flex box simply won't shrink when the width changes Check out what happens when the width is adjusted: https://js ...

htmlcss

Press Button to create cookie and store it in Drupal 7

I am currently working on my Drupal 7 local website, which features an article and a popup on the homepage leading to that article. Within the article, there is a button that I want to serve as a way for users to dismiss the initial popup permanently. My i ...

javascriptjquerycookiesdrupal-7

Sending data to a JSON file with jQuery and AJAX: Step-by-step guide

While there are numerous tutorials available on how to retrieve data from json files using jQuery and ajax, I have been unable to find any that demonstrate how to POST data to a json file. If anyone has a script or example they could share with me on how t ...

jqueryajaxjsonpost

Difficulty encountered when converting objects into an array of a model within Angular

Below you will find the service code that I am using: export class ProductListService { constructor(private httpClient: HttpClient) { } getProducts(): Observable<IResponse> { return this.httpClient.get<IResponse>('https://local ...

jsonangulartypescript

What are some ways to create a traditional HTML form submission and incorporate jQuery solely for the callbacks?

Given that my page consists solely of a simple "name and email" registration form, I see no reason why I shouldn't stick to the traditional approach: <form action="/Account/Register/" method="POST" id="registration-form"> <fields ...

javascriptjqueryhtmlajaxforms

Updating the Scale of the Cursor Circle on my Portfolio Site

I attempted to find tutorials on creating a unique circle cursor that can hide the regular mouse cursor as well. After implementing it with a difference blend mode, I encountered an issue where I wanted the scale to change when hovering over a link. The ...

javascripthtmlcsshovercss-transitions

Uploading files in Angular 5 with additional properties of other objects

I am facing a challenge with uploading a file as part of a property to an object within a form. Most documentations I have come across only focus on services that handle standalone files. In my case, I have a form with various text inputs and date pickers, ...

angulartypescriptasp.net-core-webaping-file-upload