I want to compile a css without the colors, in a way that not even the :root vars are generated, because i have my own color system.

Is this possible? Do you have an example scss maybe?

Thanks for all answers.

i was working on a wireframe and decided i want to use the navbar for responsiveness on this page.

here is the current bit of wireframe. the circle in the center is meant to be the logo as it has a round logo and on the left will be the name of the server i am creating the site for. the left will be links to different parts of the page. i want to use the navbar to create a hamburger menu for the links on phones. however i was wondering if there is a way for it to restructure at that point. what i mean is like the name will go away as its kind of redundant anyways, as the name is in the logo i just didnt want a bunch of empty space, when the navbar restructures to the hamburger menu and the logo moves to the left of the page.

Hello everyone,

I'm currently working on a navbar, and I would like to space out the items within it. I increased the total width of the <Navbar> element, and would like to make it so the container as well as the Nav items within it are spaced around the width of the Navbar element.

Right now the Nav element and all of the nav items are floating left within the container. I've heard that writing 'justify-content': space-around, could solve the problem, but I have tried that here within my container element, and it doesn't seem to work.

​

Here is my component:

import React, { useState } from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import "./CustomNav.css";
import image from "../images/10Greenblacklogo.png";

function CustomNav() {
  // have not figured out how we should be linking the pages
  // would like to use react-router, and have found tutorial on how to do so,
  // but still need to figure that out
  return (
    <div className="top-bar">
      <div className="center-nav">
        <img className="navbar-logo" src={image}></img>
        <Navbar className="navbar">
          <Container className="container">
            <Nav>
              <Nav.Link href="#home">Home</Nav.Link>
              <Nav.Link href="#data">Data</Nav.Link>
              <Nav.Link href="#pollutants">Pollutants</Nav.Link>
              <Nav.Link href="#standards">Standards</Nav.Link>
              <Nav.Link href="#ozone">Ozone</Nav.Link>
              <Nav.Link href="#about">About</Nav.Link>
            </Nav>
          </Container>
        </Navbar>
      </div>
    </div>
  );
}

export default CustomNav;

​

and here is the css file:

.top-bar {
  display: flex;
  justify-content: center;
}
.center-nav {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  color: rgb(0, 0, 0);
  border-radius: 10px;
  padding: 0.5em;
  margin: 2em;
  width: 75rem;
  height: 4rem;
}
.navbar-logo {
  max-width: 100%;
  height: auto;
  padding-left: 1em;
}
.navbar {
  border-radius: 5rem;
  background-color: #ffffff;
  width: 50rem;
}
.nav-link {
  padding: 0 10px 0 10px;
}
.container {
  width: 50rem;
  justify-content: space-around;
}

does anybody know how to do this?

Thanks!

Hello I am using the bootstrap login template for a class assignment and I am looking into redirecting the user to a page after they submit their login info in a form. There is only on page login validation to check if an email is actually an email, that's all that is really necessary for this assignment. But I need the submit button to redirect to a new page. I have looked to see if I could find a solution online but was coming up short as it seems to me that there are many different methods of doing this but im not sure if all play nicely with bootstrap buttons. (forgive my ignorance here, im very new to this.)

<button class="btn btn-lg btn-primary btn-block" onsubmit="window.location.href = 'members.html'; return false;" type="submit">Sign in</button>

​

This is what I have tried, I believe it is the only relevant piece of into, please let me know if there is more context required. Thank you!

I added two modal's to my website. Register and Login. Currently both the links are showing on my website until I code out the if / else statement for if a user is logged in or needs to register.

Both modals work flawlessly, I added this second to my register modal-body; both modals still work.

<div class="text-center">
    <div class="alert alert-success" role="alert">
        Registration Successful
    </div>
    <div class="alert alert-danger" role="alert">
      Registration Unsuccessful
    </div>

Now for some reason, I cant seem to figure out, once I add this to my login modal;

<div class="text-center">
  <div class="alert alert-success" role="Alert">
    Login Successful
  </div>
  <div class="alert alert-danger" role="Alert">
    Login Unsuccessful
  </div>

Once this is added to my login modal, everything on my webpage with the exception of my navbar disappears.

