Quick Contact

    Python Tutorial
    Python Panda Tutorial
    Python Selenium
    Python Flask Tutorial
    Python Django
    Interview Questions & Answers

    Django Bootstrap

    Django is a very powerful backend framework. A functional website is not at all appealing if it does not look good. At last, users will decide the worth of our website.

    Therefore, it is necessary that the website’s UI and User experience is good as it is important for increasing traffic.

    This front-end development is not Django’s domain since it is a backend-framework. For that, we have to learn some front-end technologies. That’s the reason, we are starting with one very popular framework, Bootstrap.

    What is Bootstrap?

    Bootstrap is one of the most popular front-end frameworks out there. It contains some amazing CSS classes for UI development.

    Bootstrap has pre-defined CSS files and JavaScript code, which you can link with HTML files. Those CSS files contain classes that can be directly used on HTML elements.

    Bootstrap has lots of pre-defined themes too. They look very nice on all browsers. Let’s learn how to use bootstrap in Django.

    Bootstrap in Django

    It is very easy to use Bootstrap in Django. Since Bootstrap is a front-end framework, it completely consists of CSS & JavaScript files. These files are considered static on the server-side.

    To use Bootstrap in the Django project, there are two ways:

    1. Downloading Bootstrap

      This option allows for offline testing of templates. So, as we know that Bootstrap is a collection of JavaScript and CSS files and we can download the same from its website.

      The CSS/ directory contains multiple CSS files. Some of these files may require different dependencies.

      The js/ directory contains multiple JavaScript files. These JavaScript files will not work without dependencies like jQuery and Popper. These are JavaScript libraries that support Bootstrap JS framework.

      You can download Bootstrap from its official site – Getbootstrap

      You will get a .zip file there. Extract that zip file and you will get a folder. Now, open the root directory of your Django project.

    2. Bootstrap CDN

      The other method to add Bootstrap in your project is via Bootstrap CDN. Remember that, this method will require internet access for every request.

      The concept is; in the < link> tag of HTML, we provide the URL of Bootstrap files. These files are then fetched online when requested from Bootstrap CDN.

      Thus, the internet becomes necessary. Now, it totally depends on you which method you want to use.

    Applying Bootstrap in Django

    Open the home application in the Django project as we have already used some Bootstrap components there. Now, you will get a very beautiful webpage with minimal coding.

    Inside home/templates, edit the base.html file.

    Change the link tags to below-mentioned codes. It is for implementing the downloaded CSS files in HTML.


    < link rel=”stylesheet”href=”{% static ‘css/bootstrap.min.css’ %}”>

    < link rel=”stylesheet”href=”{% static ‘css/bootstrap.css’ %}”>

    Essential Concepts in Bootstrap

    Bootstrap is an amazing front-end framework. It provides uniform design over a complete website with the least effort.

    Bootstrap is designed in such a way that it adapts between multiple devices. Users can easily access UI made in Bootstrap on mobile, laptops, etc.

    At last, Bootstrap lets you become browser independent. It is compatible with most popular browsers.

    The bootstrap development team keeps their code updated. They also keep it compatible with previous versions of browsers.

    There are four major parts in Bootstrap. They are the basis of all JavaScript and CSS libraries. Let’s understand them one by one.

      1. Layout Components

        These components describe the basic structure of HTML. There are many classes that define the position of HTML elements.

        Some popular classes used:

        • Containers

    CSS Grid

    Navbar, etc.

    1. Content

      The content component in Bootstrap formats the HTML elements. There are special classes implemented on elements like < table>, < forms>, etc.

      These classes can be imported from bootstrap-reboot.css.

    2. Components

      These are some common elements that are used on every website. They are predefined layouts, alerts and much more.

      The components like:

      • Alerts
      • Badges
      • Buttons
      • Cards
      • Dropdowns, etc.
    3. Utilities

      The last part of Bootstrap contains utilities. These let you control the styling of elements. The stylings like border, embed, position, scrolling options, etc. are some examples.

      These utilities add more personal styling to default bootstrap elements.

    Bootstrap Themes

    There are certain bootstrap themes that can be used directly. You can get more themes on Bootstrap’s official website. Again, these themes are just CSS and JS files that require a bootstrap framework. The Bootstrap, in turn, requires jQuery and Popper for libraries.



    Apply now for Advanced Python Training Course

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.