[Hindi] How Websites Work - Web Development Using Flask and Python #1

[Hindi] Creating Our First Flask App - Web Development Using Flask and Python #2

[Hindi] Static and Templates folder - Web Development Using Flask and Python #3

[Hindi] Simple Bootstrap Site - Web Development Using Flask and Python #4

[Hindi] Basics of Jinja Templating - Web Development Using Flask and Python #5

[Hindi] Creating a tech blog - Web Development Using Flask and Python #6

[Hindi] Template Inheritance In Jinja2 - Web Development Using Flask and Python #7

[Hindi] Connecting to the Database - Web Development Using Flask and Python #8

[Hindi] Flask SQLAlchemy Tutorial In Hindi - Web Development Using Flask and Python #9

[Hindi] Making Parameters Configurable In Flask - Web Development Using Flask and Python #10

[Hindi] Sending Emails Using Flask - Web Development Using Flask and Python #11

[Hindi] Fetching Posts From Database - Web Development Using Flask and Python #12

[Hindi] Designing Blog's Homepage - Web Development Using Flask and Python #13

[Hindi] Creating Admin Dashboard - Web Development Using Flask and Python #14

[Hindi] Edit, Delete and File Upload - Web Development Using Flask and Python #15

[Hindi] Adding New Posts To Flask Blog - Web Development Using Flask and Python #16

[Hindi] Uploading Files In Flask - Web Development Using Flask and Python #17

[Hindi] Deleting Blog Posts In Flask - Web Development Using Flask and Python #18

[Hindi] Creating Pagination In Flask - Web Development Using Flask and Python #19

[Hindi] Uploading Flask Blog To GitHub - Web Development Using Flask and Python #20

[Hindi] Purchasing A Domain Name From Godaddy- Web Development Using Flask and Python #21

[Hindi] Hosting The Blog On A Server - Web Development Using Flask and Python #22

[Hindi] Fixing The Add Post Bug - Web Development Using Flask and Python #23

[Hindi] Hosting Flask App On Ubuntu Production Server WSGI - Web Development Using Flask & Python#24

[Hindi] Message Flashing And Other Python Flask Resources | Web Development Using Flask & Python #25

<p>In this blog we will focus on bootstrap. This series is on flask which is why we are not going to focus much on front end and that&rsquo;s why we are using bootstrap.</p>
<p>Bootstrap is cooked front end which means we don&rsquo;t have to write the whole website(front end).</p>
<p>&lt;|AD|&gt;</p>
<p>If you scroll down, copy the <a href="#bootstrap-heading">bootstrap</a> code and paste it in an HTML file then it would look like this:</p>
<p><iframe style="height: 70vh; width: 100%;" title="Iframe" src="../../static/common/uploads/bootstrap-4.html"></iframe></p>
<p>Bootstrap link to example shown above:</p>
<p><a href="https://getbootstrap.com/docs/5.0/examples/album/" target="_blank" rel="noopener">https://getbootstrap.com/docs/5.0/examples/album/</a></p>
<p>For this series you can choose a template of your liking. You can go on <a href="https://startbootstrap.com/templates" target="_blank" rel="noopener">startbootstrap</a> website and download template of your own choice then through this series we will learn how to write back end for it.</p>
<h4>#tut1.py file as described in the video</h4>
<pre class="language-python"><code>from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")
def hello():

    return render_template('index.html')

@app.route("/about")
def harry():
    name = "rohan das"
    return render_template('about.html', name2= name)

@app.route("/bootstrap")
def bootstrap():
    return render_template('bootstrap.html')

app.run(debug=True)
</code></pre>
<h4>#index.html file as described in the video</h4>
<pre class="language-html"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Title of my page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;img src="{{ url_for('static', filename='1.png') }}"&gt;


&lt;p&gt;In this video, I have shown you how to create a flask app using templates. I have used render template function from the Flask Module&lt;/p&gt;
&lt;p&gt;Hope you will like this video!&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>&lt;|AD|&gt;</p>
<h4>#about.html file as described in the video</h4>
<pre class="language-html"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Title of my page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;Hi I am {{ name2 }}!&lt;/h1&gt;

