Question 303267 in CSS Question posted in
Some basic documentation can be found here.

Css – Push Button to the bottom of container (justify-self-end Not working)

I want to push the button to the end of the flex container

Components Code

<div className="group flex flex-col gap-4 rounded-2xl bg-brand-white p-4 shadow-card">
    <div className="relative overflow-hidden rounded-2xl">
      { ...JSX }
    </div>

    <p className="text-brand-black/80">{shortDescription}</p>
    <Button
      as={Link}
      href={link}
      variant="sm-inverted"
      className="w-fit justify-self-end"
    >
      Learn More
    </Button>
  </div>

enter image description here

justify-self-end is not working and self end pushes the button to the right

Tags:

2

Answers


  1. 0

    Try using ml-auto

    so it should be className="w-fit ml-auto"

    Login or Signup to reply.
  2. 0

    If you’re using bootstrap then please correct classes name. Like: d-flex
    then insted of using "justify-self-end" try to use "justify-content-end"

    <div className="group d-flex flex-col gap-4 rounded-2xl bg-brand-white p-4 shadow-card justify-content-between">
        <div className="relative overflow-hidden rounded-2xl">
          { ...JSX }
        </div>
    
        <p className="text-brand-black/80">{shortDescription}</p>
        <Button
          as={Link}
          href={link}
          variant="sm-inverted"
          className="w-fit justify-content-end"
        >
          Learn More
        </Button>
      </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search