search

django-cms / djangocms-bootstrap4

django CMS Bootstrap 4 is a plugin bundle for django CMS providing several components from the popular Bootstrap 4 framework.
https://www.django-cms.org/
Other
82 stars 58 forks source link

Bootstrap not working properly #136

Open Dennis1-1995 opened 3 years ago

Dennis1-1995 commented 3 years ago

Hi

I am new with Django CMS. But some issues I can not find a solution for. The navigation is not working like bootstrap navigation. Also , the icons are not showing. The Carousel only shows 1 image.

Maybe I am missing something and someone can assist?

hydridity commented 3 years ago

Greetings,

I've encountered the same issue with Carousel first, then i realised that i did not include Bootstrap javascript in the template, which Carousel requires.

djangocms-bootstrap4 does not include CSS and Javascript of Bootstrap When you include them both properly in your templates as described in documentation https://getbootstrap.com/docs/4.6/getting-started/introduction/ see the starter template, it should work properly.

The same applies for Icons, there might still be problem with icons not showing in the editor but they will render on the page, that could require additional configuration to allow them render in the editor.

silkentrance commented 2 years ago

For newbies this is kind of hard, getting their heads around both django and django-cms. Providing non functional links does not help either.

So here it goes, however, this uses the bootstrap CDN for including both the javascript and the css. You might want to download these and put these into your local static folder.

Add the following to the base template templates/base.html

...
<head>
...
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  {% render_block css %}

and off you go.

crydotsnake commented 2 years ago

Hello @Dennis1-1995 !

Is your problem fixed?

Dennis1-1995 commented 2 years ago

Hi

I have stop trying because issue was still coming back.

I could not find a solution for it. SoI have put project on hold.

Wanted to create a simple website but could not use Bootstrap.

Gr Dennis

Op zo 16 jan. 2022 20:48 schreef Simon Krull @.***>:

Hello @Dennis1-1995 https://github.com/Dennis1-1995 !

Is your problem fixed?

— Reply to this email directly, view it on GitHub https://github.com/django-cms/djangocms-bootstrap4/issues/136#issuecomment-1013940168, or unsubscribe https://github.com/notifications/unsubscribe-auth/AT67QS3MWM3COWCT7N3QORDUWMOKVANCNFSM455HOURQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

MaverickKunal commented 1 month ago

Thanks @silkentrance!!

...

... {% render_block css %} After adding these lines of code to the base template my issue got fixed. Kudos!!