Akshay Gaur

What is Bootstrap?

Bootstrap is a widely used front-end framework that is used for designing websites.

Why do you want to use Bootstrap?

Bootstrap is a very well designed and mature framework. You would want to use it if you don't want to spend a lot of time designing the layout of all the different components that are going to be a part of your website.

Moreover, Bootstrap is designed to be responsive and so, you don't have to worry about writing media queries in CSS to make sure that your website looks good on different screen sizes.

Essentially, Bootstrap takes away a lot of pain that somebody would usually have to go through to get a decent looking website up and running.

Setting it up

To get bootstrap in your project, we need to include three main components:

  1. Bootstrap CSS
  2. Bootstrap JS
  3. jQuery
  4. Popper.js

Bootstrap CSS

This is the CSS that has various classes that we will be using in our html tags to make our website look good.

Bootstrap JS, jQuery, Popper.js

These are javascript libraries that enable some cool stuff such as animations, tooltips etc.

Adding them to your website

To add these resources to your website, we simply need to add the following tags in your page:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
    <!-- Content goes here -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>

So, in case you are coming from the Django Class Based View Tutorial, change our base.html in our templates folder to look like this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Base HTML{% endblock title %}</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
    {% block content %}
        {# Your content goes here #}
    {% endblock content %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>

Important thing to note here is this:

Next, we will make a simple header for our site which will appear in all our pages!