[Answered ]-How to use landing pages (bootstrap) in a Django project?

by

1👍

Try changing your index.html and use {% static %} tag for including your static files:

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Freelancer - Start Bootstrap Theme</title>

    <!-- Bootstrap Core CSS -->
    <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">

    <!-- Theme CSS -->
    <link href="{% static 'css/freelancer.min.css' %}" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
👤pythad

1👍

In your settings.py include

STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)

after your definition of STATC_URL so that Django knows to look in the …/static directory where your index.html and css are located. Make sure that your BASE_DIR is pointing to the correct directory that your static files are located in.

Also, in index.html, you should include {% load staticfiles %} at the top of your index.py and also use <link rel="stylesheet" href="{% static 'css/xxx.css' %}"> for each instance of the boostrap core, theme and custom fonts (so all parts of code that you follow the format above).

A good online django tutorial that goes over static files more in depth can be found here.

👤SamOh

0👍

The Django docs have a good tutorial for writing your first app. Here is the page that explains how to load the css.

The tags that load your css have the wrong href. They should be loaded with the Django static tag. First make sure you have all the files in your static folder. The one specified in STATIC_ROOT, so create the folder <YOUR_BASE_DIR>/static/css/ and copy both bootstrap.min.css and freelancer.min.css there. To load them just change your template to use the correct path. 

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>

<!-- Bootstrap Core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">

<!-- Theme CSS -->
<link href="{% static 'css/freelancer.min.css' %}" rel="stylesheet">
👤alejandrodnm

0👍

you can download bootstrap.css and save in your static file like this :

in setting.py :

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

folders of your project :

mysite/
   mysite1/
        setting.py
   mysite2/
        views.py
        urls.py
   static/
        css/
            bootstrap.css

  #folders name is cutom for me beacuse i dont khow you project folders

at top of your template use :

{% load staticfiles %}

and then in tag of your template :

<link rel="stylesheet" href="{% static "css/bootstrap.css" %}">

have a happy codeing…

👤Omid Reza Heidari

Leave a comment