Bootstrap Tutorial for Django Developers

Adding Bootstrap 4 for CSS Styling

For quickly building a beautifully styled web page, we can use Bootstrap (v4). Bootstrap requires jQuery and Popper.js so we must first include them in the <head> of our template:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

Next, include the JavaScript file for Bootstrap:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

Finally, you need to include the CSS file for Bootstrap, also in the <head> section:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

Now you are ready to use Bootstrap classes and utilities for styling your application.

Create a index.html template that extends the base.html:

{ % extends "base.html" % }

{ % block content % }

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
        <h1>Django Bootstrap 4 Tutorial</h1>
          <p>Welcome to our Django Home Page</p>
        </div>
    </div>  
</div>


{ % endblock % }

Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.

Containers

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).

Use .container-fluid for a full width container, spanning the entire width of the viewport.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status