How to left align default bootstrap 5 accordion icon

user_2102292 0
Viewed 1360

I would like to get something like this:

desired result

And this is the current result:

current result

What I've tried:

.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
    float: left;
}

Unfortunately float: left; did not worked.

Any ideas?

Here is a LIVE JSFIDDLE

UPDATE:

If I get rid of margin-left: auto as Sato Takeru suggested, the icon gets closer to the text, but it will still be aligned to the right.

updated

twitter-bootstrap css
3 Answers

You can use the flex order property

.accordion-button:after {
    order: -1; //swap order
    margin-left: 0; 
    margin-right:0.5em; // just extra space between text and icon
}
user_150156750

There is no default support for this in bootstrap. I've solved it by custom class in .accordion .right for aligning it. (working example)

End result: enter image description here

My code in scss is using a custom icons for opening and closing:

.accordion {
  &.right {
    .accordion-button:not(.collapsed)::before {
      background-image: url("../images/x.svg");
      transform: rotate(-180deg);
    }

    .accordion-button::before {
      height: 1.5rem;
      background-image: url('../images/plus.svg');

      flex-shrink: 0;
      width: $accordion-icon-width;
      margin-left: 0;
      margin-right: $accordion-icon-width;
      content: "";
      background-repeat: no-repeat;
      background-size: $accordion-icon-width;
      @include transition($accordion-icon-transition);
    }
    .accordion-button::after {
      display: none;
    }

    .accordion-collapse {
      margin-left: 2*$accordion-icon-width;
    }
  }
}

My compiled code in css is using a custom icons for opening and closing:

.accordion.right .accordion-button:not(.collapsed):before {
    background-image: url(/build/images/x.svg);
    transform: rotate(-180deg);
}
.accordion.right .accordion-button:before {
    background-image: url(/build/images/plus.svg);
    background-repeat: no-repeat;
    background-size: 1.25rem;
    content: "";
    flex-shrink: 0;
    height: 1.5rem;
    margin-left: 0;
    margin-right: 1.25rem;
    transition: transform 0.2s ease-in-out;
    width: 1.25rem;
}
@media (prefers-reduced-motion: reduce) {
    .accordion.right .accordion-button:before {
        transition: none;
    }
}
.accordion.right .accordion-button:after {
    display: none;
}
.accordion.right .accordion-collapse {
    margin-left: 2.5rem;
}
user_56771770

You could write a custom class to change the pseudo to ::before and remove the margin-left.

Note:
You have to hide ::after pseudo element.

Eg:

.myaccordion .accordion-button::before {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    content: "";
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
}
.accordion-button::after {display: none !important;}
user_14332680
Related