Twitter Bootstrap Question posted in

javascript not working in flask – Twitter bootstrap

<title>TheSaaS - Responsive Bootstrap SaaS, Software & WebApp Template</title>

<script>if (top !== self) top.location.replace(self.location.href +'?utm_source=themeforest&utm_medium=preview&utm_campaign=thesaas');</script>

<!-- Styles -->

<link type="text/css" href="{{url_for('static',filename='assets/css/core.min.css')}}" rel="stylesheet">
<link type="text/css" href="{{url_for('static',filename='assets/css/thesaas.min.css')}}" rel="stylesheet">
<link type="text/css" href="{{url_for('static',filename='assets/css/style.css')}}" rel="stylesheet">

<!-- Favicons -->
<link rel="apple-touch-icon" href="{{url_for('static',filename='assets/img/apple-touch-icon.png')}}">
<link rel="icon" href="{{url_for('static',filename='assets/img/favicon.png')}}">

<!--  Open Graph Tags -->
<meta property="og:title" content="TheSaaS">
<meta property="og:description" content="A responsive, professional, and multipurpose SaaS, Software, Startup and WebApp landing template powered by Bootstrap 4.">
<meta property="og:image" content="http://thetheme.io/thesaas/assets/img/og-img.jpg">
<meta property="og:url" content="http://thetheme.io/thesaas/">
<meta name="twitter:card" content="summary_large_image">


<!-- Topbar -->
<nav class="topbar topbar-inverse topbar-expand-md topbar-sticky">
  <div class="container">

    <div class="topbar-left">
      <button class="topbar-toggler">&#9776;</button>
      <a class="topbar-brand" href="index.html">
        <img class="logo-default" src="{{url_for('static',filename='assets/img/logo.png')}}" alt="logo">
        <img class="logo-inverse" src="{{url_for('static',filename='assets/img/logo-light.png')}}" alt="logo">
      </a>
    </div>




  </div>
</nav>
<!-- END Topbar -->




<!-- Header -->
<header class="header fadeout header-inverse pb-0 h-fullscreen" style="background-image: linear-gradient(to bottom, #243949 0%, #517fa4 100%);">
  <canvas class="constellation"></canvas>

  <div class="container">
    <div class="row h-full">
      <div class="col-12 text-center align-self-center">
        <h1 class="fs-50 fw-600 lh-15 hidden-sm-down">Built for <span class="text-primary" data-type="Authors, Startups, Entrepreneurs, SaaS, WebApps"></span></h1>
        <h1 class="fs-35 fw-600 lh-15 hidden-md-up">Built for<br><span class="text-primary" data-type="Authors, Startups, Entrepreneurs, SaaS, WebApps"></span></h1>
        <br>
        <p class="fs-20 hidden-sm-down"><strong>TheSaaS</strong> is an elegant, modern and fully customizable SaaS and WebApp template</p>
        <p class="fs-16 hidden-md-up"><strong>TheSaaS</strong> is an elegant, modern and fully customizable SaaS and WebApp template</p>
        <br>
        <hr class="w-60 hidden-sm-down">
        <br>
        <a class="btn btn-xl btn-round btn-primary fs-20 fw-500 w-350 shadow-3 hidden-sm-down" href="https://themeforest.net/item/thesaas-responsive-bootstrap-saas-software-webapp-template/19778599?license=regular&amp;open_purchase_for_item_id=19778599&amp;purchasable=source&amp;ref=thethemeio">Purchase Now - $19</a>
        <a class="btn btn-lg btn-round btn-primary w-250 shadow-3 hidden-md-up" href="https://themeforest.net/item/thesaas-responsive-bootstrap-saas-software-webapp-template/19778599?license=regular&amp;open_purchase_for_item_id=19778599&amp;purchasable=source&amp;ref=thethemeio">Purchase Now - $19</a>
        <br>
        <p class="mt-2 mt-md-4"><a href="https://themeforest.net/item/thesaas-responsive-bootstrap-saas-software-webapp-template/19778599?license=extended&amp;open_purchase_for_item_id=19778599&amp;purchasable=source&amp;ref=thethemeio"><small>or purchase an Extended License</small></a></p>
      </div>

      <div class="col-12 align-self-end text-center pb-70">
        <a class="scroll-down-2 scroll-down-inverse" href="#" data-scrollto="section-demo"><span></span></a>
      </div>
    </div>
  </div>
</header>
<!-- END Header -->




