How can I align the bulleted content to the bottom and the image to the top in Webflow?
TL;DR
- Set the parent container to Flex display with column direction and justify set to space-between.
- Place the image as the first child and the bulleted list as the second; adjust padding, margin, and min-height as needed for responsive layout.
To align bulleted content to the bottom and an image to the top within the same section or container in Webflow, use Flexbox layout options effectively.
1. Set Up a Flexbox Container
- Select the parent container that holds both the image and the bulleted list.
- Go to the Style panel and set Display: Flex.
- Set Flex Direction: Column if the image and bullets are stacked vertically.
- Set Justify: Space Between to push the image to the top and the bullets to the bottom.
- Keep Align: Stretch (or change depending on horizontal alignment preference).
2. Add Image and Bulleted List
- Add an Image element and place it as the first child inside the flex container.
- Add a Rich Text or Paragraph Block with your bulleted list as the second child.
3. Style for Responsive Control
- Ensure both children (image and list) do not have fixed heights unless necessary.
- Use padding or margin to fine-tune spacing if needed.
- Consider using Min Height on the parent container (e.g., min-height: 100vh) to control vertical space distribution.
4. Optional: Custom Bullet Styling
- To style bullets more precisely, use List elements with List Items rather than a Rich Text block.
Summary
Use a Flex container with column direction and ‘space-between’ justification to align your image at the top and your bulleted content at the bottom. This method ensures both elements stay anchored in place, even as content scales.
