How can I align the bulleted content to the bottom and the image to the top in Webflow?
TL;DR
- Wrap the image and bullet list in a parent container with Flexbox set to vertical direction.
- Set Justify to Space Between to align the image at the top and bullet list at the bottom, and apply a fixed height if needed.
To align bulleted content to the bottom and an image to the top within the same section or container in Webflow, you need to structure your layout using Flexbox.
1. Create the Correct Structure
- Wrap the image and bullet list in a common parent container (e.g., a
Div Block). - This parent container will control the vertical distribution of these two elements.
2. Apply Flexbox on the Parent Container
- Select the parent
Div Block. - In the Style panel, set Display to Flex.
- Set Flex Direction to Vertical (Column).
- Set Justify to Space Between.
- This aligns the image at the top and the bullet list at the bottom of the parent container.
- Set Align Items as needed (usually “Start” for left-aligning content inside the column).
3. Optional: Set Fixed Height on Parent
- For consistent spacing, set a fixed height or min-height (e.g., 500px) on the parent
Div Block. - This ensures the “space between” logic takes effect visibly.
4. Style Your Bullet List
- Webflow doesn't allow native
ul/liediting in the Designer. - Use a Rich Text Block or custom divs with text and bullet icons if you need complete control.
- Alternatively, embed a standard
ulwith bullets using Custom Code or from CMS if necessary.
Summary
Use a vertical Flexbox on a parent container with Justify: Space Between to align the image to the top and the bulleted list to the bottom. Add a fixed height to the parent if needed to enforce spacing.