I am working on my Angular 8 project and I have a requirement to order an array in the following format:
1 4 7 10
2 5 8 11
3 6 9 12
This array is generated from a GET call, so the number of items can vary. It needs to be responsive in design.
I am using Bootstrap 4.x and attempting to achieve this layout with the flex-direction property, but I seem to be missing something.
Is there a simple solution for accomplishing this?
Using bootstrap's grid and flex utility classes alone may not provide a complete solution for your specific requirement. You will likely need to define a maximum height for a container in order to properly wrap the child elements being repeated.
However, I can offer a quick alternative method that achieves the same result. If desired, we can translate some of it into bootstrap utility classes and add a makeshift way to constrain the container for a more bootstrap-like approach...
.container {
height: 11rem;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.container>* {
flex: 1 1 auto;
}
.container div {
height: 1rem;
max-height: 1rem;
border: lightgray 1px solid;
padding: 1rem;
text-align: center;
margin: .25rem;
}<div class="container">
<!-- These would be the divs you repeat with your xhr -->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
</div>My go-to solution is utilizing the column-count: 3 property, and for ensuring responsiveness, I dynamically adjust the column count according to the screen dimensions effortlessly.
By implementing column count, there’s no need to define height or additional css properties; just a single line of css does the trick.
When using react-boostrap, the default behavior is to include the classes card-title and h5 in a <Card.Title> Foo </Card.Title> tag. Is there a way to change or substitute the h5 element, for example with h4? ...
Struggling to build my own simple image slider using javascript and it's not cooperating. I need it to cycle through three images. Check out my code: var counter = 1; setInterval(function animate() { var slideshows = document.getElementsByClassName ...
My HTML code here retrieves questions from a database and displays them based on the question number. <h4>{{indexOfelement+1}}</h4> In my CSS, I need to style the questions as follows: How can I achieve this? Each question ...
Encountering a rendering issue in Safari with 180deg rotated elements. Two examples highlight the problem (tested on Safari 9.1): Odd width problem. The bottom element shifts to the right initially, and further on transition. Even width problem. It appea ...
I recently attempted to incorporate a CSS animated background into my project. Here is how it currently looks: The particle effect hovers above the menu list (which currently just says "test"). The CSS code for my particles is as follows: .circles { pos ...
Despite using the "dancing script" Google webfont and adding it through @font-face, font-family, I am unable to see it in the browser. I would like to know how to determine which fonts are correctly uploaded and rendering properly while viewing a website ...
After completing the main page of my website, I encountered an issue with the font imported from Google. Surprisingly, it displays perfectly when viewed locally but does not show up once uploaded to my web server. Could there be a compatibility issue? For ...
Looking to create an email send function in a pop-up on my website that can be accessed via the following link: The issue I'm facing is that while it redirects perfectly to the thank you message, the PHP implementation does not seem to work after the ...
I am utilizing an IosSlider that is functioning properly, but I am looking to enhance it by adding opacity to all images except for the selected image. This adjustment will make the selected image stand out more and enable users to focus on one image at a ...
When the button is clicked for the first time in the code snippet below, all divs except for the red one should fade out. With each subsequent click, the opacity of the next div with a higher stack order should be set to 1. Everything works fine until the ...
I am looking to create two div elements with 100% height. The parent div should display an image and adjust its size automatically. The child div should act as a color filter and maintain the same size as the parent div even when the page is resized. I ...
Is it possible for the user to input their name and have it appear on the screen once they click the save button? I am using Mantine design framework and want to utilize pseudo classes. However, styling two classes at once seems tricky in Mantine compared ...
Hello there, I am currently in the process of creating my own portfolio. I have a brief introduction that I would like to display next to an image of myself, with the image positioned on the right side. I have a div called "container" which contains anoth ...
Creating personal and small business websites is relatively easy, but when it comes to developing new sites, portals, and e-commerce platforms with a large amount of content on each page, it can be more challenging. What strategies do you use to maintain ...
I followed a tutorial to create a responsive navigation menu that was working perfectly here: After adding a logo and some additional elements, I noticed that the hover effect was missing when the media size changes, which can be seen here: I suspect the ...
const express = require("express"); const app = express(); app.use(express.static("public")); var dirname = __dirname; app.get("/:lang/:app",function(req,res){ console.log(req.params.lang + " " + req.params.app); ...
Exploring a CSS Show/Hide functionality using radio buttons is my current challenge. The snippet below demonstrates how smoothly it works. .refusal, .acceptance { display: none; } input#refusal:checked~.refusal { display: block; } input#acceptanc ...
Hey everyone, I could use some assistance. I'm trying to execute multiple events with a single click. Currently, I can change the image in my gallery on click, but I also want to add text labels corresponding to each image. Whenever I click on a diffe ...
Is there a way to apply the cursor:pointer style to checkboxes and their labels, but only for those that are not disabled? This is the code snippet I am currently using: <label> <input type="checkbox" ...more attributes... ...
Is it possible to adjust the size of a <path> to fit a specific px dimension by simply altering the attributes of the path itself? Within an SVG, I have a carrot symbol represented by a <path>. <svg height="600" width="400"> <p ...