I am facing an issue with the alignment of the buttons in my HTML code. As the text inside the <p>
tag grows, it pushes the button to the right. I want all the buttons to be positioned in the bottom-right corner of every div regardless of the text size. Here's the relevant CSS code:
#dugme {
font-weight: bold;
left: 15vw;
line-height: 2vw;
color: white;
background-color: rgb(17, 142, 146);
text-align: center;
border: white 2px solid;
}
#dugme:hover{
background-color: aliceblue;
color: rgb(17, 142, 146);
}
#stripovi {
padding-top: 2em;
margin-bottom: 1em;
margin-left: 10px;
}
#comic {
display: inline-block;
background-color: rgb(230, 200, 119);
border-radius: 3px;
margin-right: 15px;
margin-top: 5px;
margin-bottom: 5px;
}
.naziv {
font-family: 'Fredoka One', cursive;
float: right;
margin-top: 100px;
word-wrap: break-word;
margin-top: auto;
margin-left: auto;
}
.container-fluid{
background-color: rgb(74, 198, 202);
}
<div class="row" id="stripovi">
<div class="comic w-50">
<div class="comic-img-top d-flex align-items-center form-group" id="comic">
<div class="thumbnail">
<img class="img-responsive" src="slike/c1.jpg" alt="comicbook">
<div class="naziv">
<p class="col p-2 m-0">Heavy Metal Comic</p>
<p class="col p-2 m-0" style="color: rgb(155, 151, 151); text-align: left;">ID:0101</p>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-info" id="dugme">Dodaj</button>
</div>
</div>
</div>
<div class="comic w-50">
<div class="comic-img-top d-flex align-items-center form-group" id="comic">
<div class="thumbnail">
<img class="img-responsive" src="slike/c2.jpg" alt="comicbook">
<div class="naziv">
<p class="col p-2 m-0">Deadly Class</p>
<p class="col p-2 m-0" style="color: rgb(155, 151, 151); text-align: left;">ID:0101</p>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-info" id="dugme">Dodaj</button>
</div>
</div>
</div>
</div>
Check out the button alignment here. In the second comic, the text pushed the button to the right, but I want all buttons to stay in the bottom right corner of each div. Thank you for your help!
Thank you in advance!