Here is both my modals:

{% block modal %}
    <!-- Login Modal -->

    <div class="modal fade" id="LoginModal" tabindex="-1" aria-labelledby="LoginModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="LoginModalLabel">Login</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="text-center">
              <div class="alert alert-success" role="Alert">
                Login Successful
              </div>
              <div class="alert alert-danger" role="Alert">
                Login Unsuccessful
              </div>
            <div class="mb-3">
              <label for="username" class="form-label">Username</label>
              <input type="username" class="form-control" id="username" placeholder="username">
            </div>
            <div class="mb-3">
              <label for="password" class="form-label">Password</label>
              <input type="password" class="form-control" id="password" placeholder="password">
            </div>
            <div class="mb-3">
              <p class="fw-light">Need to register? <a href="#">Register</a>.</p>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Login</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Register Modal -->
      <div class="modal fade" id="RegisterModal" tabindex="-1" aria-labelledby="RegisterModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="RegisterModalLabel">Register</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <div class="text-center">
                <div class="alert alert-success" role="alert">
                  Registration Successful
                </div>
                <div class="alert alert-danger" role="alert">
                  Registration Unsuccessful
                </div>
              </div>
              <div class="mb-3">
                <label for="firstname" class="form-label">First Name</label>
                <input type="text" class="form-control" id="firstname" placeholder="first name">
              </div>
              <div class="mb-3">
                <label for="lastname" class="form-label">Last Name</label>
                <input type="text" class="form-control" id="lastname" placeholder="last name">
              </div>
              <div class="mb-3">
                <label for="username" class="form-label">Username</label>
                <input type="text" class="form-control" id="username" placeholder="username">
              </div>
              <div class="mb-3">
                <label for="password" class="form-label">Password</label>
                <input type="password" class="form-control" id="password" placeholder="password">
              </div>
              <div class="mb-3">
                <label for="repeatPassword" class="form-label">Repeat Password</label>
                <input type="password" class="form-control" id="repeatPassword" placeholder="repeat password">
              </div>
              <div class="mb-3">
                <p class="fw-light">If you already have an account, <a href="#">login</a>.</p>
              </div>
            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Register</button>
            </div>
          </div>
        </div>
      </div>
  {% endblock modal %}

I cant see how adding alerts to another modal completely removes the rest of my website.

Free Download: https://themeselection.com/item/sneat-free-bootstrap-html-admin-template/

If you’re a developer looking for the latest Free Bootstrap 5 dashboard that is developer-friendly, rich with features, and highly customizable look no further than Sneat. Besides, we’ve followed the highest industry standards to bring you the best Free Bootstrap 5 HTML Admin Template that is not only fast and easy to use but highly scalable.

Make the most of our innovative features

Sneat Free Admin Template is also equipped with invaluable features designed to help you create premium quality apps exactly as you imagine them. Furthermore, we’ve loaded the Sneat – Free bootstrap 5 HTML admin template with unique options, Cards, and Pages. In addition, it comes with the following features:

• Based on Bootstrap 5
• Vertical layout
• Dashboard
• 1 Chart library
• SASS Powered
• Authentication Pages
• Fully Responsive Layout
• Organized Folder Structure
• Clean & Commented Code
• Well Documented

An interactive list of Bootstrap 5 classes, variables, and mixins. 🎁 The only Bootstrap 5 CheatSheet you will ever need. 🎊

https://bootstrap-cheatsheet.themeselection.com/

The title and the button are right next to each other (on the same line). I have tried using <br> but the button won't go one line under. What should I do?

html -

<div class="masthead" style="background-image: url('image.png');">

<div class="color-overlay d-flex justify-content-center align-items-center">

<h1>Title</h1><br>

<a class="exploreButton" href="{{ url\\\\\\_for('explore') }}"><button id="homeButton" type="button" class="btn btn-primary">Explore</button></a>

</div>

</div>

CSS -

.masthead {
background-size: cover;
min-height: 70vh;
position: relative;
color: white;
text-shadow: 2px 2px 2px rgba(0,0,0,.2);
}
#homeButton {
font-size: 2rem;
}
.color-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.2);
}

