JSON retrieved images are failing to appear in a grid layout

Hey there, I'm facing an issue with the layout of images on my website. I am fetching data from a JSON file to create a grid of images, but unfortunately, all the images are displaying in a single column instead of a grid. I am aiming for a 4 wide image grid. The CSS I am using for this section is based on the default values of Bootstrap 4.

HTML

    <div id="UHD" ng-controller="Content-folders-4K">
    <div id="UHD-frames" class="d-flex">
        <div ng-repeat="friend in UHD" class="row">
            <div id="img-frame" class="col-md-3 col-sm-6 col-xs-12">
                <a href="/4k/{{friend.name}}.html">
                    <img alt="{{friend.name}}" src="assets/images/4k-thumbs/{{friend.name}}.jpg" class="img-fluid">
                </a>
                <p class="font-weight-bold text-center">{{friend.name}}</p>
            </div>
        </div>
    </div>
</div>

Current result https://i.sstatic.net/QnvVJ.png

Expected (simulated) result https://i.sstatic.net/XLFFm.png

cssjsonbootstrap-4

Answer №1

It appears that the Grid is missing the necessary container and row classes. Here is an example of how to properly wrap the Grid:

<div class="container"> 
    <div class="row">
      <div class="col"> 1 of 2 </div>         
      <div class="col"> 2 of 2 </div> 
    </div>
</div>

Make sure to wrap Your column div with the container and row classes for proper alignment.

Answer №2

It is recommended to loop through the columns instead of the rows...

<div id="UHD" ng-controller="Content-folders-4K">
    <div id="UHD-frames" class="d-flex">
        <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-12" ng-repeat="friend in UHD">
                <a href="/4k/{{friend.name}}.html">
                    <img alt="{{friend.name}}" src="assets/images/4k-thumbs/{{friend.name}}.jpg" class="img-fluid">
                </a>
                <p class="font-weight-bold text-center">{{friend.name}}</p>
            </div>
        </div>
    </div>
</div>

Answer №3

Here is the snippet of code that I used to make it function properly. 

<div id="UHD" ng-controller="Content-folders-4K" class="row">
    <div ng-repeat="friend in UHD" class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <a href="{{friend.link}}">
            <div id="tiles" class="tiles">
                <img src="thumbs/111/{{friend.name}}.png" alt="" />
        </a>
        <p class="text-center">{{friend.name}}</p>
    </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 initial transition in offcanvas on bootstrap 5 is not appearing when a placement is dynamically added

I am currently working on triggering an Offcanvas with JS and making the placement configurable. The issue arises when attempting to dynamically set the offcanvas-end class to the offcanvas element, as it does not transition smoothly the first time it is t ...

javascriptcsstwitter-bootstrapcss-animationsbootstrap-5

Feature for jotting down notes, creating a break between lines without any information present

I'm currently working on implementing a note-taking feature for my web application. However, I have encountered two issues: Firstly, I am struggling to identify line breaks within the text. While I can hardcode text with line breaks, when a user clic ...

javascriptjqueryhtmlcssbootstrap-4

Angular 9 - Auto-adjust the height of the text box as the user types, returning to its original size when no longer in focus

I need a solution where an input field's height adjusts to display the user's entry, then returns to normal size when they click away. It should function similar to this example image: https://i.stack.imgur.com/yKcik.png Once the user enters th ...

htmlcssangularless

What is the method for excluding POJO annotations when utilizing the Jackson ObjectMapper?

