CODEWITHSUNDEEP
vertical-alignmenttailwind-css
jpw
jpw

Reputation: 19247

in TailwindCss how put buttons at bottom of wide-by-side divs with different content heights

The Tailwindcss code below does a nice job of creating same-height cards.

How do I get all 3 buttons to align to the bottom of each card?

I expected adding "bottom-0" to the div holding the buttons would work, but I think the issue is "bottom" is relative it its parent, which is not the full height of the card.

enter image description here

quick playground: https://play.tailwindcss.com/SX4Yu2OT3f

    .p-10.grid.grid-cols-1.sm:grid-cols-1.md:grid-cols-3.lg:grid-cols-3.xl:grid-cols-3.gap-5
      / Card 1
      .rounded.overflow-hidden.shadow-lg.bg-white
        = image_tag "http://via.placeholder.com/640x360", class: "w-full"
        .px-6.py-4
          .font-bold.text-xl.mb-2 Tagline 1
          %p.text-gray-700.text-base
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint.  
        .px-6.pt-4.pb-2.text-left
          = link_to "learn more", "#", class: "btn btn-small btn-tertiary"
      / Card 2
      .rounded.overflow-hidden.shadow-lg.bg-white
        = image_tag "http://via.placeholder.com/640x360", class: "w-full"
        .px-6.py-4
          .font-bold.text-xl.mb-2 Tagline 2
          %p.text-gray-700.text-base
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, 
        .px-6.pt-4.pb-2.text-center
          = link_to "try it!", "#", class: "btn btn-small btn-primary"
      / Card 3
      .rounded.overflow-hidden.shadow-lg.bg-white
        = image_tag "http://via.placeholder.com/640x360", class: "w-full"
        .px-6.py-4
          .font-bold.text-xl.mb-2 Tagline 3
          %p.text-gray-700.text-base
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint. 

        .px-6.pt-4.pb-2.text-right
          = link_to "find it", "#", class: "btn btn-small btn-secondary"

Upvotes: 1

Views: 4218

Answers (2)

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14193

Give a flex flex-col classes to your card and mt-auto to button wrapper

.p-10.grid.grid-cols-1.sm:grid-cols-1.md:grid-cols-3.lg:grid-cols-3.xl:grid-cols-3.gap-5
      / Card 1
      .rounded.overflow-hidden.shadow-lg.bg-white.flex.flex-col
        = image_tag "http://via.placeholder.com/640x360", class: "w-full"
        .px-6.py-4
          .font-bold.text-xl.mb-2 Tagline 1
          %p.text-gray-700.text-base
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint.  
        .px-6.pt-4.pb-2.text-left.mt-auto
          = link_to "learn more", "#", class: "btn btn-small btn-tertiary"

Upvotes: 5

Erfan HosseinPoor
Erfan HosseinPoor

Reputation: 1077

Give position-relative class to your wrapper box

.rounded.overflow-hidden.shadow-lg.bg-white.relative

and then set position-absolute & bottom-0 to your button

      = link_to "learn more", "#", class: "btn btn-small btn-tertiary bottom-0 absolute"

Upvotes: 0

Related Questions