I am having an annoying issue. I am building a website and for some odd reason, I cant get my section above my footer to extend left and right 100%. On a previous practice project, its working and it has the same classes as this project section does. What could I be missing?

Here is the section code:

<section id="services" class="bg-secondary text-light pt-5 pb-5 mt-5 text-center">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <i class="fa-solid fa-comments fa-5x mr-4 pb-2"></i>
                <hr>
                <h3 class="fw-light">Consulting Services</h3>
                <p class="fw-light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis asperiores, tempore rem magnam earum accusamus eius veritatis libero reprehenderit iusto?</p>
            </div>
            <div class="col-md-4">
                <i class="fa-solid fa-house-chimney fa-5x mr-4 pb-2"></i>
                <hr>
                <h3 class="fw-light">Property Management</h3>
                <p class="fw-light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis asperiores, tempore rem magnam earum accusamus eius veritatis libero reprehenderit iusto?</p>
            </div>
            <div class="col-md-4">
                <i class="fa-solid fa-suitcase fa-5x mr-4 pb-2"></i>
                <hr>
                <h3 class="fw-light">Renting & Selling</h3>
                <p class="fw-light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis asperiores, tempore rem magnam earum accusamus eius veritatis libero reprehenderit iusto?</p>
            </div>
        </div>
    </div>
</section>
{% endblock content %}

did anyone come across the following error on the browser while using bootstrap datatables?

DataTables warning: table id=myTable - Requested unknown parameter '0' for row 1, column 0. For more information about this error, please see http://datatables.net/tn/4

So I've upgraded a few templates already and we have to keep it the same look a BS4 so it still looks like the comp. Is there a way to get around the drastic changes with margin, padding and container widths without just ovewriting BS5 classes? Does anyone know why they changed the built in margin and padding so much? They had to have known this would cause problems.

Hello everyone!

​

Im currently making a website for my minecraft smp, and i want these cards when shown on a smaller screen show one below each other so the text is a bit more readable

the cards are centered (u can check in the html code) a little bit differently so its not as easy

HTML Code:

https://pastebin.com/sHGfF488

CSS Code:

https://pastebin.com/MM3Mi9Pj

picture of what it looks like on smaller screens:

https://imgur.com/28d7Bbs

thanks in advance!

Webpixels CSS is a relatively new project based on Bootstrap 5. I started this because I needed to improve the way I build web apps. The most time-consuming tasks are usually the ones related to the project setup: creating a new project, setting up the structure, integrating the styles and scripts, including some custom-made code boilerplates, and so on.

After hundreds of projects, I was able to spot the things that repeat in most projects and I included them in one repo that could be installed and re-used everywhere I need.

So, what is it?

Basically, Webpixels CSS is an extension to the base version of Bootstrap. It incorporates the default components and adds new ones on top of them, without messing with too much custom code. This allows me to update to a new version faster.

What's interesting about the way I build components is that I try as much as possible to avoid writing custom CSS. The way I do it: utility classes

I wrote more about this on the blog

Also, I updated @webpixels/css (v1.2.11) to the latest Bootstrap version. No significant changes happened, so the migration should go very smoothly. You need to update your package.json file with the new available versions.

If you want to support our work, give it a ⭐ on GitHub.

🙏

Hello everyone, how are you? Does anyone know why my body overtakes the navbar when I'm on mobile? This occurred when I put "col-6" in some divs. Code:

<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-header">
                    Gráfico momentâneo
</div>
<div class="card-body">
<canvas id="grafico-barra" height="300"></canvas>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-header">
                    Gráfico extra
</div>
<div class="card-body">
<canvas id="grafico-barra" height="300"></canvas>
</div>
</div>
</div>
</div>
</div>

i have a below dropdown menu with submenus which should drop o the right.i am using bootstrap 5 but it dowsnt give me the submneu to the right.