I have a POJO which includes Jackson annotations. public class Sample{ private String property1; @JsonIgnore private String property2; //...setters getters } When using the Jackson library for automarshalling ...

javajsonjackson

What is the most effective way to extract a particular element using Jsoup?

Is there a way to specifically extract the full names from this snippet of HTML code? I am only interested in retrieving the following information: Full name1 Full name2 Full name3 <div class="readerP"> ...

androidjsonparsinghtml-parsingjsoup

What is the method for determining the length of an array in nlohmann's JSON library?

I am currently utilizing the nlohmann/json library and I'm looking to determine the length of a JSON array. Let's consider the following array: [ "test", "test2" ] My objective is to retrieve the length of this array, which in this case would b ...

c++jsonnlohmann-json

Mastering the art of creating this particular design with CSS

I'm currently working on a web design project and I'm facing some challenges. In the past, I used tables to align elements on the page, but I know that's outdated now in 2011. CSS is the way to go these days, however, I'm struggling to ...

css

Utilize React to extract a JSON object nested within an array and then implement a dropdown sorting feature for the JSON

Can anyone help me figure out how to extract the eventId and title from the "currentSchedule" array nested within the main "response" array? I have successfully looped through all the data in the "response" array dynamically, ...

arraysjsonreactjs

Creating engaging animations for variable content in Safari using CSS

This multi-step wizard is designed to smoothly transition between its 3 steps. Upon clicking the "next" button in step 1, the content is pushed down to reveal step 2. Similarly, when advancing from step 2 to step 3, the contents of both previous steps are ...

htmlcsssafari

Modifying the color of Bootstrap icons

When I use PHP code to print this icon into a table, it looks like this: echo '<button Onclick="" style="border: none; background: none; color:green"><a title="Reenviar" data-toggle="tooltip"><i class="material-icons">&#xE0BE;&l ...

htmlbootstrap-4

Unable to upload a file to an email using the mandrillapp JSON API

Having trouble sending an email with an attached document via the Mandrillapp JSON API using the method send-template in JavaScript. The email sends successfully, including images attached to the images array. However, documents sent in the attachements ar ...

javascriptjsonemailmandrill

How can I make <p> elements change color when scrolling?

My Goal https://i.sstatic.net/JbdXR.gif I aim to bring attention to the <p> element as the user scrolls on the page. Initially, the opacity is set to 0.3, but I want it to change to 1 gradually as the user scrolls down. My Attempt window.o ...

javascriptjqueryhtmlcss

Are there any methods available for capturing JSON data serverlessly using jQuery?

Currently, I am developing a serverless web application using JS + jQuery, CSS, and HTML stored in a flat file. My goal is to retrieve JSON data by making a GET request. Most methods I have come across involve AJAX techniques that necessitate the presence ...

jqueryajaxjson

Parsing JSON data into a customized ArrayList in Android

My goal is to extract JSON data into a customized ArrayList containing title and description parameters. Below is an example of the JSON code: [ { "title" : "title1", "description" : "desc1" }, { "title" : "title2", ...

androidjson

Unable to interact with menu in Internet Explorer

I am facing an issue with my code that should create a dropdown menu when hovered on, but it is not working properly in Internet Explorer. Instead of dropping down the menu, IE pushes it to the right, making it impossible to interact with. Surprisingly, th ...

htmlcssdrop-down-menu

The resizing of the window does not occur when a scrollbar is automatically added in IE11

I encountered an issue with my Angular project where the view resizes properly in Chrome and Firefox, but not in IE 11. When the scrollbar appears, some components get covered by the scrollbar. Here is the CSS for the menu: #menu-principal .navbar-lower ...

cssangularjshtml

jQuery accordion section refuses to collapse

In order to achieve the desired outcome, each Section should initially appear in a collapsed state. Panel 0 and 2 start off collapsed, however, panel 1 does not but can be collapsed upon clicking. Additionally, Panel 1 incorporates an iframe that displays ...

jqueryhtmlcssjquery-uitwitter-bootstrap-3

Combining two JSON objects into a single JSON object using Jquery/JavaScript

I need to combine two JSON objects into one, here are my current JSON objects: var obj_1 = { "?xml": {"version": "1.0", "encoding": "utf-8"}, "Template": { "Name": "Capital Goods-Tool and Die Maker L5 Set1", "Section": [{ "Id": "Section_ ...

javascriptjqueryjson

Concealing GridView columns in ASP.NET using Bootstrap 4

Having some trouble with a boundfield that is showing an unwanted border in the column when the visible parameter "d-xl-block" is used. Any ideas on how to fix this issue? <asp:BoundField DataField="casZaciatku" ItemStyle-CssClass="d-none d-xl-block al ...

asp.netgridviewbootstrap-4

Parsing JSON data to extract values stored in a two-dimensional array

In order to develop a basic version of Tic Tac Toe, I decided to store game data in a JSON file. Here is an example of how the file is structured: [ { "turn": "x", "board": [ [ " ...

javascriptarraysnode.jsjson