Grid layout with columns of equal width in Bootstrap

I'm currently working on creating a dashboard with Angular and Bootstrap 4. I've utilized the equal-width columns from https://getbootstrap.com/docs/4.0/layout/grid and it's functioning well. However, I'm facing an issue where if the longDescription field is too big, each card gets displayed on a separate row. My goal is to always have 3 columns per row with word wrapping for text.

<div class="container mt-5">
    <div class="row">
        <div *ngFor="let card of cards">
            <div class="col-sm">
                <div class="card p-3 mb-4">
                    <h6>{{card.longDescription}}</h6>
                </div>
            </div>
        </div>
    </div>
</div>

The desired outcome I want to achieve visually can be seen here:

Your guidance on this matter would be greatly appreciated.

htmlcssangularbootstrap-4

Answer №1

Check out this awesome code snippet for displaying a list of cards:

<div class="container mt-5">
   <div class="row">
      <div class="col-sm-4" *ngFor="let card of cards">
          <div class="card p-3 mb-4">
              <h6>{{card.longDescription}}</h6>
          </div>
      </div>
   </div>
</div>

Answer №2

Try adjusting your template by making a small change. Remove the extra div used for looping and instead add the loop directly to the column division.

<div class="container mt-5">
    <div class="row">
        <div class="col-sm" *ngFor="let item of items">
            <div class="card p-3 mb-4">
                <h6>{{item.description}}</h6>
            </div>
        </div>
    </div>
</div>

This adjustment should resolve the issue. If not, you can try using the class col-sm-4 to create 3 columns.

Answer №3

To implement the styling, it is recommended to use the class col instead of col-sm. Ensure that you do not add an extra div element for this class; rather apply it directly to the div where the loop is being inserted.

<div class="container mt-5">
    <div class="row">
        <div class="col" *ngFor="let card of cards">
              <div class="card p-3 mb-4">
                  <h6>{{card.longDescription}}</h6>
              </div>
         </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

The value from the textbox is not being received by the JavaScript and PHP

I'm encountering an issue with my codes where they are not properly passing the value of the verification code from the textbox to JavaScript and then to PHP. I need assistance in resolving this issue. Below is the snippet of code: HTML: /* HTML c ...

phpjavascripthtmltextboxpasswords

unable to format radio button list

Having trouble aligning the radiobutton list to the left of the label above. Here is the code snippet: <div style="border-radius: 10px;"> <div style="margin-bottom: 10px"></div> <asp:Panel ID="panel" runat="server"&g ...

htmlcssasp.netradiobuttonlist

Angular dependency issue: Expected '{' or ';' for @types/node

I encountered an error while running "ng serve" in my Angular application. Originally built as Angular 2, it was upgraded to Angular 8 (with attempts at versions 6 and 7 along the way). However, after migrating from Angular 5, I started experiencing errors ...

node.jsangulartypescriptdependencies

The container's height is determined by the CSS top position of the last child element within the container, with a

I'm attempting to adjust the height of a container based on the position of its last child using Isotope, infinite scroll, and Packery. Below is a snippet of the code: <html> <div id="container" class="variable-sizes isotope" style="p ...

jqueryhtmlcsscontainers

The 'ngForOf' property cannot be bound to 'tr' as it is not recognized. Make sure to import CommonModule and BrowserModule

Encountering a strange issue. When attempting to use *ngFor on a tr element, an error is thrown: <table> <tbody> <tr *ngFor="let item of productsData"> <!-- some Code --> <tr> </tbody> </table> Within my ...

angular

Enhance your JQuery skills by implementing variables within the .css() function

Attempting to randomly assign values to an image's left and right properties using JQuery. Here is the code snippet: var sides = ["left", "right"] var currentSide = sides[Math.floor(Math.random() * sides.length)]; $("#"+currentImage).css({currentSide ...

javascriptjquerycss

Encountered an issue while deploying Angular files to Azure StorageAccount: Failed to load resource

After successfully deploying Angular dist files to a Container named myui in Azure StorageAccount using Azure Copy, I have encountered an issue. The files are available in the Container, but when trying to access them through the Blob url https://uistorage ...