<!-- Main container -->
<main class="main-content">




  <!--
  |‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
  | Sample Landing Pages
  |‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
  !-->
  <section class="section overflow-hidden" id="section-demo">
    <div class="container">
      <header class="section-header">
        <small>Demo</small>
        <h2>Sample Landing Pages</h2>
        <hr>
        <p class="lead">Apart from internal pages, we have designed several single sample pages to get start with.</p>
      </header>


      <div class="row gap-y text-center">

        <div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
          <p><a href="demo-helpato.html"><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-helpato-sm.jpg')}}" alt="demo helpato landing"></a></p>
          <p><strong>Helpato</strong></p>
        </div>


        <div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="150">
          <p><a href="demo-trello.html"><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-trello-sm.jpg')}}" alt="demo helpato landing"></a></p>
          <p><strong>Trello</strong></p>
        </div>


        <div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
          <p><a href="demo-gmail.html"><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-gmail-sm.jpg')}}" alt="demo helpato landing"></a></p>
          <p><strong>Gmail</strong></p>
        </div>


        <div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
          <p><a href="demo-skype.html"><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-skype-sm.jpg')}}" alt="demo helpato landing"></a></p>
          <p><strong>Skype</strong></p>
        </div>


        <div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="150">
          <p><a href="demo-github.html"><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-github-sm.jpg')}}" alt="demo github landing"></a></p>
          <p><strong>GitHub</strong></p>
        </div>


        <div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
          <p><a href="demo-app.html"><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-app-sm.jpg')}}" alt="demo app landing"></a></p>
          <p><strong>Mobile App</strong></p>
        </div>


        <div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
          <p><a href="demo-bootstrap.html"><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-bootstrap-sm.jpg')}}" alt="demo bootstrap landing"></a></p>
          <p><strong>Bootstrap</strong></p>
        </div>


        <div class="col-12 col-md-6 col-lg-4 hidden-sm-down" data-aos="fade-up" data-aos-delay="150">
          <p><a href="demo-slack.html"><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-slack-sm.jpg')}}" alt="demo slack landing"></a></p>
          <p><strong>Slack</strong></p>
        </div>


        <div class="col-12 col-md-6 col-lg-4 hidden-sm-down" data-aos="fade-up" data-aos-delay="300">
          <p><a href="demo-zendesk.html"><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-zendesk-sm.jpg')}}" alt="demo zendesk landing"></a></p>
          <p><strong>Zendesk</strong></p>
        </div>

      </div>


    </div>
  </section>











</main>
<!-- END Main container -->






<!-- Footer -->
<footer class="site-footer">
  <div class="container">
    <div class="row gap-y align-items-center">
      <div class="col-12 col-lg-3">
        <p class="text-center text-lg-left">
          <a href="index.html"><img src="{{url_for('static',filename='assets/img/logo.png')}}" alt="logo"></a>
        </p>
      </div>

      <div class="col-12 col-lg-6">
        <ul class="nav nav-inline nav-primary nav-hero">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="blog.html">Blog</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="page-feature.html">Features</a>
          </li>
          <li class="nav-item hidden-sm-down">
            <a class="nav-link" href="page-pricing.html">Pricing</a>
          </li>
          <li class="nav-item hidden-sm-down">
            <a class="nav-link" href="page-contact.html">Contact</a>
          </li>
        </ul>
      </div>

      <div class="col-12 col-lg-3">
        <div class="social text-center text-lg-right">
          <a class="social-facebook" href="https://www.facebook.com/thethemeio"><i class="fa fa-facebook"></i></a>
          <a class="social-twitter" href="https://twitter.com/thethemeio"><i class="fa fa-twitter"></i></a>
          <a class="social-instagram" href="https://www.instagram.com/thethemeio/"><i class="fa fa-instagram"></i></a>
          <a class="social-dribbble" href="https://dribbble.com/thethemeio"><i class="fa fa-dribbble"></i></a>
        </div>
      </div>
    </div>
  </div>
</footer>
<!-- END Footer -->



<!-- Scripts -->
<script src="{{url_for('static',filename='assets/js/core.min.js')}}"></script>
<script src="{{url_for('static',filename='assets/js/thesaas.min.js')}}"></script>
<script src="{{url_for('static',filename='assets/js/script.js')}}"></script>

Hello,
This is a template which I have modified .. outside flask when I am running this, this works fine ( without url_for ). But when I am trying to use within flask, the javascript files are not working .. please help me

Tags:

2

Answers


  1. 0

    Make sure your directory structure is modified for the root of you flask application, otherwise you’re requesting js files that aren’t there

    Login or Signup to reply.
  2. 0

    You don’t have to use url_for. Instead try:

    <link type="text/css" src="{static/assets/css/core.min.css}" rel="stylesheet">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search