<form method="POST">
    <h3>Editing: docs.html</h3>
    <textarea name="content" rows="20" cols="80">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta name=&quot;description&quot; content=&quot;Vali is a responsive and free admin theme built with Bootstrap 5, SASS and PUG.js. It's fully customizable and modular.&quot;&gt;
    &lt;!-- Twitter meta--&gt;
    &lt;meta property=&quot;twitter:card&quot; content=&quot;summary_large_image&quot;&gt;
    &lt;meta property=&quot;twitter:site&quot; content=&quot;@pratikborsadiya&quot;&gt;
    &lt;meta property=&quot;twitter:creator&quot; content=&quot;@pratikborsadiya&quot;&gt;
    &lt;!-- Open Graph Meta--&gt;
    &lt;meta property=&quot;og:type&quot; content=&quot;website&quot;&gt;
    &lt;meta property=&quot;og:site_name&quot; content=&quot;Vali Admin&quot;&gt;
    &lt;meta property=&quot;og:title&quot; content=&quot;Vali - Free Bootstrap 5 admin theme&quot;&gt;
    &lt;meta property=&quot;og:url&quot; content=&quot;http://pratikborsadiya.in/blog/vali-admin&quot;&gt;
    &lt;meta property=&quot;og:image&quot; content=&quot;http://pratikborsadiya.in/blog/vali-admin/hero-social.png&quot;&gt;
    &lt;meta property=&quot;og:description&quot; content=&quot;Vali is a responsive and free admin theme built with Bootstrap 5, SASS and PUG.js. It's fully customizable and modular.&quot;&gt;
    &lt;title&gt;Documentation - Vali Admin&lt;/title&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;!-- Main CSS--&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/main.css&quot;&gt;
    &lt;!-- Font-icon css--&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css&quot;&gt;
  &lt;/head&gt;
  &lt;body class=&quot;app sidebar-mini&quot;&gt;
    &lt;!-- Navbar--&gt;
    &lt;header class=&quot;app-header&quot;&gt;&lt;a class=&quot;app-header__logo&quot; href=&quot;index.html&quot;&gt;Vali&lt;/a&gt;
      &lt;!-- Sidebar toggle button--&gt;&lt;a class=&quot;app-sidebar__toggle&quot; href=&quot;#&quot; data-toggle=&quot;sidebar&quot; aria-label=&quot;Hide Sidebar&quot;&gt;&lt;/a&gt;
      &lt;!-- Navbar Right Menu--&gt;
      &lt;ul class=&quot;app-nav&quot;&gt;
        &lt;li class=&quot;app-search&quot;&gt;
          &lt;input class=&quot;app-search__input&quot; type=&quot;search&quot; placeholder=&quot;Search&quot;&gt;
          &lt;button class=&quot;app-search__button&quot;&gt;&lt;i class=&quot;bi bi-search&quot;&gt;&lt;/i&gt;&lt;/button&gt;
        &lt;/li&gt;
        &lt;!--Notification Menu--&gt;
        &lt;li class=&quot;dropdown&quot;&gt;&lt;a class=&quot;app-nav__item&quot; href=&quot;#&quot; data-bs-toggle=&quot;dropdown&quot; aria-label=&quot;Show notifications&quot;&gt;&lt;i class=&quot;bi bi-bell fs-5&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;ul class=&quot;app-notification dropdown-menu dropdown-menu-right&quot;&gt;
            &lt;li class=&quot;app-notification__title&quot;&gt;You have 4 new notifications.&lt;/li&gt;
            &lt;div class=&quot;app-notification__content&quot;&gt;
              &lt;li&gt;&lt;a class=&quot;app-notification__item&quot; href=&quot;javascript:;&quot;&gt;&lt;span class=&quot;app-notification__icon&quot;&gt;&lt;i class=&quot;bi bi-envelope fs-4 text-primary&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;div&gt;
                    &lt;p class=&quot;app-notification__message&quot;&gt;Lisa sent you a mail&lt;/p&gt;
                    &lt;p class=&quot;app-notification__meta&quot;&gt;2 min ago&lt;/p&gt;
                  &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class=&quot;app-notification__item&quot; href=&quot;javascript:;&quot;&gt;&lt;span class=&quot;app-notification__icon&quot;&gt;&lt;i class=&quot;bi bi-exclamation-triangle fs-4 text-warning&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;div&gt;
                    &lt;p class=&quot;app-notification__message&quot;&gt;Mail server not working&lt;/p&gt;
                    &lt;p class=&quot;app-notification__meta&quot;&gt;5 min ago&lt;/p&gt;
                  &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class=&quot;app-notification__item&quot; href=&quot;javascript:;&quot;&gt;&lt;span class=&quot;app-notification__icon&quot;&gt;&lt;i class=&quot;bi bi-cash fs-4 text-success&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;div&gt;
                    &lt;p class=&quot;app-notification__message&quot;&gt;Transaction complete&lt;/p&gt;
                    &lt;p class=&quot;app-notification__meta&quot;&gt;2 days ago&lt;/p&gt;
                  &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class=&quot;app-notification__item&quot; href=&quot;javascript:;&quot;&gt;&lt;span class=&quot;app-notification__icon&quot;&gt;&lt;i class=&quot;bi bi-envelope fs-4 text-primary&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;div&gt;
                    &lt;p class=&quot;app-notification__message&quot;&gt;Lisa sent you a mail&lt;/p&gt;
                    &lt;p class=&quot;app-notification__meta&quot;&gt;2 min ago&lt;/p&gt;
                  &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class=&quot;app-notification__item&quot; href=&quot;javascript:;&quot;&gt;&lt;span class=&quot;app-notification__icon&quot;&gt;&lt;i class=&quot;bi bi-exclamation-triangle fs-4 text-warning&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;div&gt;
                    &lt;p class=&quot;app-notification__message&quot;&gt;Mail server not working&lt;/p&gt;
                    &lt;p class=&quot;app-notification__meta&quot;&gt;5 min ago&lt;/p&gt;
                  &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class=&quot;app-notification__item&quot; href=&quot;javascript:;&quot;&gt;&lt;span class=&quot;app-notification__icon&quot;&gt;&lt;i class=&quot;bi bi-cash fs-4 text-success&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;div&gt;
                    &lt;p class=&quot;app-notification__message&quot;&gt;Transaction complete&lt;/p&gt;
                    &lt;p class=&quot;app-notification__meta&quot;&gt;2 days ago&lt;/p&gt;
                  &lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/div&gt;
            &lt;li class=&quot;app-notification__footer&quot;&gt;&lt;a href=&quot;#&quot;&gt;See all notifications.&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;!-- User Menu--&gt;
        &lt;li class=&quot;dropdown&quot;&gt;&lt;a class=&quot;app-nav__item&quot; href=&quot;#&quot; data-bs-toggle=&quot;dropdown&quot; aria-label=&quot;Open Profile Menu&quot;&gt;&lt;i class=&quot;bi bi-person fs-4&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;ul class=&quot;dropdown-menu settings-menu dropdown-menu-right&quot;&gt;
            &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;page-user.html&quot;&gt;&lt;i class=&quot;bi bi-gear me-2 fs-5&quot;&gt;&lt;/i&gt; Settings&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;page-user.html&quot;&gt;&lt;i class=&quot;bi bi-person me-2 fs-5&quot;&gt;&lt;/i&gt; Profile&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;page-login.html&quot;&gt;&lt;i class=&quot;bi bi-box-arrow-right me-2 fs-5&quot;&gt;&lt;/i&gt; Logout&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/header&gt;
    &lt;!-- Sidebar menu--&gt;
    &lt;div class=&quot;app-sidebar__overlay&quot; data-toggle=&quot;sidebar&quot;&gt;&lt;/div&gt;
    &lt;aside class=&quot;app-sidebar&quot;&gt;
      &lt;div class=&quot;app-sidebar__user&quot;&gt;&lt;img class=&quot;app-sidebar__user-avatar&quot; src=&quot;https://randomuser.me/api/portraits/men/1.jpg&quot; alt=&quot;User Image&quot;&gt;
        &lt;div&gt;
          &lt;p class=&quot;app-sidebar__user-name&quot;&gt;John Doe&lt;/p&gt;
          &lt;p class=&quot;app-sidebar__user-designation&quot;&gt;Frontend Developer&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;ul class=&quot;app-menu&quot;&gt;
        &lt;li&gt;&lt;a class=&quot;app-menu__item&quot; href=&quot;dashboard.html&quot;&gt;&lt;i class=&quot;app-menu__icon bi bi-speedometer&quot;&gt;&lt;/i&gt;&lt;span class=&quot;app-menu__label&quot;&gt;Dashboard&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;treeview&quot;&gt;&lt;a class=&quot;app-menu__item&quot; href=&quot;#&quot; data-toggle=&quot;treeview&quot;&gt;&lt;i class=&quot;app-menu__icon bi bi-laptop&quot;&gt;&lt;/i&gt;&lt;span class=&quot;app-menu__label&quot;&gt;UI Elements&lt;/span&gt;&lt;i class=&quot;treeview-indicator bi bi-chevron-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;ul class=&quot;treeview-menu&quot;&gt;
            &lt;li&gt;&lt;a class=&quot;treeview-item&quot; href=&quot;bootstrap-components.html&quot;&gt;&lt;i class=&quot;icon bi bi-circle-fill&quot;&gt;&lt;/i&gt; Bootstrap Elements&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;treeview-item&quot; href=&quot;https://icons.getbootstrap.com/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;&lt;i class=&quot;icon bi bi-circle-fill&quot;&gt;&lt;/i&gt; Font Icons&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;treeview-item&quot; href=&quot;ui-cards.html&quot;&gt;&lt;i class=&quot;icon bi bi-circle-fill&quot;&gt;&lt;/i&gt; Cards&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;treeview-item&quot; href=&quot;widgets.html&quot;&gt;&lt;i class=&quot;icon bi bi-circle-fill&quot;&gt;&lt;/i&gt; Widgets&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;treeview&quot;&gt;&lt;a class=&quot;app-menu__item&quot; href=&quot;#&quot; data-toggle=&quot;treeview&quot;&gt;&lt;i class=&quot;app-menu__icon bi bi-ui-checks&quot;&gt;&lt;/i&gt;&lt;span class=&quot;app-menu__label&quot;&gt;Forms&lt;/span&gt;&lt;i class=&quot;treeview-indicator bi bi-chevron-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;ul class=&quot;treeview-menu&quot;&gt;
            &lt;li&gt;&lt;a class=&quot;treeview-item&quot; href=&quot;form-components.html&quot;&gt;&lt;i class=&quot;icon bi bi-circle-fill&quot;&gt;&lt;/i&gt; Form Components&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;treeview-item&quot; href=&quot;form-samples.html&quot;&gt;&lt;i class=&quot;icon bi bi-circle-fill&quot;&gt;&lt;/i&gt; Form Samples&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;treeview&quot;&gt;&lt;a class=&quot;app-menu__item&quot; href=&quot;#&quot; data-toggle=&quot;treeview&quot;&gt;&lt;i class=&quot;app-menu__icon bi bi-table&quot;&gt;&lt;/i&gt;&lt;span class=&quot;app-menu__label&quot;&gt;Tables&lt;/span&gt;&lt;i class=&quot;treeview-indicator bi bi-chevron-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;ul class=&quot;treeview-menu&quot;&gt;
            &lt;li&gt;&lt;a class=&quot;treeview-item&quot; href=&quot;table-basic.html&quot;&gt;&lt;i class=&quot;icon bi bi-circle-fill&quot;&gt;&lt;/i&gt; Basic Tables&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;treeview-item&quot; href=&quot;table-data-table.html&quot;&gt;&lt;i class=&quot;icon bi bi-circle-fill&quot;&gt;&lt;/i&gt; Data Tables&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;treeview&quot;&gt;&lt;a class=&quot;app-menu__item&quot; href=&quot;#&quot; data-toggle=&quot;treeview&quot;&gt;&lt;i class=&quot;app-menu__icon bi bi-file-earmark&quot;&gt;&lt;/i&gt;&lt;span class=&quot;app-menu__label&quot;&gt;Pages&lt;/span&gt;&lt;i class=&quot;treeview-indicator bi bi-chevron-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;ul class=&quot;treeview-menu&quot;&gt;
            &lt;li&gt;&lt;a class=&quot;treeview-item&quot; href=&quot;blank-page.html&quot;&gt;&lt;i class=&quot;icon bi bi-circle-fill&quot;&gt;&lt;/i&gt; Blank Page&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;treeview-item&quot; href=&quot;page-login.html&quot;&gt;&lt;i class=&quot;icon bi bi-circle-fill&quot;&gt;&lt;/i&gt; Login Page&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;treeview-item&quot; href=&quot;page-lockscreen.html&quot;&gt;&lt;i class=&quot;icon bi bi-circle-fill&quot;&gt;&lt;/i&gt; Lockscreen Page&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;treeview-item&quot; href=&quot;page-user.html&quot;&gt;&lt;i class=&quot;icon bi bi-circle-fill&quot;&gt;&lt;/i&gt; User Page&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;treeview-item&quot; href=&quot;page-invoice.html&quot;&gt;&lt;i class=&quot;icon bi bi-circle-fill&quot;&gt;&lt;/i&gt; Invoice Page&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;treeview-item&quot; href=&quot;page-mailbox.html&quot;&gt;&lt;i class=&quot;icon bi bi-circle-fill&quot;&gt;&lt;/i&gt; Mailbox&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;treeview-item&quot; href=&quot;page-error.html&quot;&gt;&lt;i class=&quot;icon bi bi-circle-fill&quot;&gt;&lt;/i&gt; Error Page&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a class=&quot;app-menu__item active&quot; href=&quot;docs.html&quot;&gt;&lt;i class=&quot;app-menu__icon bi bi-code-square&quot;&gt;&lt;/i&gt;&lt;span class=&quot;app-menu__label&quot;&gt;Docs&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/aside&gt;
    &lt;main class=&quot;app-content&quot;&gt;
      &lt;div class=&quot;app-title&quot;&gt;
        &lt;div&gt;
          &lt;h1&gt;&lt;i class=&quot;bi bi-code-square&quot;&gt;&lt;/i&gt; Documentation&lt;/h1&gt;
          &lt;p&gt;Documentation of vali admin&lt;/p&gt;
        &lt;/div&gt;
        &lt;ul class=&quot;app-breadcrumb breadcrumb&quot;&gt;
          &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;i class=&quot;bi bi-house-door fs-6&quot;&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Documentation&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class=&quot;tile&quot;&gt;
        &lt;div class=&quot;tile-body&quot;&gt;
          &lt;div class=&quot;docs&quot; style=&quot;max-width: 700px;&quot;&gt;
            &lt;h2 class=&quot;docs-title&quot;&gt;Directory Structure&lt;/h2&gt;
            &lt;pre class=&quot;directory-structure&quot;&gt;│
