Add Bootstrap in template

How to add bootstrap in templates

first add this settings in for indicate the location of all css and js files.



MEDIA_URL = ‘/media/’
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), “/home/sofat/static”, “static-only”)
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), “/home/sofat/static”, “media”)
os.path.join(os.path.dirname(BASE_DIR), “/home/sofat/static”, “static”),


Now download the all css and js library of bootstrap and save in static directory

/static/static/css    //for css

/static/static/js    //for js

Now set this code in you template file and create base. for include the code form different locations.

extends is used for include the other html page in index page

{% extends "base.html" %}

{% block content %}
<h1>Sign Up</h1>
<form action=”” method=”POST”> {% csrf_token %}

{{ form.as_p }}

<input type=’submit’ value=’Enter’>

{% endblock %}


Now do coding of base.html page

<html lang="en">
<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="">
<link rel="icon" href="../../favicon.ico">

<title>Jumbotron Template for Bootstrap</title>

<!– Bootstrap core CSS –>
<link href=”/static/css/bootstrap.min.css” rel=”stylesheet”>

<!– Custom styles for this template –>
<link href=”/static/css/jumbotron.css” rel=”stylesheet”>

<!– Just for debugging purposes. Don’t actually copy these 2 lines! –>
<!–[if lt IE 9]><script src=”../../assets/js/ie8-responsive-file-warning.js”></script><![endif]–>
<script src=”../../assets/js/ie-emulation-modes-warning.js”></script>

<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>
<!–[if lt IE 9]>
<script src=””></script&gt;
<script src=””></script&gt;


<div class=”row”>
{% if messages %}
<ul class=”messages”>
{% for message in messages %}
<li{% if message.tags %} class=”{{ message.tags }}”{% endif %}>{{ message }}</li>
{% endfor %}
{% endif %}




Now run your website and see the changes.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s