Javatpoint Logo
Javatpoint Logo

Django with Bootstrap

Bootstrap is a framework which is used to create user interface in web applications. It provides css, js and other tools that help to create required interface.

In Django, we can use bootstrap to create more user friendly applications.

To implement bootstrap, we need to follow the following steps.

1. Download the Bootstrap

Visit the official site https://getbootstrap.com to download the bootstrap at local machine. It is a zip file, extract it and see it contains the two folder.

Django with Bootstrap

2. Create a Directory

Create a directory with the name static inside the created app and place the css and jss folders inside it. These folders contain numerous files, see the screen shot.

Django with Bootstrap Create Directory

3. Create a Template

First create a templates folder inside the app then create a index.htm file to implement (link) the bootstrap css and js files.

4. Load the Boostrap

load the bootstrap files resides into the static folder. Use the following code.

And link the files by providing the file location (source). See the index.html file.

In this template, we have link two files one is bootstrap.min.css and second is bootstrap.min.js. Lets see how to use them in application.

Suppose, if we don't use bootstrap, our html login for looks like this:

Output:

Django dont use bootstrap output

After loading bootstrap files. Our code look like this:

// index.html

Output:

Django After loading bootstrap

now, our login form loos much nicer. This is advantage of bootstrap.

Finally, out project structure looks like this.

Django finaly loading bootstrap
Next TopicDeploy on Github




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA