I am using the navbar from bootstrap 5. I having an UI issue.
What do I have?
This is the navbar I am currently having.
What do I want?
I want to align the navbar buttons (Login and Signup) to the right end.
import React from "react";
import { Link, useNavigate } from "react-router-dom";
const Navbar = (props) => {
let navigate = useNavigate();
const handleLogout = () => {
localStorage.removeItem("token");
console.log("hello");
navigate("/login");
props.showAlert("User Logged Out succesfully! ", "info");
};
return (
<>
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<Link className="navbar-brand" to="/">
Navbar
</Link>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<Link className="nav-link active" aria-current="page" to="/">
Home
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">
About
</Link>
</li>
</ul>
{!localStorage.getItem("token") ? (
<form className="d-flex">
<Link
className="btn btn-outline-success mx-2"
to="/signup"
role="button"
>
SignUp
</Link>
<Link
className="btn btn-outline-success"
to="/login"
role="button"
>
Login
</Link>
</form>
) : (
<form className="d-flex">
<button
className="btn btn-outline-success mx-2"
onClick={handleLogout}
>
LogOut
</button>
</form>
)}
</div>
</div>
</nav>
</>
);
};
export default Navbar;
I have tried many attempts but still, it is not working. I am using bootstrap built-in classes also.
You just need to add a me-auto class with <ul> as given <ul class="navbar-nav me-auto">
import React from "react";
import { Link, useNavigate } from "react-router-dom";
const Navbar = (props) => {
let navigate = useNavigate();
const handleLogout = () => {
localStorage.removeItem("token");
console.log("hello");
navigate("/login");
props.showAlert("User Logged Out succesfully! ", "info");
};
return (
<>
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<Link className="navbar-brand" to="/">
Navbar
</Link>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li className="nav-item">
<Link className="nav-link active" aria-current="page" to="/">
Home
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">
About
</Link>
</li>
</ul>
{!localStorage.getItem("token") ? (
<form className="d-flex">
<Link
className="btn btn-outline-success mx-2"
to="/signup"
role="button"
>
SignUp
</Link>
<Link
className="btn btn-outline-success"
to="/login"
role="button"
>
Login
</Link>
</form>
) : (
<form className="d-flex">
<button
className="btn btn-outline-success mx-2"
onClick={handleLogout}
>
LogOut
</button>
</form>
)}
</div>
</div>
</nav>
</>
);
};
export default Navbar;
Just need to add me-auto in <ul> like this:
<ul className="navbar-nav me-auto">
Related
I am building a react app that renders 2 layouts, a layout without the sidebar nav and topbar when you are not logged in, and then a different layout that does render the topbar and sidebar nav when you are logged in (through a context).
The issue that I am facing is that when logged in, the topbar and sidebar nav render as separate components and any other component that I wish to display ends up all the way at the bottom - see these images for context Pic1 Pic 2
As you can see, everything renders top down ("Dashboard" is an example of a component that I would like rendered next to and below the sidebar and topbar. What I would like to do is render the topbar and sidebar as a single component, and then render any other page components in that large white space. Perhaps there is a way to combine the two bars into a single layout?
I will share some code below...
Topbar.jsx
import "startbootstrap-sb-admin-2-master/css/sb-admin-2.min.css";
import { useAuth } from "../../hooks/auth";
export const TopBar = () => {
const user = useAuth().user;
const { logout } = useAuth();
const handleSubmit = async (e) => {
e.preventDefault();
logout();
};
return (
<div id="content-wrapper" className="d-flex flex-column">
<div id="content">
<div className="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<button
id="sidebarToggleTop"
className="btn btn-link d-md-none rounded-circle mr-3"
>
<i className="fa fa-bars"></i>
</button>
<form className="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div className="input-group">
<input
type="text"
className="form-control bg-light border-0 small"
placeholder="Search for..."
aria-label="Search"
aria-describedby="basic-addon2"
/>
<div className="input-group-append">
<button className="btn btn-primary" type="button">
<i className="fa-solid fa-magnifying-glass"></i>
</button>
</div>
</div>
</form>
<ul className="navbar-nav ml-auto">
<li className="nav-item dropdown no-arrow mx-1">
<div
className="nav-link dropdown-toggle"
href="#"
id="alertsDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i className="fas fa-bell fa-fw"></i>
<span className="badge badge-danger badge-counter">3+</span>
</div>
</li>
<div className="topbar-divider d-none d-sm-block" />
<li className="nav-item dropdown no-arrow">
<div
className="nav-link"
id="userDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<text className="mr-2 d-none d-lg-inline text-gray-600 small">
Hi, {user}!
</text>
<i className="fa-solid fa-user"></i>
</div>
</li>
<li className="nav-item dropdown no-arrow">
<div
className="nav-link"
id="userDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<button
className="btn btn-secondary btn-circle"
type="button"
onClick={handleSubmit}
>
<i className="fa-solid fa-arrow-right-from-bracket"></i>
</button>
</div>
</li>
</ul>
</div>
</div>
</div>
);
};
Navbar.jsx (sidebar)
import "startbootstrap-sb-admin-2-master/css/sb-admin-2.min.css";
import { useAuth } from "../../hooks/auth";
export const Navbar = () => {
return (
<div id="wrapper">
<ul
className="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion"
id="accordionSidebar"
>
<hr className="sidebar-divider my-0" />
<li className="nav-item active">
<a className="nav-link" href="index.html">
<i className="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>
<hr className="sidebar-divider" />
<div className="sidebar-heading">Interface</div>
<li className="nav-item">
<a
className="nav-link collapsed"
href="#"
data-toggle="collapse"
data-target="#collapseTwo"
aria-expanded="true"
aria-controls="collapseTwo"
>
<i className="fas fa-fw fa-cog"></i>
<span>Components</span>
</a>
<div
id="collapseTwo"
className="collapse"
aria-labelledby="headingTwo"
data-parent="#accordionSidebar"
>
<div className="bg-white py-2 collapse-inner rounded">
<h6 className="collapse-header">Custom Components:</h6>
<a className="collapse-item" href="buttons.html">
Buttons
</a>
<a className="collapse-item" href="cards.html">
Cards
</a>
</div>
</div>
</li>
<li className="nav-item">
<a
className="nav-link collapsed"
href="#"
data-toggle="collapse"
data-target="#collapseUtilities"
aria-expanded="true"
aria-controls="collapseUtilities"
>
<i className="fas fa-fw fa-wrench"></i>
<span>Utilities</span>
</a>
<div
id="collapseUtilities"
className="collapse"
aria-labelledby="headingUtilities"
data-parent="#accordionSidebar"
>
<div className="bg-white py-2 collapse-inner rounded">
<h6 className="collapse-header">Custom Utilities:</h6>
<a className="collapse-item" href="utilities-color.html">
Colors
</a>
<a className="collapse-item" href="utilities-border.html">
Borders
</a>
<a className="collapse-item" href="utilities-animation.html">
Animations
</a>
<a className="collapse-item" href="utilities-other.html">
Other
</a>
</div>
</div>
</li>
<hr className="sidebar-divider" />
<div className="sidebar-heading">Addons</div>
<li className="nav-item">
<a
className="nav-link collapsed"
href="#"
data-toggle="collapse"
data-target="#collapsePages"
aria-expanded="true"
aria-controls="collapsePages"
>
<i className="fas fa-fw fa-folder"></i>
<span>Pages</span>
</a>
<div
id="collapsePages"
className="collapse"
aria-labelledby="headingPages"
data-parent="#accordionSidebar"
>
<div className="bg-white py-2 collapse-inner rounded">
<h6 className="collapse-header">Login Screens:</h6>
<a className="collapse-item" href="login.html">
Login
</a>
<a className="collapse-item" href="register.html">
Register
</a>
<a className="collapse-item" href="forgot-password.html">
Forgot Password
</a>
<div className="collapse-divider"></div>
<h6 className="collapse-header">Other Pages:</h6>
<a className="collapse-item" href="404.html">
404 Page
</a>
<a className="collapse-item" href="blank.html">
Blank Page
</a>
</div>
</div>
</li>
<li className="nav-item">
<a className="nav-link" href="charts.html">
<i className="fas fa-fw fa-chart-area"></i>
<span>Charts</span>
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="tables.html">
<i className="fas fa-fw fa-table"></i>
<span>Tables</span>
</a>
</li>
<hr className="sidebar-divider d-none d-md-block" />
<div className="text-center d-none d-md-inline">
<button className="rounded-circle border-0" id="sidebarToggle" />
</div>
</ul>
</div>
);
};
ProtectedLayout.jsx (layout rendered when logged in)
import { Outlet } from "react-router";
import { Navbar } from "../components/common/Navbar";
import { TopBar } from "../components/common/Topbar";
export const ProtectedLayout = () => {
return (
<>
<div>
<TopBar />
<Navbar />
</div>
<Outlet />
</>
);
};
App.js (routing)
import React from "react";
import { Route, Routes } from "react-router-dom";
import { LoginLayout } from "./layout/LoginLayout";
import { ProtectedLayout } from "./layout/ProtectedLayout";
import { ProtectRoutes } from "./hooks/protectedRoute";
import { Login } from "./pages/LoginPage";
import { Dashboard } from "./pages/DashboardPage";
import { Hi } from "./pages/HiPage";
import { About } from "./pages/AboutPage";
export default function App() {
return (
<Routes>
<Route element={<LoginLayout />}>
<Route path="/" element={<Login />} />
</Route>
<Route path="/auth" element={<ProtectRoutes />}>
<Route
path="/auth/dashboard"
element={
<>
<ProtectedLayout />
<Dashboard />
</>
}
/>
<Route
path="/auth/hi"
element={
<>
<ProtectedLayout />
<Hi />
</>
}
/>
<Route
path="/auth/about"
element={
<>
<ProtectedLayout />
<About />
</>
}
/>
</Route>
</Routes>
);
}
Also, if you have any suggestions on bettering the routing I would be incredibly grateful.
Please let me know if you need any other code.
I have created an e-commerce base template in HTML and CSS / Bootstrap. I am trying to convert the template to React components for a NextJS site, but the toggle function was not initially working. I saw I can use React Hooks to toggle classes, which I have implemented using useState/isActive. The hamburger transition works but the transition for the actual menu does not.
Here is navbar.js
import Logo from '../images/logo-small-cropped.png'
import Image from 'next/image'
import React, { useState } from "react"
export default function Navbar({ }) {
const [isActive, setActive] = useState("false");
const handleToggle = () => {
setActive(!isActive);
};
return (
<nav className="navbar navbar-expand-md navbar-light border-top fixed-top border-bottom py-0" >
<div className="container-fluid text-center" >
<a className="navbar-brand" href="#">
<span className="mb-2">
<Image src={Logo} alt="Little Pink Boutique Logo" />
</span>
</a>
<button onClick={handleToggle} className="navbar-toggler navbar-toggler-button" type="button" aria-label="Toggle navigation">
<div id="hamburger" className={isActive ? "null" : "open"}>
<span></span>
<span></span>
<span></span>
</div>
</button>
<div className={isActive ? "collapse navbar-collapse" : "navbar-collapse"} >
<ul className="navbar-nav me-auto mb-2 mb-md-0">
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="/home" > </a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Women</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Men</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Children</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Accessories</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">FAQs</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Contact</a>
</li>
</ul>
<form className="d-flex">
<input className="form-control me-2 mt-3 mb-2" type="search" placeholder="Search" aria-label="Search"/>
<button className="btn btn-outline-success mt-3 mb-2" type="submit">Search</button>
</form>
</div>
</div>
</nav>
)
}
The .collapse class is just the standard Bootstrap class, the navbar-collapse class is as follows.
.navbar-collapse{
background-color: rgb(238, 236, 236);
width: 100vw;
}
I'm not sure how to get the transition to work, or if this is the best way to do it.
Any help appreciated as always.
Try using the transition css property in the navbar-collapse class.
Something like this :-
.navbar-collapse{
transition: width 2s;
background-color: rgb(238, 236, 236);
width: 100vw;
}
In the mobile Version the navbar is not collapsing... Can somebody help. Does anybody see my mistake?I copy the source from bootstrap but it didn't work. it does not work because I work with react?
I would be grateful for any help
file App.js
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
//Partikeln importieren
import Particles from 'react-particles-js';
//Hier importiert man seine Komponenten
import Navbar from "./components/Navbar";
import Header from "./components/Header";
...
...
...
file Navbar code
import React from 'react'
import Logo from "../img/logo_large.png"
// React Font awesome imports
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faBars } from "#fortawesome/free-solid-svg-icons"
//React-scroll install
//Navbar
const Navbar = () => {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-dark fixed-top">
<div className="container">
{/*Logo variable von oben*/}
<a className="navbar-brand" href="#home"><img className="Logo" src={Logo} /> </a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<FontAwesomeIcon icon={faBars} style={{ color: "#fff" }} />
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav ml-auto">
<li className="nav-item active">
<a className="nav-link" href="#about" >About Me<span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#services">Services</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#experiences">Experiences</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#abilities">Abilities</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#blog">Blog</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#freetime">Freetime</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav >
)
}
export default Navbar
Remove the div element with the container name.
I'm fairly new to react and JSX, and looking for some help!
I have part of my app that pulls state from redux to show if a user is logged in, and I just want to render the navbar component because some things are behind protected routes. Everything is working how I want it to, except that I have to refresh the page to make the changes happen, so I'm looking to just have it update based on the state passed to it when it changes OR could be part of an onclick event in the logout component
Here's the navbar component
export default class Navbar extends Component {
render() {
const storeAuth = store.getState();
const isLoggedIn = (storeAuth['auth']['isAuthenticated'])
if(isLoggedIn){
return (
<nav className="navbar navbar-dark bg-dark navbar-expand-lg">
<Link to="/login" className="navbar-brand">CHK List</Link>
<div className="collpase navbar-collapse">
<ul className="navbar-nav mr-auto">
<li className="navbar-item">
<Link to="/list" className="nav-link">Daily Checklist </Link>
</li>
<li className="navbar-item">
<Link to="/editlist" className="nav-link">Edit Checklist</Link>
</li>
<li className="navbar-item">
<Link to="/Register" className="nav-link">Register New Users</Link>
</li>
<li className="navbar-item">
<Link to="/Logout" className="nav-link">Logout</Link>
</li>
</ul>
</div>
</nav>
);
}else{
return (
<nav className="navbar navbar-dark bg-dark navbar-expand-lg">
<Link to="/dashboard" className="navbar-brand">CHK List</Link>
<div className="collpase navbar-collapse">
<ul className="navbar-nav mr-auto">
<li className="navbar-item">
<Link to="/login" className="nav-link">Login</Link>
</li>
</ul>
</div>
</nav>
);
}
}
}
And this is the Logout component where the onclick event
class Dashboard extends Component {
onLogoutClick = e => {
e.preventDefault();
this.props.logoutUser();
};
render() {
const { user } = this.props.auth;
return (
<div style={{ height: "75vh" }} className="container valign-wrapper">
<div className="row">
<div className="landing-copy col s12 center-align">
<h4>
<b>Hey {user.name.split(" ")[0]}</b> <p></p>
<p className="flow-text grey-text text-darken-1">
Are you sure you want to logout?
</p>
</h4>
<button
style={{
width: "150px",
borderRadius: "3px",
letterSpacing: "1.5px",
marginTop: "1rem"
}}
onClick={this.onLogoutClick}
className="btn btn-large waves-effect waves-light hoverable blue accent-3">
Logout
</button>
</div>
</div>
</div>
);
}
}
Dashboard.propTypes = {
logoutUser: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired
};
You can try using mapStateToProps function.
import {connect} from 'react-redux';
class Navbar extends Component {
render() {
let isLoggedIn = this.props.isLoggedIn
if(isLoggedIn){
return (
<nav className="navbar navbar-dark bg-dark navbar-expand-lg">
<Link to="/login" className="navbar-brand">CHK List</Link>
<div className="collpase navbar-collapse">
<ul className="navbar-nav mr-auto">
<li className="navbar-item">
<Link to="/list" className="nav-link">Daily Checklist </Link>
</li>
<li className="navbar-item">
<Link to="/editlist" className="nav-link">Edit Checklist</Link>
</li>
<li className="navbar-item">
<Link to="/Register" className="nav-link">Register New Users</Link>
</li>
<li className="navbar-item">
<Link to="/Logout" className="nav-link">Logout</Link>
</li>
</ul>
</div>
</nav>
);
}else{
return (
<nav className="navbar navbar-dark bg-dark navbar-expand-lg">
<Link to="/dashboard" className="navbar-brand">CHK List</Link>
<div className="collpase navbar-collapse">
<ul className="navbar-nav mr-auto">
<li className="navbar-item">
<Link to="/login" className="nav-link">Login</Link>
</li>
</ul>
</div>
</nav>
);
}
}
}
const mapStateToProps=(state)=>{
return {
isLoggedIn : state.auth.isAuthenticated
}
}
export default connect(mapStateToProps)(Navbar )
So, I have a react.js app built with a group. Our Navbar works, but when the Navbar is toggled from a smaller screen using the Hamburger menu, it will open, but the toggle doesn't work to close it, it stays stuck open. I didn't program this page, but I've been trying to debug why it won't close, and for what I can see, it should work.
Yes, I know react.bootstrap is a thing, and I was thinking about converting it, but I'm on a deadline and don't want to rewrite this entire component from scratch if it is at all possible. Any thoughts, or suggestions. I thought it was likely in the toggleNav function, but from what I've tested it seems to be correct.
import React, { Component } from "react";
import { Link } from "react-router-dom";
import "./style.css";
class Nav extends Component {
state = {
open: false,
width: window.innerWidth,
};
updateWidth = () => {
const newState = { width: window.innerWidth };
if (this.state.open && newState.width > 991) {
newState.open = false;
}
this.setState(newState);
};
toggleNav = () => {
this.setState({ open: !this.state.open });
};
setActiveNavItem = (path) => {
return window.location.pathname === path ? "nav-link active" : "nav-link";
};
componentDidMount() {
window.addEventListener("resize", this.updateWidth);
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateWidth);
}
render() {
return (
<nav className="navbar navbar-expand-lg navbar-light">
<Link className="navbar-brand" to="/">
Seenit
</Link>
<button
onClick={this.toggleNav}
className="navbar-toggler"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon" />
</button>
<div
className={`${this.state.open ? "" : "collapse "}navbar-collapse`}
id="navbarNav"
>
{/* Navbar items */}
<ul className="navbar-nav">
<li className="nav-item">
<Link
onClick={this.toggleNav}
className={this.setActiveNavItem("/")}
to="/"
>
Home
</Link>
</li>
<li className="nav-item">
<Link
onClick={this.toggleNav}
className={this.setActiveNavItem("/create-post")}
to="/create-post"
>
Create a Post
</Link>
</li>
<li className="nav-item">
<Link
onClick={this.toggleNav}
className={this.setActiveNavItem("/log-in")}
to="/log-in"
>
Log In
</Link>
</li>
<li className="nav-item">
<Link
onClick={this.toggleNav}
className={this.setActiveNavItem("/sign-up")}
to="/sign-up"
>
Sign Up
</Link>
</li>
</ul>
</div>
</nav>
);
}
}
export default Nav;
This React component is a direct implementation of the Bootstrap Toggler Navbar.
Unfortunately, this component also contains code that modifies the navbar, which almost certainly breaks the Bootstrap code that controls collapsible navbars.
Here is the pure HTML version of this navbar component. Note that it collapses to a hamburger on narrow screens (as desired).
It should be straightforward to remove from this component the code that modifies the Bootstrap Toggler navbar.
.navbar {
outline: 1px solid #ddd;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<body class="p-2">
<nav class="navbar navbar-expand-lg navbar-light mr-5">
<a class="navbar-brand" href="#">Seenit</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Create a Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
</ul>
</div>
</nav>
<!-- JS required for Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>