├── docs - &lt;i&gt;compiled files&lt;/i&gt;
│   ├── css
│   ├── images
│   └── js
└── src - &lt;i&gt;Layout and style source files&lt;/i&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;├── pug - &lt;i&gt;Layout source&lt;/i&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;└── sass - &lt;i&gt;Style source&lt;/i&gt;
&lt;/pre&gt;
            &lt;h2 class=&quot;docs-title&quot; id=&quot;Compilation-of-source-files&quot;&gt;Compilation of source files&lt;/h2&gt;
            &lt;p&gt;The theme is built using SASS and PugJs which are in turn compiled into HTML and CSS by Grunt. If you are not familiar with Grunt, &lt;a href=&quot;https://24ways.org/2013/grunt-is-not-weird-and-hard/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;here&lt;/a&gt; is an article to get started. If you are familiar with Grunt follow the instruction mentioned bellow to edit or customize the source. &lt;/p&gt;
            &lt;p&gt;If you don't want to edit theme you can use the compiled files directly inside &lt;code&gt;docs&lt;/code&gt; folder.&lt;/p&gt;
            &lt;p&gt;Run &lt;code&gt;npm install&lt;/code&gt; command in project root directory to install and build dependencies.&lt;/p&gt;
            &lt;p&gt;Use &lt;code&gt;npm run dev&lt;/code&gt; task to edit and compile source files on the go or use &lt;code&gt;npm run build&lt;/code&gt; task to compile all source files at once.&lt;/p&gt;
            &lt;h2 class=&quot;docs-title&quot; id=&quot;Layout-Customization&quot;&gt;Layout Customization&lt;/h2&gt;
            &lt;p&gt;The layout is built using PugJs. All the layout source files are located in &lt;code&gt;src/pug&lt;/code&gt; directory. There are two sub directories inside this directory: 
              &lt;ol&gt;
                &lt;li&gt;&lt;code&gt;layout&lt;/code&gt; - Includes common HTML skeleton layout which is extended by all the pages&lt;/li&gt;
                &lt;li&gt;&lt;code&gt;includes&lt;/code&gt; - Includes layout partials like sidebar and navbar and footer&lt;/li&gt;
              &lt;/ol&gt;
            &lt;/p&gt;
            &lt;h2 class=&quot;docs-title&quot; id=&quot;Style-Customization&quot;&gt;Style Customization&lt;/h2&gt;
            &lt;p&gt;The styles are written in SASS. All the style files are located in &lt;code&gt;src/sass&lt;/code&gt; directory. There is a file in this directory &lt;code&gt;main.sass&lt;/code&gt; which imports all the files and exported as main.css There are four sub directories inside this directory:
              &lt;ol&gt;
                &lt;li&gt;&lt;code&gt;1-tools&lt;/code&gt; - It includes styles of all the external libraries and a file &lt;code&gt;_var.scss&lt;/code&gt; which contains the variables required for the application&lt;/li&gt;
                &lt;li&gt;&lt;code&gt;2-basics&lt;/code&gt; - It contains the basic style like overall structure css and theming options&lt;/li&gt;
                &lt;li&gt;&lt;code&gt;3-component&lt;/code&gt; - It contains the styles for the components like card, widgets, sidebar, navbar etc&lt;/li&gt;
                &lt;li&gt;&lt;code&gt;4-pages&lt;/code&gt; - It contains the styles for the specific pages like login page, lock-screen page &lt;/li&gt;
              &lt;/ol&gt;
            &lt;/p&gt;
            &lt;p&gt;To customize the primary color of the theme and sidebar you need to change the variables in the &lt;code&gt;1-tools/_var.scss&lt;/code&gt;. The detailed documentation about changing the colors is mentioned in this file itself.&lt;/p&gt;
            &lt;p&gt;If you don't want to use particular component or plug-in just comment the import statement for that particular component in &lt;code&gt;src/sass/main.scss&lt;/code&gt; and compile the SASS by running &lt;code&gt;npm run build&lt;/code&gt; command.&lt;/p&gt;
            &lt;h2 class=&quot;docs-title&quot; id=&quot;Compatibility-with-other-frameworks&quot;&gt;Compatibility with other frameworks&lt;/h2&gt;
            &lt;p&gt;This theme is not built for a specific framework or technology like Angular or React etc. But due to it's modular nature it's very easy to incorporate it into any front-end or back-end framework like Angular, React or VueJs or Node JS. The CSS is modular enough to be incorporated in any framework. While the Javascript used to make the components interactive can be used from any of the following framework.&lt;/p&gt;
            &lt;p&gt;If you are using Angular you can use &lt;a href=&quot;https://angular-ui.github.io/bootstrap/&quot; rel=&quot;noopener&quot;&gt;ui-bootstrap&lt;/a&gt;, for React use &lt;a href=&quot;https://react-bootstrap.github.io/&quot; rel=&quot;noopener&quot;&gt;React-Bootstrap&lt;/a&gt; and for VueJs you can use &lt;a href=&quot;https://yuche.github.io/vue-strap/&quot; rel=&quot;noopener&quot;&gt;VueStrap&lt;/a&gt;.&lt;/p&gt;
            &lt;p&gt;If you are using Node JS as your web server you can use pug as your layout engine to render html templates as is without compiling them to HTML. More details are available &lt;a href=&quot;https://pugjs.org/api/express.html&quot; target=&quot;_balnk&quot;&gt;here&lt;/a&gt;.&lt;/p&gt;
            &lt;h2 class=&quot;docs-title&quot; id=&quot;RTL-Support&quot;&gt;RTL Support&lt;/h2&gt;
            &lt;p&gt;To enable RTL support
              &lt;ul&gt;
                &lt;li&gt;Uncomment this line &lt;code&gt;@import '3-component/rtl';&lt;/code&gt; in &lt;code&gt;src/sass/main.scss&lt;/code&gt;. &lt;/li&gt;
                &lt;li&gt;Add &lt;code&gt;dir=&quot;rtl&quot;&lt;/code&gt; attribute to &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; tag in &lt;code&gt;src/pug/layouts/_layout.pug&lt;/code&gt;.&lt;/li&gt;
                &lt;li&gt;Build the source files using &lt;code&gt;npm run build&lt;/code&gt; command.&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/p&gt;
            &lt;h2 class=&quot;docs-title&quot; id=&quot;Contribution-and-Issues&quot;&gt;Contribution &amp; Issues&lt;/h2&gt;
            &lt;p&gt;If you liked the theme do star and fork it on &lt;a href=&quot;https://github.com/pratikborsadiya/vali-admin&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;GitHub&lt;/a&gt;. If you find anything missing or want to contribute to this documentation, the source is available &lt;a href=&quot;https://github.com/pratikborsadiya/vali-admin/blob/master/src/pug/docs.pug&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;here&lt;/a&gt;. If you have an issue or feature request regarding theme please report it &lt;a href=&quot;https://github.com/pratikborsadiya/vali-admin/issues/new&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;here&lt;/a&gt;.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/main&gt;
    &lt;!-- Essential javascripts for application to work--&gt;
    &lt;script src=&quot;js/jquery-3.7.0.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
    &lt;!-- Page specific javascripts--&gt;
    &lt;!-- Google analytics script--&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
      if(document.location.hostname == 'pratikborsadiya.in') {
      	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      	ga('create', 'UA-72504830-1', 'auto');
      	ga('send', 'pageview');
      }
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</textarea><br>
    <input type="submit" value="Save">
</form>