BuddyBoss: Course Grid Ribbon Placement

By default, the ribbon that BuddyBoss uses on their course grid—it says “Start Course,” “In Progress,” or “Complete,” depending on the user’s progress—is placed in the top-left corner of the grid image. You can easily move it to the bottom and/or the right side.

Bottom Left

.bb-cover-list-item .ld-status {
	top: unset;
	bottom: 15px;
}

You can adjust the value of the bottom property if you want to move it further up or down. A value of 0 will place it at the very bottom edge of the image. Each pixel you add will move it up 1px.

Top Right

For both options on the right, you’ll notice we added the border-radius CSS. This moves the rounded corners to the left and removes the border-radius from the right side of the ribbon so that it is flush with the edge of the image.

.bb-cover-list-item .ld-status {
	right: 0;
	border-radius: 15px 0 0 15px;
}

Bottom Right

.bb-cover-list-item .ld-status {
	top: unset;
	bottom: 15px;
	right: 0;
	border-radius: 15px 0 0 15px;
}