twitter-bootstrapbootstrap-4

Bootstrap rounded top right corner

I have a Bootstrap list-group-flush to display a left vertical nav.

I want to have the top left corner rounded. class="rounded-top" works, but class="rounded-top-left", or class="rounded top-left" doesn't do anything?

Solution

  • You can always create your own global classes. For example:

    .rounded-top-left-1 {
    border-top-left-radius: 1rem;
}
.rounded-top-right-1 {
    border-top-right-radius: 1rem;
}
.rounded-bottom-left-1 {
    border-bottom-left-radius: 1rem;
}
.rounded-bottom-right-1 {
    border-bottom-right-radius: 1rem;
}