How to Integrate Bootstrap 4 Components to Misago

bobtfrog
March 13, 2021
chat_bubble_outline 1
  • link
    Members 2 posts
    March 13, 2021, 1:09 a.m.
    link

    Hello,
    I am attempting to add a few bootstrap components to a custom django plugin, but cannot seem to get them to work without messing with misago's appearance. I have tried importing the bootstrap css and js and that results in many changes to misago's appearance, none of which are good ones. Upon further investigation I believe misago is running on bootstrap 4? Knowing this, what would be the recommended way to add bootstrap? Directly into html or as react components? I am currently just using html and it does function, but I have a feeling these 2 lines are overriding most of misago's css:

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

    Are there any workarounds or proper ways to add bootstrap components to my page that i am missing?

    Thanks,
    bobtfrog

  • edit

    Thread title has been changed from How to Integrate Bootstrap 4.

  • edit

    Thread title has been changed from How to Integrate Bootstrap 4 Components.

  • link
    Project Lead
    March 13, 2021, 1:43 p.m.
    link

    Misago is running on Bootstrap 3. Only admin panel is using Bootstrap 4. Also lines you've posted are for bootstrap 5 beta CDN.

    You'll need to selectively move code of components you want to use over to your custom CSS from newer Bootstrap versions in order for this to work.