Twitter Bootstrap Question posted in

how to load bootstrap in Django?-Twitter bootstrap

so I tried loading Bootstrap to Django. But since I wanted to customize the styling with scss, instead of putting the CDN url in header, I replaced it with a separate css file which has all of the Bootstrap stylings. Here’s the code. 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="/style/main.css">

    <title>{% block title %}BASE{% endblock %}</title>
</head>
<body>
    <div class="container"> 
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

I have the correct /style/main.css file, I’ve checked it by ctrl+clicking it. As mentioned, the file has ALL of the Bootstrap stylings. 

@charset "UTF-8";
/*!
 * Bootstrap v4.4.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
### AND SO ON ###

However my Django page wouldn’t reflect it. When I hit refresh I don’t see any styling.
But when I restore the CDN url, Bootstrap is normally applied. I have no idea what the problem is. I would very much appreciate your help. 🙂

Tags:

2

Answers


  1. 0

    To load static files in Django

    Usually we keep our static files (a.js, b.css, c.png) in a folder named static.

    Suppose you have the main.css file in static/css/main.css

    Then change your code as

    {% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/main.css' %}">
    <title>{% block title %}BASE{% endblock %}</title>
</head>
<body>
    <div class="container"> 
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

    Check out How to serve static files django

    Login or Signup to reply.
  2. 0 
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% load static %}
    <link rel="stylesheet" href="{% static 'style/main.css' %}">

    <title>{% block title %}BASE{% endblock %}</title>
</head>
<body>
    <div class="container"> 
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

    settings.py
    add this in your settings.py

    STATIC_URL = '/static/'

    if your static folder follow this path Projectname/static or if you have static folder in your app too Projectname/appname/static then you can append it in list like 2nd one

    STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'),os.path.join(BASE_DIR, 'app_name/static'),]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search