I tried floating with CSS, changed max width, display inline block etc...even tried boostrap "float-right" classes, but I can't get icons to align horizontally...
#services i { color: rgb(0,122,123); float: right; display: inline-block; max-width: 40px; }
I must be missing something here?
Are you dragging the icon components in from the Studio tab? You should drag them so they insert immediately to the right of the first icon, and they should line up horizontally. Start a new project with no changes to the CSS and try it.
Without seeing your HTML and CSS, it's hard to diagnose why this is happening.
Can you not just put the icons in a div, give the div a class and add display: flex to the div class. Default direction is row so they should all be in a line.
I've just tried it putting 3 icons in a div and they were all in a horizontal line without any flex.
If I recall, flex is already set up automatically at the start so I don't think you "have" to give it the setting. That's most likely why you didn't have to turn the flex on, it's default now. If I recall this correctly that is lol.
Since the OP never bothered to answer PJ's original reply, we have no way to know how they added those icons. If they are in an already prebuilt component that he got from the Online Components, well there's no way to know if it was built correctly (or old code) without seeing the site or code.
Other than that, I'm "pretty sure" that it's default now without needing to set it up for Flex. But prebuilt components may not be utilizing things correctly etc.
Yeah. I think your correct Jo. So basically just a div with the icons in it.
@floydmanfloyd, A div with just images in it should line up side by side as they are not Block level items naturally and has nothing to do with Flexbox. @Jo, Bootstrap4 uses Flexbox in specific areas and is not on all possible elements. If you just add a Div you still have to enable on it Flex for it to use Flexbox methods, then any "direct" child elements in that DIV are subject to the Flexbox model.
Saj
@bruno, float properties I believe are ignored if in a Flex enabled parent element. You would have to use Flex settings to align those icons to the right. Like Printninja said, we'd have to see more for a better understanding.
It probably would work out better if you put the icons in a DIV, enabled Flex on it. Then set Justify Content to End i.e. <div class="d-flex justify-content-end">..
Saj
Actually I was able to do it in 2 ways, not sure correct or not...!
Works both ways, thanks ;)