DIV boxes arrange at random

Bootstrap Studio Help
1

Hello,
I have a landing page with a container which contains 15 div boxes. Now I would like to have random sorting of this boxes ever time the website is loaded.

Has anyone a idea how I can do it?

Thanks a lot for helpling
Bert

2

I would suggest searching places or posting in places like Stack Overflow and similar sites. This forum is more on the order of how to use the software. For detailed help like this you may want to hire a designer/developer with the knowledge needed to add that feature to your website if you’re unable to find an answer.

There is however, a forum here called Webdesign Help which would be a more appropriate place for a question like this, but this is something that is going to take some good knowledge, and asking for something like this to be given to you free of charge is a bit over the top in my opinion. Most of the users here are web designers/developers and do so for a living so compensation should be considered. Just my 10 cents.

3

Quite easy to do with jQuery

Example: https://snippets.bss.design

Just give each div a class of random-column add the following js

var cards = $(".random-column");
for(var i = 0; i < cards.length; i++){
    var target = Math.floor(Math.random() * cards.length -1) + 1;
    var target2 = Math.floor(Math.random() * cards.length -1) +1;
    cards.eq(target).before(cards.eq(target2));
}
1 Like
4

Thanks a lot, richards!!
In between I found this by myself and can recommend this solution.

5

If you use jQuery just to make your columns random when the page loads, maybe you should try with vanilla javascript like this

(function() {
	'use strict';
	// the row has ID="shuffle"
	const shuffled = document.querySelector('div#shuffle.row'),
		// the columns has class="random"
		myShuffle = document.querySelectorAll('.random'),
		length = myShuffle.length;
	myShuffle.forEach(() => {
		let target = Math.floor(Math.random() * length - 1) + 1;
		let target2 = Math.floor(Math.random() * length - 1) + 1;
		shuffled.insertBefore(myShuffle[target], myShuffle[target2]);
	});
})();

then there is no need for jQuery