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

Using AngularFire2 to manage your data services?

After diving into the resources provided by Angular.io and the Git Docs for AngularFire2, I decided to experiment with a more efficient approach. It seems that creating a service is recommended when working with the same data across different components in ...

angulartypescriptfirebasedataservice

What is the method to retrieve the selected value from a drop-down menu that is connected to JSON keys?

I am just starting to learn AngularJS and I need help with binding column names (keys from key-value pairs) to a select list. I want to be able to retrieve the key name when the selection in the select list is changed. The select list displays: name, snip ...

javascriptjqueryhtmljsonangularjs

Customizing Each Menu Item in WordPress

I am currently working on customizing my WordPress Menu. My goal is to assign a unique color to each menu item, while ensuring that the background color of child elements within pages and posts matches the parent text color. Specifically, I envision the f ...

csswordpressmenu

The border on the right side of the accordion does not continue down

After creating an HTML page with an accordion in one div and a menu in another, I added a simple border styling to the right side of the menu using CSS properties like height, border-right-width, border-right-style, and border-right-color. height:100%; b ...

jquerycssaccordion

The filter pipe encounters an issue where it shows an error message indicating that the data is undefined once the service returns the

I have encountered an issue while using Angular 6 and creating a custom filter pipe. It was working perfectly fine with static data, but when I started fetching data from a service, it threw an error saying "Cannot read property toLowerCase of null." Below ...

angular

What is the process for transforming a nested dictionary in JSON into a nested array in AngularJS?

I am looking to create a form that can extract field values from existing JSON data. The JSON I have is nested with dictionary structures, but I would like to convert them into arrays. Is there a way to write a recursive function that can retrieve the key ...

javascriptarraysangulardictionarynested

What is the reason behind Angular 2's choice to implement the .ts file extension?

What is the significance of using the .ts file extension in Angular 2? ...

angulartypescriptfile-type

Once the database fetches and displays 500 results, the HTML/CSS formatting begins to

On my local webserver, I have a page running off SQLite as its database. Since it is used locally and loads results quickly, displaying all of them on one page isn't a concern. However, I'm facing an issue where the formatting goes awry after 500 ...

phphtmlcsssqlite

Removing a background by linking a CSS file

Issue Resolved: I have found the solution. The problem was that the css document still contained html tags. Thank you to everyone who provided assistance. While designing a website using css, I encountered a situation where the site worked perfectly when ...

htmlcssfilehyperlinkinclude

Can a link be stored in a table using PHP?

I need assistance in organizing a page with a sidebar containing about 20 links as the code appears messy. Is there a way to store all <a href=.... in a table, an array, or another method for better organization? If anyone could provide an example, it ...

phpjqueryhtmlarrays

Is it possible for an Angular2 HTTP request to retrieve the response body as binary data?

I'm facing an issue with a URL that returns HTML content with charset=iso-8859-7. Angular's HTTP request converts the data to utf8 by default, making it difficult for me to encode them back in iso-8859-7 properly. Upon researching, I discovered t ...

angularhttpencodingcharacter-encodingionic2

An issue has been detected by Zone.js where the ZoneAwarePromise `(window|global).Promise` has been unexpectedly replaced

I have recently integrated the Angular2 quickstart code into my existing webpack setup, but I seem to be facing an issue where something is interfering with the promise from zone.js, resulting in an error. Based on my research on Stack Overflow, it appears ...

javascriptangulartypescriptwebpack

Navigate to a different page using a sliding transition

Currently, I am working on a project using jquery-mobile where I need to redirect to another page after clicking on an image with a delay. This is what I have done so far: setTimeout(function(){ window.location.href = "myPage.html"; }, 1000); While t ...

jqueryhtmljquery-mobile

Troubleshoot: Angular hide/show feature malfunctioning

I am facing an issue where clicking on one parent element causes all parent elements to show or hide their child elements accordingly. I am relatively new to Angular 2 and would appreciate any recommendations. Below, you can see the code for the component ...

angularangular-components

Angular - CSS Grid - Positioning columns based on their index values

My goal is to create a CSS grid with 4 columns and infinite rows. Specifically, I want the text-align property on the first column to be 'start', the middle two columns to be 'center', and the last column to be 'end'. The cont ...

htmlcssangular

What is the best way to incorporate the "child_process" node module into an Angular application?

Trying to execute a shell script in my Angular application has been quite the challenge. I came across the "child process" node library that might be able to help me with this task. However, every attempt to import the library led me to the error message: ...

javascriptnode.jsangularshellelectron

Angular Universal causes SASS imports to malfunction

Check out this sample app that you can download to see the issue in action: https://github.com/chrillewoodz/ng-boilerplate/tree/universal I am currently working on implementing angular universal, but I'm encountering an error with a SCSS import in o ...

cssangularsassangular-universal

Tips for perfectly centering a SPAN element within a DIV both vertically and horizontally

Here is an example of my HTML code: <div id="slideClick"> <div style="padding: 0; margin: 0 auto; width: 100%; height: 100%; text-align: center; border: 1px solid blue;"> <span class="sideMsg">MESSAGES</span> </d ...

htmlcss

The value of the innermost dropdown in the AngularJS Cascading dropdown is not being retrieved when it is selected

CSS <div ng-controller="DynamicCtrl"> <h1>Dynamic - Focused</h1> <p>This method works well when data is constantly changing</p> <div> Category: <select id="category" ng-model="items" ng-options="category ...

jqueryhtmlangularjs

Eliminate certain inline styles using jQuery

I am facing an issue with an asp menu I am using. It is automatically inserting style="width:3px;" into my menu table tds, creating an unsightly gap between my tabs. Instead of asking our developer to customize the menu just to fix this cosmetic flaw, I am ...

jquerycssinline-styles