I am trying to make the BS-CS and stars section stick to the bottom of my container, but I am facing difficulties in achieving that. Can someone help me with this? Here is my Bootstrap code:
<div className="item1 col-12 col-md-6 col-lg-4 col-xl-4 my-4"> {/* col-12 -> to display only 1 card on mobile // col-md-6 -> display 2 cards on medium devices // col-lg-6 -> also display 2 cards on large devices // col-xl-4 -> display 3 cards on extra-large devices */}
<div className="row teacher_card">
{/* for teacher images */}
<div className="col-12 col-md-12 col-lg-4 teacher_img">
<img src={props.teacher_img} className="img-fluid img_size" alt="Teacher pic" />
</div>
{/* Teacher Description information */}
<div className="col-12 col-md-12 col-lg-8 teacher_info">
<div className="teacher_name"> {/* pt-4 -> padding top 4px // pb-3 -> padding top 3px */}
<h1> {props.teacher_name} </h1>
<p> {props.teacher_info} </p>
</div>
<div className="teacher_edu_city ">
<div className="teacher_edu_city-in d-flex justify-content-between">
<h5> {props.teacher_edu} </h5>
<h5> {props.teacher_city} </h5>
</div>
<p> 🌟🌟🌟🌟🌟 </p>
</div>
</div>
</div>
</div>