Breaks from Bootstrap 3 to 4

[jtheberge]

With the coming weeks that Bootstrap 4 beta will probably be released (it's at 99% completion), it would be really great to have some minor fixes to make this project reusable with 4.

The main issue with the switch, as stated partly before with #1339, is that icons don't show up because of removed classes such as caret, as well as the replacement of Glyphicons with Font Awesome.

The second issue, though minor, is that the global search bar is no longer in the correct position and gets squished. Probably an easy CSS fix, but something worth noting.

Another important issue is that if I download your examples page but replace v3 with v4, then the navbar disappears unless I manipulate the CSS/play around with the new v4 classes, and the documents aren't laid out correctly.

The images below were used with the "Quick Demo" code provided in the README.md, except search={true} was added to BootstrapTable.

Bootstrap 3:

Bootstrap 4:

#780 a pull request was made to fix the icons issue, but after trying to fix it myself with the newer files (and doing essentially the same thing, which was globally replacing Glyphicons with Font Awesome), I still had errors.

#1272 asked something similar, but the issues weren't clearly stated so I'm making a specific issue for it.

If icons could at least be fixed initially, then the main components of this repository could definitely be used.

Also worth noting that I downloaded 4.0.0-beta.7 and had the same results as the images above, which used the most recent stable version.

[AllenFang]

@jtheberge, thanks your sharing, I'll try to make react-bootstrap-table more compatible with bootstrap@3 and bootstrap@4, but need some time, so PR is welcome, thanks

[iamawebgeek]

any progress on this?

[Suban5]

I am waiting for this issue to be fixed. Also there is problem while selecting pagePerSize. The pagePerSize only work if you click in the number but not in that column.

[AllenFang]

@Suban5 if you use bootstrap@4, please add version="4" on BootstrapTable.

[AllenFang]

Remember to upgrade to newest react-bootstrap-table, thanks.