Is there a way to use bootstrap 5 in this module ?

[ydriss-baqui]

Hello,

I wanted to ask if there's a way to use bootstrap 5 classes to style the table in your react component ? I looked quite a lot in google if I can find a way to style the table with bootstrap5 but most of the result was concerning bootstrap 4 or other thing. Probably I can't find anything because bootstrap 5 is pretty new.

Ydriss Baqui Thanks in advance for your answer.

[Avasam]

I haven't done anything special to use bootstrap 5 as-is. It mostly uses the same classes and just works.

[isherwood]

It's not exactly clear what styling you've found lacking, but here's some CSS which adds the sort carets. They're missing because Bootstrap 5 uses different dropdown/dropup classes than Bootstrap 4. I'm not using the bootstrap4 attribute on my tables. That results in different markup and this won't work.

Otherwise, things work generally the same.

/* accommodate Bootstrap 5 with React-Bootstrap-Table2, which is intended for Bootstrap 4 */
.react-bootstrap-table .caret {
    display: inline-block;
    margin-left: 0;
    vertical-align: 0.255em;
    content: "";
    border-right: 0.25em solid transparent;
    border-left: 0.25em solid transparent;
    border-top: 0.25em solid;
    border-bottom: 0;
    opacity: 0.35;
}

.react-bootstrap-table .dropup .caret {
    border-top: 0;
    border-bottom: 0.3em solid;
}

.react-bootstrap-table .react-bootstrap-table-sort-order .caret {
    margin-right: 10px;
    opacity: 1;
}

.react-bootstrap-table-sort-order, .react-bootstrap-table .order {
    margin-left: 5px;
}
/* end React-Bootstrap-Table2 */

[wagnerfillio]

I haven't done anything special to use bootstrap 5 as-is. It mostly uses the same classes and just works.

Hello, Can you make an example of use with react-bootstrap, which uses bootstrap 5 ?

Received this error #1706