0
133
Viewshow to position my BS-CS and stars to the bottom
I want to fix the BS-CS and stars portion stick to the bottom of my container but i can't do that what should i do now 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 in mobile of all col // col-md-6 -> display 2 cards in medium devices // col-lg-6 -> also display 2 cards in large devices // col-xl-4 -> display 3 cards in 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 Discription infprmation */}
<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>
ยท
Juan Pablo Isaza
2 answers
Answer question0
if you want to position your stars in bottom of your content, you can do with position.
give a class to stars
than in css:
.teacher_info {
position: relative;
}
.stars {
position: absolute;
left: 0;
bottom: 0;
}
ยท
Juan Pablo Isaza
Report
0
First, Give div.item1 Element d-flex flex-column classes if you are using bootstrap 4+, Or just add this styles to
display: flex;
flex-direction: column;
Second, You can add mt-auto to div.teacher_edu_city , Or use this styles
margin-top: auto;
That's it.
ยท
Juan Pablo Isaza
Report
Answer question