Stick <p> to right bottom of <div>

How to stick “readmore” on my website to right bottom corner of “row blog-items”? I have tried to use position: absolute; / position: relative; but I think it is not my case as “readmore” is not in own

.readmore {
	position: absolute;
	bottom: -100px;
	right: 0px;
.blog .blog-items {
	background: #F8F8F8;
	padding-top: 0px;
position: relative;
	bottom: 0;
	left: 0;
	/*color: #ffffff;*/

Generally absolute positioning is a bad way to force a layout.
Adding text-align: right will put the link to the right of the container.
But to get it to the bottom of row blog-items you will have to alter the structure.
readmore is a child of the col-sm-6 which does not reach tot he bottom, it needs to be a direct child of row blog-items after the col-sm-6.


Hi there fodoxorg,

further to @SamA74’s suggesion, play around with this…

.readmore {
    padding-top: 10%; /* adjust value to suit */



If you use flex you can do it quite easily assuming you meant you wanted the text at the bottom of the whole row and not just below the paragraph text.


@media screen and (min-width:768px){
.blog .blog-items{display:flex;}
.blog .blog-items > div {display:flex;flex-direction:column;}


Thank you!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.