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

How to set button position in the bottom of div using Tailwind CSS

I want to set individul card button on the bottom of div but also all card item title will be single or dubble line also

I want to set individul card button on the bottom of div but also all card item title will be single or dubble line also but i cant do that properly

enter image description here

    <div className='w-full lg:w-1/4 bg-white rounded-xl p-6'>
      <h2 className='text-blue-500 text-lg font-bold leading-7 mb-4'>
        Credit Hour Remaining 7 hr
      </h2>
      <hr className='border-[#1C1B1B33] mb-4' />
      <h2 className='text-[#1C1B1B] text-xl font-bold'>Course Name</h2>
      <ul className='my-5'>
        {selectedCourses.map((course, ind) => {
          return (
            <li key={course.course_id}>
              {ind + 1} {course.course_title}
            </li>
          );
        })}
      </ul>
      <hr className='border-[#1C1B1B33]' />
      <h3 className='my-5 text-[#1C1B1BCC] text-4 font-medium'>
        Total Credit Hour : {13}
      </h3>
      <hr className='border-[#1C1B1B33] mb-4' />
      <h3 className=' text-[#1C1B1BCC] text-4 font-medium'>
        Total Price : 48000 USD
      </h3>
    </div>
Tags:

2

Answers


  1. 0

    The code provided is different from the screenshot, anyway I suggest two ways one on the button and other for description.

    Button: use mt-auto to set an auto top margin.

    Description: use h-auto to force the height push the button to the bottom.

    Login or Signup to reply.
  2. 0

    As the others said, the code that you provided is not related to what you want on the screenshots.

    However, if you want to "stick" the buttons on the bottom of each card, you just need to wrap the content, except the button, in a div and add some classes.

    <div class="flex flex-col gap-4 rounded bg-white p-4">
  <div class="flex-1">
    <h2>Intro</h2>
    <p>Lorem ipsuus eos laboriosam.</p>
  </div>
  <button>Select</button>
</div>

    You can check the code here: https://play.tailwindcss.com/MHbcPAeMsU?layout=horizontal

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search