bootstrap 4 animate column width change

Answer 1

I changed the colmn size by using column sizes provided by Bootstrap. For example col-2 to col-1 Then I adjusted the transition to only target the specific type

.row [class*='col-'] {
    transition: flex 0.5s ease-in-out, max-width .5s ease-in-out;
}