&lt;p&gt;This is a way for me to teach you flask nicely&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h4 id="bootstrap-heading">#bootstrap.html file as described in the video</h4>
<pre class="language-html"><code>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;!-- Required meta tags --&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;

    &lt;!-- Bootstrap CSS --&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"&gt;

    &lt;title&gt;Hello, world!&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;body&gt;

    &lt;header&gt;
      &lt;div class="collapse bg-dark" id="navbarHeader"&gt;
        &lt;div class="container"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-sm-8 col-md-7 py-4"&gt;
              &lt;h4 class="text-white"&gt;About&lt;/h4&gt;
              &lt;p class="text-muted"&gt;Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-4 offset-md-1 py-4"&gt;
              &lt;h4 class="text-white"&gt;Contact&lt;/h4&gt;
              &lt;ul class="list-unstyled"&gt;
                &lt;li&gt;&lt;a href="#" class="text-white"&gt;Follow on Twitter&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" class="text-white"&gt;Like on Facebook&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" class="text-white"&gt;Email me&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="navbar navbar-dark bg-dark box-shadow"&gt;
        &lt;div class="container d-flex justify-content-between"&gt;
          &lt;a href="#" class="navbar-brand d-flex align-items-center"&gt;
            &lt;svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"&gt;&lt;path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"&gt;&lt;/path&gt;&lt;circle cx="12" cy="13" r="4"&gt;&lt;/circle&gt;&lt;/svg&gt;
            &lt;strong&gt;Album&lt;/strong&gt;
          &lt;/a&gt;
          &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"&gt;
            &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/header&gt;

    &lt;main role="main"&gt;

      &lt;section class="jumbotron text-center"&gt;
        &lt;div class="container"&gt;
          &lt;h1 class="jumbotron-heading"&gt;Album example&lt;/h1&gt;
          &lt;p class="lead text-muted"&gt;Something short and leading about the collection below&mdash;its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.&lt;/p&gt;
          &lt;p&gt;
            &lt;a href="#" class="btn btn-primary my-2"&gt;Main call to action&lt;/a&gt;
            &lt;a href="#" class="btn btn-secondary my-2"&gt;Secondary action&lt;/a&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/section&gt;

      &lt;div class="album py-5 bg-light"&gt;
        &lt;div class="container"&gt;

          &lt;div class="row"&gt;
            &lt;div class="col-md-4"&gt;
              &lt;div class="card mb-4 box-shadow"&gt;
                &lt;img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Card image cap"&gt;
                &lt;div class="card-body"&gt;
                  &lt;p class="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
                  &lt;div class="d-flex justify-content-between align-items-center"&gt;
                    &lt;div class="btn-group"&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;View&lt;/button&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;Edit&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;small class="text-muted"&gt;9 mins&lt;/small&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
              &lt;div class="card mb-4 box-shadow"&gt;
                &lt;img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Card image cap"&gt;
                &lt;div class="card-body"&gt;
                  &lt;p class="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
                  &lt;div class="d-flex justify-content-between align-items-center"&gt;
                    &lt;div class="btn-group"&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;View&lt;/button&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;Edit&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;small class="text-muted"&gt;9 mins&lt;/small&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
              &lt;div class="card mb-4 box-shadow"&gt;
                &lt;img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Card image cap"&gt;
                &lt;div class="card-body"&gt;
                  &lt;p class="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
                  &lt;div class="d-flex justify-content-between align-items-center"&gt;
                    &lt;div class="btn-group"&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;View&lt;/button&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;Edit&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;small class="text-muted"&gt;9 mins&lt;/small&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class="col-md-4"&gt;
              &lt;div class="card mb-4 box-shadow"&gt;
                &lt;img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Card image cap"&gt;
                &lt;div class="card-body"&gt;
                  &lt;p class="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
                  &lt;div class="d-flex justify-content-between align-items-center"&gt;
                    &lt;div class="btn-group"&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;View&lt;/button&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;Edit&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;small class="text-muted"&gt;9 mins&lt;/small&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
              &lt;div class="card mb-4 box-shadow"&gt;
                &lt;img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Card image cap"&gt;
                &lt;div class="card-body"&gt;
                  &lt;p class="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
                  &lt;div class="d-flex justify-content-between align-items-center"&gt;
                    &lt;div class="btn-group"&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;View&lt;/button&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;Edit&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;small class="text-muted"&gt;9 mins&lt;/small&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
              &lt;div class="card mb-4 box-shadow"&gt;
                &lt;img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Card image cap"&gt;
                &lt;div class="card-body"&gt;
                  &lt;p class="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
                  &lt;div class="d-flex justify-content-between align-items-center"&gt;
                    &lt;div class="btn-group"&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;View&lt;/button&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;Edit&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;small class="text-muted"&gt;9 mins&lt;/small&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class="col-md-4"&gt;
              &lt;div class="card mb-4 box-shadow"&gt;
                &lt;img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Card image cap"&gt;
                &lt;div class="card-body"&gt;
                  &lt;p class="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
                  &lt;div class="d-flex justify-content-between align-items-center"&gt;
                    &lt;div class="btn-group"&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;View&lt;/button&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;Edit&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;small class="text-muted"&gt;9 mins&lt;/small&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
              &lt;div class="card mb-4 box-shadow"&gt;
                &lt;img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Card image cap"&gt;
                &lt;div class="card-body"&gt;
                  &lt;p class="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
                  &lt;div class="d-flex justify-content-between align-items-center"&gt;
                    &lt;div class="btn-group"&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;View&lt;/button&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;Edit&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;small class="text-muted"&gt;9 mins&lt;/small&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
              &lt;div class="card mb-4 box-shadow"&gt;
                &lt;img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Card image cap"&gt;
                &lt;div class="card-body"&gt;
                  &lt;p class="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
                  &lt;div class="d-flex justify-content-between align-items-center"&gt;
                    &lt;div class="btn-group"&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;View&lt;/button&gt;
                      &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;Edit&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;small class="text-muted"&gt;9 mins&lt;/small&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/main&gt;

    &lt;footer class="text-muted"&gt;
      &lt;div class="container"&gt;
        &lt;p class="float-right"&gt;
          &lt;a href="#"&gt;Back to top&lt;/a&gt;
        &lt;/p&gt;
        &lt;p&gt;Album example is &copy; Bootstrap, but please download and customize it for yourself!&lt;/p&gt;
        &lt;p&gt;New to Bootstrap? &lt;a href="../../"&gt;Visit the homepage&lt;/a&gt; or read our &lt;a href="../../getting-started/"&gt;getting started guide&lt;/a&gt;.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/footer&gt;
&lt;/html&gt;
</code></pre>