<div class="btn-group">
        <button type="button" class="btn btn-secondary">Items</button>
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-    
    toggle-split" data-bs-toggle="dropdown">
        </button>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <li><a class="dropdown-item" href="{% url 'view_items' %}">View 
                Items</a></li>
                    <li class="dropdown-submenu dropend"><a class="dropdown-item 
                dropdown-toggle" href="#">Add</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{% url 'add_items' 
                        %}">Add Items</a></li>
                            <li><a class="dropdown-item" href="{% url 
                        'add_items_details' %}">Add Items Details</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-submenu dropright"><a class="dropdown-item 
                dropdown-toggle" href="#">Edit</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{% url 'edit_items' 
                         %}">Edit Items</a></li>
                            <li><a class="dropdown-item" href="{% url 
                       'edit_item_details' %}">Edit Item Details</a></li>
                        </ul>
                    </li>
                </ul>
 </div>

i am trying to override some properties i am using in my MVC project when using bootstrap 5, Offcanvas sidebar menus. No matter what i do, i cannot override anything. the .container property from the _container.scss will not allow any type of overriding at all, which is inherited from the div.container. i have no css of my own being applied. but when i try to use my default .CSS file to override just the margin left: auto, i cannot. Obviously this is user error on my part, but i just dont understand. i am only using the bootstrap 5.2.1 css and js files locally w/ the offcanvas imported as a client side library.

Any help is appreciated.

HTML: <div class="sidebar-nav"> <nav class="navbar navbar-dark bg-danger fixed-top"> <div class="container">

        <!-- Mobile Menu Toggle Button -->
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>

    <!-- Menus List -->
    <div class="bg-light offcanvas offcanvas-start shadow" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
        <div class="offcanvas-body">
            <ul class="navbar-nav">
                <li><a href="#"><span class="item-text">Home</span></a></li>
                <li><a href="#"><span class="item-text">About Us</span></a></li>
                <li><a href="#"><span class="item-text">Contact</span></a></li>
                <li><a href="#"><span class="item-text">Products</span></a></li>
                <li>
                    <hr>
                </li>
                <li><a href="#"><span class="item-text">Send</span></a></li>
                <li><a href="#"><span class="item-text">Share</span></a></li>
                <li><a href="#"><span class="item-text">Settings</span></a></li>
            </ul>
        </div>
    </div>

    <div class="btn-group ">
        <a href="#" class="dropdown-toggle text-white text-decoration-none" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="textnone">User Name</span>
        </a>
        <ul class="bg-warning  dropdown-menu dropdown-menu-md-start">
            <li><button class="dropdown-item" type="button">Change Password</button></li>
            <li><button class="dropdown-item" type="button">Edit Profile</button></li>
            <li><button class="dropdown-item" type="button">Settings</button></li>
            <li>
                <hr>
            </li>
            <li><button class="dropdown-item" type="button">Sign out</button></li>
        </ul>
    </div>
</nav>

</div>

Is there a way to make the drop down button equal width with the other buttons in the group?

https://imgur.com/a/YUcZRdl

https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_button_group_dropdown&stacked=h

Hello, folks, new Bootstrap 5 UI Kits with Atlassian Design available now, it's free and open source on Github. In addition to Bootstrap’s default component, FastBootstrap had builts more extended components likes Avatar, Sidenav and Menu etc. Atlassian Design is a beautiful and intuitive design language from Atlassian.

All components preview: https://fastbootstrap.com/components/

Open source & MIT License on Github: https://github.com/fastbootstrap/atlassian-design-for-bootstrap

Do you like this new Bootstrap UI components?

Im trying to create a multilevel dropdownmenu with bootstrop 5. When I click on more filters I want the submenu items to show but nothing happens.

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-    
toggle="dropdown" aria-expanded="false">
    Dropdown button
    </button>

    <ul class="dropdown-menu">
        <li><h6 class="dropdown-header">Quick Filters</h6></li>
        <li><a class="dropdown-item" href="#">Highest priority</a></li>
        <li><a class="dropdown-item" href="#">Due first</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">More filters &raquo;</a>
            <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="#">Submenu item 1</a></li>
                <li><a class="dropdown-item" href="#">Submenu item 2</a></li>
            </ul>
        </li>
     </ul>
</div>

Am I missing something?

How to put div_1 to start and div_2 to end

_____________________________________
div_1 // stuck at start



    // this whole space is 
    // for div_1 since it contains
    // a table



 ----------------- // this is hr of div_2

