My smart-scrolling list of cards uses the card-columns style, but I find it frustrating that they are ordered top to bottom like this:
1 4 7
2 5 8
3 6 9
This vertical ordering becomes impractical when dealing with a large number of items. When I have 50 items, some of the less important ones end up at the top!
I've experimented with flexbox variations, but none seem to work correctly for achieving horizontal ordering. Has anyone successfully implemented horizontal ordering?
Discover a creative solution here (not specifically for bootstrap) to create a masonry layout, either vertical or horizontal, using CSS
I will experiment with this and provide feedback on how it can be integrated with bootstrap 4.
For horizontal arrangement:
.masonry {
display: flex;
flex-flow: row wrap;
margin-left: -8px; /* Adjusting for the space between items */
}
.masonry-brick {
flex: auto;
height: 250px;
min-width: 150px;
margin: 0 8px 8px 0; /* Creating some space between items */
}
.masonry-brick {
&:nth-child(4n+1){
width: 250px;
}
&:nth-child(4n+2){
width: 325px;
}
&:nth-child(4n+3){
width: 180px;
}
&:nth-child(4n+4){
width: 380px;
}
}
For vertical arrangement:
.masonry {
display: flex;
flex-flow: column wrap;
max-height: 800px;
margin-left: -8px; /* Adjusting for the space between items */
}
.masonry-brick {
margin: 0 8px 8px 0; /* Creating some space between items */
}
According to the documentation, the CSS columns are ordered from top to bottom, then left to right resulting in the following layout:
1 3 5
2 4 6
It is not possible to change the order of CSS columns. It is recommended to explore alternative solutions like Masonry instead. Visit https://github.com/twbs/bootstrap/issues/17882 for more information.
The solution that made a difference for me was incorporating the "bricklayer" plugin.
Is there a way to hide all div elements with similar id if none of them are clicked on? Currently, my code only works for the first div because I am using index[0] to retrieve the id. How can I make it work for all ids? Below is the code snippet: $(win ...
If I want to display the same div in different positions dynamically on my page, how can I achieve that? My page has a table with two rows and two columns, each containing an Embed button. When these buttons are clicked, a div is shown with a list of site ...
I received this outcome: Content duplicated but not cloned as a card element Below is the code snippet <script setup> import { ref } from 'vue'; defineProps({ project: String, }); const projectList = ref([ { img: './src/asse ...
I have a navigation bar icon that links to an admin route. I want this icon to change its appearance when on that specific route. To achieve this, I can simply replace the mdi-settings-outline class with mdi-settings, displaying a filled version of the sam ...
I currently have a ready-made form that is constructed using html, css, jquery, and ajax. It's basically copied and pasted onto my contact page for now. This is the code I include before the html tag on the contact.php page. <?php session_name(" ...
In the process of developing an angular app, I require a dock-able panel. After researching available controls online, I found them difficult to use and they compromised our screen layout. As a result, I am considering building a custom dock panel from s ...
Is there a way to embed a local asciinema session into an html file? Here is how my directory is structured: $ tree . ├── asciinema │ └── demo.cast ├── css │ └── asciinema-player.css ├── index.html ├── js │ ...
I am currently working on a carousel where the center slide needs to expand to display additional content. I have set up a working example in this codesandbox. The main criteria for this project are: Non-centered slides will be minimized to show only the ...
Currently, I am trying to adjust the width of the :before pseudo-element in order to match it with the dimensions of the element itself, specifically an anchor tag. This is part of my goal to create an overlay that completely covers the entire element. As ...
Trying to create a single line clickable section with a play button, text, and YouTube video thumbnail. It's not rendering correctly even though the container is set as flex with row direction. Custom play button and properly sized thumbnail are in p ...
I've been working on a navbar design and I'm having trouble getting the hover effect to work on the links. Specifically, I am trying to add a transform property to the after element of the links but it doesn't seem to be taking effect. #navb ...
I seem to be encountering an issue with the auto play functionality of the owl carousel. I have uploaded and included all the necessary files, and it is functioning properly when initially loaded. The auto play feature works perfectly, but when I hover ove ...
How can I easily transform tabular data into thumbnails with the click of a button? I need a 2-view system that switches between table and thumbnail views without including image thumbnails. I welcome any creative suggestions! :) Examples: ...
Could someone assist me with removing the excessive white space between these two images? Each image is contained within its own respective div, with layer effects applied when hovered over. I've attempted changing the display to inline-block and sett ...
Help needed with website responsiveness issue! The site works fine on most screen sizes, but when it reaches around 414px in width, the intro section becomes too wide for the screen. Any ideas on what could be causing this problem? html: <nav id="m ...
I am working with an svg that contains various paths, ellipses, and shapes each with different fill colors such as red and blue. When I combine them into a sprite, I want to be able to change the fill color on hover using CSS. Typically, I would remove the ...
<ion-item ng-bind-html="renderHtml(word[key])"> </ion-item> When referring to word[key], it represents: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> This is the CSS being u ...
I am facing an issue with using CSS to include a background image for the layer, but it doesn't seem to be working correctly... The CSS code snippet is as follows: header { background-image: url("boisko.jpg"); background-repeat: no-repeat; background ...
While trying to display my table in Chrome, I noticed that the cell sizes of the table change when zooming in. Additionally, the table is rendered incorrectly in other browsers like IE and Firefox. I attempted adjusting the sizes to percentage values but i ...
Currently, I am working on a project that requires my navigation bar to be scaled down to a hamburger menu for mobile view. I have managed to do most of it, but for some reason, the navigation is not collapsing within the hamburger bar. I have been tweakin ...