angularazure-pipelines-yamlazcopyazure-storage-account

Is there a way to enable autofill functionality if an email already exists in the database or API within Angular 12?

In order to auto-fill all required input fields if the email already exists in the database, I am looking for a way to implement this feature using API in Angular. Any guidance or suggestions on how to achieve this would be greatly appreciated. ...

javascriptangularjsangulartypescriptangular12

In CSS3, utilize the calc() function to vertically center elements using viewport height (vh) and viewport

One of the most common cases involves using vh for setting the height of a div, and using vm for adjusting font size. Using CSS3 div.outer { height: 20vh; } div.inner { font-size: 3vw; height: auto; } div.inner2 { font-size: 2vw; } HTML - Scenario 1 <d ...

htmlcssstylesheetviewport-units

What is the best way to reset the values in react-multiple-datepicker?

Having trouble clearing values assigned in react-multiple-datepicker library. import MultipleDatePicker from "react-multiple-datepicker"; import React from "react"; class Addjob extends React.Component { constructor(props) { super ...

javascriptnode.jshtmlreactjscss

Connecting two divs with lines in Angular can be achieved by using SVG elements such as

* Tournament Brackets Tree Web Page In the process of developing a responsive tournament brackets tree web page. * Connection Challenge I am facing an issue where I need to connect each bracket, represented by individual divs, with decorative lines linki ...

htmlcssangulartypescript

Having trouble implementing an onClick event to change a button's CSS to href in Vue.js

When working with a SinglePageApp and using UIKit (UKit), I have found that I need to use a <button> tag instead of an <a> tag. Previously, the <a> tag was written like this: <a type="button" class="uk-button uk-button-link" href="#e ...

cssvue.js

Secure Your PHP Accounts

My current website hides the account window where users can change passwords, upload files and more using a simple code snippet: <?php if($is_logged_in) { ?> <div id="account_window"> //content </div> <?php } ?&g ...

phphtmlsecurityauthenticationcode-injection

Tips for implementing z-index property on table border

I am encountering an issue with an html file that contains a table. The table has one row element with the css property of position: sticky, while the other rows are just example rows with "some text" in each cell. Within column 5 of the regular rows, I h ...

htmlcssborderz-index

Effortlessly Display or Conceal Numerous Table Columns Using jQuery

I have a small table where I want to hide certain details with a basic button... for instance, table { border-collapse: collapse; } th, td { border: 1px solid gray; padding: 5px 10px; } <button>Show/Hide Details</button> <table> ...

javascriptjqueryhtml

Utilizing jQuery/Ajax to send an ID parameter to a PHP script

This code is where the user interacts. <html> <head> <title></title> <script src="jquery-1.9.1.js"></script> <script src="jquery.form.js"></script> </head> <body> <?php include 'con ...

javascriptphpjqueryhtmlajax

My application is experiencing issues due to a malfunction when refreshing with query parameters in Angular 2

My URL contains query parameters, and after a successful transaction that clears those parameters, pressing the back button causes them to reappear. Additionally, if I refresh the page, an illegal action occurs - the same transaction is repeated and data ...

node.jsangularexpressangular2-routing

The differences between using the opacity attribute in HTML and the opacity property

There are two distinct methods for adjusting opacity in HTML: <div opacity="0.5"></div> and <div style="opacity: 0.5;"></div> I am familiar with setting these values in JavaScript as well: div.setAttribute("opacity", 0.5); and ...

javascripthtmlcss

Ensure the header remains fixed when scrolling in an HTML page with Bootstrap

I created the following code. However, when I scroll down the table, the header disappears from view. I would like the header to always remain at the top, even when scrolling. Despite searching Google multiple times and trying various solutions, I have no ...

javascripthtmlcsstwitter-bootstrap

Preserve data even after refreshing the browser in Angular

Is there a reliable method to preserve my data after refreshing my browser? I've experimented with rxjs behavior subject, but it hasn't worked for me. I prefer not to use local/session storage due to security concerns and best practices, especia ...

angular