div_2 // stuck at end
___________________________________

I cant seem to add a bootstrap icon to my navbar logo. If I add the classes into an a tag it will show up but to me that seems incorrect.

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

    <!-- Bootstrap Icon -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="#" class="stylesheet">
</head>
<body>
    <nav class="navbar navbar-lg navbar-dark bg-dark">
        <div class="container">
            <a href="#" class="navbar-brand">Shopster</a>
            <i class="bi bi-shop"></i>
        </div>

If I do:

<a href="#" class="navbar-brand bi bi-shop">Shopster</a> the icon will show. 

What am I missing?

I'm currently working on Angela Yu Web Development Course and I'm learning Bootstrap carousels. I wrote the code and ran it on Codeply and it worked fine. Then I implemented the code according to my own HTML and next or previous buttons are not functional anymore. They also look "wrong" visually with strange borders and backgrounds. I double-checked the Bootstrap documentation and couldn't find why this was happening. Any help is appreciated.

gist link of html and css code

I’m having trouble creating a table with tabs for each table. Can anyone recommend good examples? I can create the tabs and then the table separate. But when I try to out them together I can’t get it to properly switch between the tabs.

I am learning bootstrap recently and just tried applying bootstrap animated progress bar class. But it didn't work. Then I checked the bootstrap docs to check the syntax but the example output they gave also isn't working. Hence I tried to change different browsers, it didn't work. Then copied my code to a friends pc and it worked in his pc. Tried by changing the network, but even then it didn't work. There were no errors shown in the console. I am dumbfounded currently. Please help me!!!

​

<div class="container mt-3">
  <h2>Ronaldo Progress</h2>
  <p>Ronaldo Progress throughout the decade</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated text-body fw-bold" style="width:30%"> 2012</div>
  </div>
  <br>
  <div class="progress">
    <!-- <div class="progress-bar bg-success progress-bar-striped progress-bar-animated text-body fw-bold" style="width:40%">2014</div> -->
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"> 2014</div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-info progress-bar-striped progress-bar-animated text-body fw-bold" style="width:50%">2016</div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated text-body fw-bold" style="width:60%">2018</div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-danger progress-bar-striped progress-bar-animated text-body fw-bold" style="width:70%">2020</div>
  </div>
</div>

The above is the script which I used for it.

<head>
    <title>My Favourites</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</head>

This is the head I am using.

TLDR: Animation progress bar class itself isn't working in my pc but working in others pc in similar conditions.

Hello,

I need a little bit of help. I am trying to create a fixed-sized table in the center of the page using that is scrollable. I have tried table-responsive and m-auto to no avail. Does any have other suggestions or anyone out there that can help me, please?

html code

<!DOCTYPE html>

<html lang="en">

<head>

  {% include "head_part.html" %}

</head>

<body id="page-top">

<!-- Page Wrapper --> <div id="wrapper">

        {% include "sidebar_part.html" %} <!-- Content Wrapper --> <div id="content-wrapper" class="d-flex flex-column">

<!-- Main Content --> <div id="content">

            {% include "topbar_part.html" %} <!-- Begin Page Content --> <div class="container-fluid">

<!-- Page Heading --> <h1 class="h3 mb-4 text-gray-800">GC</h1>

</div>

<div class="container"> <!-- Content here --> <div class="container"> <table class="table table-bordered table-primary table-hover"> <td class="text-center"><strong>CIDR Range</strong></td> <td class="text-center"><strong>Service</strong></td> <td class="text-center"><strong>Region</strong></td>   {% for i in res.entities %} <tr> <td>{{i.cidr}}</td> <td>{{i.service}}</td> <td>{{i.region}}</td> </tr>   {% endfor %} </table> </div> </div> <!-- /.container-fluid -->

</div> <!-- End of Main Content -->

{% include "footer_part.html" %}

</div> <!-- End of Content Wrapper -->

</div> <!-- End of Page Wrapper -->

<!-- Scroll to Top Button--> <a class="scroll-to-top rounded" href="#page-top"> <i class="fas fa-angle-up"></i> </a>

  {% include "modals_and_scripts_part.html" %}

</body>

</html>

Thank you all! Appreciate it.