Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bootstrap not working properly #136

Open
Dennis1-1995 opened this issue Jun 1, 2021 · 5 comments
Open

Bootstrap not working properly #136

Dennis1-1995 opened this issue Jun 1, 2021 · 5 comments

Comments

@Dennis1-1995
Copy link

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
Copy link

hydridity commented Jun 12, 2021 •
edited
Loading

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
Copy link

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
Copy link
Contributor

Hello @Dennis1-1995 !

Is your problem fixed?

@Dennis1-1995
Copy link
Author

Dennis1-1995 commented Jan 17, 2022 via email

@MaverickKunal
Copy link

Thanks @silkentrance!!

...

... <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> <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 %}

After adding these lines of code to the base template my issue got fixed.

Kudos!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@silkentrance @hydridity @crydotsnake @Dennis1-1995 @MaverickKunal