How can I align the bulleted content to the bottom and the image to the top in Webflow?
TL;DR
- Wrap the image and bulleted list in a vertical Flex container with Justify Content set to Space Between to align the image at the top and bullets at the bottom.
- Alternatively, use a Grid layout with two rows and align the image to the top of row 1 and the list to the bottom of row 2.
To align bulleted content to the bottom and an image to the top in Webflow, you need to structure your layout using Flexbox or Grid and apply the appropriate alignment settings.
1. Create a Container with Flexbox or Grid Layout
- Wrap your image and the bulleted list in a parent container (e.g., a Div Block).
- Set the parent container's display to Flex (Vertical) or CSS Grid, depending on your layout preference.
2. Use Vertical Flex Direction and Justify Content
- If you choose Flexbox, do the following:
- Set the container's Display to Flex.
- Set Flex Direction to Vertical (Column).
- Set Justify Content to Space Between.
- This pushes the first child (image) to the top and the second child (bulleted list) to the bottom.
3. Place Elements in the Correct Order
- Ensure the image comes first in the structure, followed by the bulleted list.
- This vertical placement along with "Space Between" distributes the content as desired.
4. Adjust Sizing as Needed
- Give the container a fixed height or use a relative unit (like 100% or VH) to control how much vertical space it occupies.
- Set the children's width or alignment individually if needed using Align Self or Text Align.
5. Optional: Use Grid for More Control
- Set the container to Display: Grid.
- Define two rows — one for the image and one for the list.
- Assign the image to row 1 aligned top, and the list to row 2 aligned bottom using Align Self.
Summary
Use a vertical Flex container with Justify: Space Between to align the image at the top and bullets at the bottom. Alternatively, use CSS Grid with manual row placement and vertical alignment for more control.