# Centering repeating group elements **URL:** \ **Category:** Tips\ **Created:** [March 11, 2019, 12:05pm UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683 "2019-03-11T12:05:52Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![blastercbi](https://avatars.discourse-cdn.com/v4/letter/b/ec9cab/32.png) [@blastercbi](https://forum.bubble.io/u/blastercbi)\ **Post date:** [March 11, 2019, 12:05pm UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/1 "2019-03-11T12:05:52Z")
The problem is clearly described here: [http://forum.bubble.io/t/please-make-cols-center-in-horz-repeating-groups](http://forum.bubble.io/t/please-make-cols-center-in-horz-repeating-groups) I’ve been struggling with this important missing feature, I’ve seen a lot of posts asking for this, what worked for me is using the Toolbox plugin and running the following code when page is loaded: $( “div.RepeatingGroup \> div.rows” ).css({ “display”: “flex”, “flex-wrap”: “wrap”, “justify-content”: “center” }); This will change justification of all repeating groups on page. If you only want to change for one, then assign an id attribute to a specific repeating group and replace div.RepeatingGroup with #yourId. ---
**Author:** ![retronwebservices](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/retronwebservices/32/31151_2.png) [@retronwebservices](https://forum.bubble.io/u/retronwebservices)\ **Post date:** [March 11, 2019, 1:58pm UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/2 "2019-03-11T13:58:27Z")
Thanks for the tip! ---
**Author:** ![chrismoris](https://avatars.discourse-cdn.com/v4/letter/c/f19dbf/32.png) [@chrismoris](https://forum.bubble.io/u/chrismoris)\ **Post date:** [March 20, 2020, 3:34am UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/3 "2020-03-20T03:34:04Z")
@blastercbi Hey there, I tried this with the plugin but was not getting the repeating group to center. Is there something I am missing: - Installed plugin - Copied your code exactly into a page load Javascript workflow - No modifications to the code I have a bunch of different visibility states, but it is all a single page application. I tried to also trigger the script later on (during that state’s workflow) but no successes. ---
**Author:** ![draked123](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/draked123/32/262422_2.png) [@draked123](https://forum.bubble.io/u/draked123)\ **Post date:** [April 7, 2020, 6:01pm UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/4 "2020-04-07T18:01:46Z")
Im also unable to get this to properly work. If someone has a solution, please tag me! ---
**Author:** ![nickhutton13](https://avatars.discourse-cdn.com/v4/letter/n/74df32/32.png) [@nickhutton13](https://forum.bubble.io/u/nickhutton13)\ **Post date:** [March 18, 2021, 6:51am UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/5 "2021-03-18T06:51:11Z")
Hey @blastercbi , @chrismoris and @draked123 , Did anyone find a solution to this? I’ve tried running the javascript but it does nothing. My app is going to be in real danger if I can’t work it out!! ---
**Author:** ![Christophe\_HK](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Christophe\_HK](https://forum.bubble.io/u/Christophe_HK)\ **Post date:** [March 18, 2021, 11:33pm UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/6 "2021-03-18T23:33:53Z")
Try to add an ID to your RG element, example : myrg Then add a HTML element in your page, it must be visible but you cs’ set it 1px width / 1mx height a d put it at the x=0 and y=-1 position on your page. In the html element, add the following to add the css rule to center the RG : ``` ``` Give a try and let us know. ---
**Author:** ![nickhutton13](https://avatars.discourse-cdn.com/v4/letter/n/74df32/32.png) [@nickhutton13](https://forum.bubble.io/u/nickhutton13)\ **Post date:** [March 18, 2021, 11:52pm UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/7 "2021-03-18T23:52:59Z")
Thanks for getting back to me @Christophe_HK. That certainly helped, in that it centred it on the desktop width. But it still hugged the left when I shrunk it down to the mobile width. Do you know why that would be? I didn’t full understand what you meant by “setting it 1px width and height and putting it at x=0, y=-1” comment so maybe to do with that? ---
**Author:** ![pipe13](https://avatars.discourse-cdn.com/v4/letter/p/b487fb/32.png) [@pipe13](https://forum.bubble.io/u/pipe13)\ **Post date:** [March 19, 2021, 12:19am UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/9 "2021-03-19T00:19:36Z")
thanks brother!! \<3 ---
**Author:** ![nickhutton13](https://avatars.discourse-cdn.com/v4/letter/n/74df32/32.png) [@nickhutton13](https://forum.bubble.io/u/nickhutton13)\ **Post date:** [March 19, 2021, 2:23am UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/10 "2021-03-19T02:23:28Z")
Actually, I had an element hiding in there which was stuffing me up. Fixed that and it works beautifully 🙂 Thanks mate! ---
**Author:** ![keyhanimo](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/keyhanimo/32/89566_2.png) [@keyhanimo](https://forum.bubble.io/u/keyhanimo)\ **Post date:** [April 16, 2021, 5:32pm UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/11 "2021-04-16T17:32:25Z")
> [@Christophe\_HK](#): > > ```auto > > > ``` Thank you so much for this! Solved a problem I’ve been trying to solve for weeks. ---
**Author:** ![Christophe\_HK](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Christophe\_HK](https://forum.bubble.io/u/Christophe_HK)\ **Post date:** [April 16, 2021, 6:06pm UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/12 "2021-04-16T18:06:12Z")
Enjoy 🤘🏻 ---
**Author:** ![julienallard1](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@julienallard1](https://forum.bubble.io/u/julienallard1)\ **Post date:** [April 16, 2021, 6:28pm UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/13 "2021-04-16T18:28:21Z")
Very neat solution! If I may add my 2 cents, using ID is fine as long as the repeating group isn’t nested in another one because this would generate multiple RG with same ID which is not supposed… Using [Classify plugin](http://forum.bubble.io/t/classify-a-tiny-plugin-that-brings-css-power-to-bubble/67741), it’s possible to set CSS classes instead. The code would become: > [@](#): > > ```auto > > > ``` ---
**Author:** ![Christophe\_HK](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Christophe\_HK](https://forum.bubble.io/u/Christophe_HK)\ **Post date:** [April 16, 2021, 8:48pm UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/14 "2021-04-16T20:48:18Z")
Much better indeed @julienallard1! 👍🏻 ---
**Author:** ![Christophe\_HK](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Christophe\_HK](https://forum.bubble.io/u/Christophe_HK)\ **Post date:** [April 16, 2021, 8:51pm UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/15 "2021-04-16T20:51:34Z")
Classify plugin is an awesome plugin, one of the best for any Bubble app. But to be honest, for the front part of my apps, I’m now using a single html element, containing components (mainly bootstrap 4). The page load decreased from 7 or 8 seconds to less than 4 seconds. But what’s good is that into the html element, I take benefits of the Bubble’s dynamic values. Powerful! ---
**Author:** ![julienallard1](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@julienallard1](https://forum.bubble.io/u/julienallard1)\ **Post date:** [April 17, 2021, 2:24pm UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/16 "2021-04-17T14:24:01Z")
This is awesome. I once really considered doing just that; giving up on Bubble’s element and coding my own HTML with a grid responsive design. But while, like you said, we can insert Bubble’s dynamic data directly in the HTML, we loose the ability to trigger workflows from it and we can’t read the input’s like `this dropdown's value`. The only efficient way that I know is by using _Javascript to Bubble_, but this add another level of complexity… How do you manage to send data from the front-end back into “Bubble’s world”? ---
**Author:** ![Christophe\_HK](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Christophe\_HK](https://forum.bubble.io/u/Christophe_HK)\ **Post date:** [April 17, 2021, 2:34pm UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/17 "2021-04-17T14:34:40Z")
![screenshot](https://us1.discourse-cdn.com/bubble/original/3X/3/a/3a6a97cbff7ebb71ee0b27cb27d46a68c10dd69f.jpeg) 🙂 ---
**Author:** ![italocp](https://avatars.discourse-cdn.com/v4/letter/i/b782af/32.png) [@italocp](https://forum.bubble.io/u/italocp)\ **Post date:** [April 18, 2021, 6:25am UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/18 "2021-04-18T06:25:08Z")
Just wanted to share the following: I found a way to center the RG using CSS tools. Here’s what I did: 1 - Added the Plugin CSS Tools by Zeroqode; 2 - Placed a CSS Tools element on the page; 3 - On the page upload workflow, I added the element action: “Add Custom Style to Head”, on CSS element on the page: 4 - On the CSS field I added: .rows { display: flex; flex-wrap: wrap; justify-content: center; } This changed the class “rows” of the repeating groups on my page, thus centering the last row of my RG, with the “Full List” layout style. Hope it helps someone out there. ---
**Author:** ![romain.boyer](https://avatars.discourse-cdn.com/v4/letter/r/3bc359/32.png) [@romain.boyer](https://forum.bubble.io/u/romain.boyer)\ **Post date:** [April 30, 2021, 2:43pm UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/19 "2021-04-30T14:43:47Z")
Following previous solution by _italocp_ (thanks!), I had this working, just 2 elements were missing for my horizontal repeating group to make it work because forced width and floating were impeaching this to work: ``` .rows { display: flex; flex-wrap: wrap; justify-content: center; float:none!important; width:auto!important; } ``` ---
**Author:** ![clubedotas](https://avatars.discourse-cdn.com/v4/letter/c/4da419/32.png) [@clubedotas](https://forum.bubble.io/u/clubedotas)\ **Post date:** [December 25, 2021, 2:24pm UTC](https://forum.bubble.io/t/centering-repeating-group-elements/51683/20 "2021-12-25T14:24:28Z")
Olá bom dia, criei uma solução que me ajuda a centralizar de forma simples sem plugin: Obs: _Testei apenas no modo responsivo_ 1º Centralize **groupA** **groupA** width-min: 45px width-max:inf 2º Dentro do **groupA** , coloque um **RepeatingGroupA** e tambem centralize. **RepeatingGroupA** width-min: 45% width-max:inf rows 1 set-fixed-num-cols: no min-width of col:40px fit-width-content: yes 3º A imagem abaixo é o RepeatingGroupA, usei o [fa]heart-o[/fa], apenas para ilustrar o conteúdo ![Captura de tela 2021-12-25 112329](https://us1.discourse-cdn.com/bubble/original/3X/4/b/4bd07d4d4d5f1ee0197937b3592ae00eac88356a.png)