I'm working from VS2015, JQuery 2.2.4 and Bootstrap 3.3.7, having issues with Bootstrap tabs component, since my dropdowns menu are not being displaying when I click over them. I have 5 tabs in total, with some tabs the dropdown objects at header & footer works properly but if click on other tabs then they stop working
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<environment names="Development">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/header.css" />
<link href="~/css/Video.css" rel="stylesheet" />
<link href="//vjs.zencdn.net/6.2.0/video-js.min.css" rel="stylesheet"/>
<link rel="shortcut icon" href="~/images/favicon_azul-gris32px.png" />
</environment>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="~/lib/bootstrap-treeview/src/js/bootstrap-treeview.js"></script>
<script src="//vjs.zencdn.net/6.2.0/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.8.0/videojs-contrib-hls.min.js"></script>
<script src="~/js/site.js"></script>
DROPDOWN:
<li class="dropdown">
<a id="username_dropdown" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
#UserManager.GetUserAsync(User).Result.Name
<span class="caret"></span>
</a>
<ul class="dropdown-menu" id="dropdown-account">
<li id="menu-li-group">
<a asp-area="" asp-controller="Groups" asp-action="Index">
<img id="img-li-group" class="menu-icons-account" src="~/images/home-usermenu/UM_groups_inactive.png" />
#Localizer["Groups"]
</a>
</li>
<li id="menu-li-users">
<a asp-controller="ApplicationUsers" asp-action="Index">
<img id="img-li-users" class="menu-icons-account" src="~/images/home-usermenu/UM_users_inactive.png" />
#Localizer["Users"]
</a>
</li>
<li id="menu-li-log">
<a asp-area="" asp-controller="LogAdminTasks" asp-action="Index">
<img id="img-li-log" class="menu-icons-account" src="~/images/home-usermenu/UM_log_inactive.png" />
#Localizer["Activity Log"]
</a>
</li>
<li id="menu-li-profile">
<a asp-area="" asp-controller="Manage" asp-action="ChangePassword">
<img id="img-li-profile" class="menu-icons-account" src="~/images/home-usermenu/UM_edit_inactive.png" />
#Localizer["Modify Profile"]
</a>
</li>
<li id="menu-li-openapp">
<a id="openNac" style="cursor: pointer;">
<img id="img-li-openapp" class="menu-icons-account" src="~/images/home-usermenu/UM_sharimg_inactive.png" />
#Localizer["Open Sharimg"]
</a>
</li>
<li id="menu-li-logoff">
<a style="cursor: pointer;">
<img id="img-li-logoff" class="menu-icons-account" src="~/images/home-usermenu/UM_logout_inactive.png" />
<button id="btn_submit" type="submit" style="color:black" class="btn btn-link pull-right">#Localizer["Log off"]</button>
</a>
</li>
</ul>
</li>
Before I also loosed javascript functionality for Bootstrap tooltip and mouse over icons
there was no kind of incompatibility between my version of Bootstrap and Jquery.
I had 2 issues:
1- I was loading all the js libraries before closing the <body> tag in the main layout .cshtml file, so I cannot execute Jquery code in partials views, I just changed location after the <header> where I load all the .js files
2 - Due to this error I tried to load again all JS files in the partial view, despite this doesnt show any error in the console it stops some functionality as the Bootstrap Dropdown menu did
Related
I have this react component that renders a header:
import React from 'react';
import facebookImage from '../static/images/facebook.svg';
import instagramImage from '../static/images/instagram.svg';
import tiktokImage from '../static/images/tiktok.svg';
import whatsappImage from '../static/images/whatsapp.svg';
import spainImage from '../static/images/spanish.png';
const Header = () => {
return (
<nav className="navbar header_ navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<div className="navbar-header">
<a className="navbar-brand" href="/">
<img src="/images/Full-Color.png" alt="Logo" className="d-inline-block align-text-top header-logo"/>
</a>
</div>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav ms-auto">
<li className="nav-item mx-2 active">
<a className="nav-link header-text" href="#">HOME</a>
</li>
<li className="nav-item mx-2">
<a className="nav-link header-text" href="#cars-for-rent">CARS FOR RENT</a>
</li>
<li className="nav-item mx-2">
<a className="nav-link header-text" href="#">ABOUT US</a>
</li>
<li className="nav-item mx-2">
<a className="nav-link header-text" href="#">CONTACT US</a>
</li>
<li className="nav-item">
<a className="nav-link header-text" href="#"><img src={facebookImage} width={"25vw"} /></a>
</li>
<li className="nav-item">
<a className="nav-link header-text" href="#"><img src={instagramImage} width={"25vw"} /></a>
</li>
<li className="nav-item">
<a className="nav-link header-text" href="#"><img src={tiktokImage} width={"25vw"} /></a>
</li>
<li className="nav-item">
<a className="nav-link header-text" href="#"><img src={whatsappImage} width={"25vw"} /></a>
</li>
<li className="nav-item">
</li>
</ul>
</div>
<div className='d-flex justify-content-end align-items-center'>
<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 d-flex justify-content-end align-items-end"></span>
</button>
<a className="nav-link header-text mx-2" href="#"><img src={spainImage} width={"25vw"} /></a>
</div>
</div>
</nav>
);
};
export default Header;
this is my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>APP</title>
<!-- BOOTSTRAP -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- BOOTSTRAP -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<!-- BOOTSTRAP -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<!-- BOOTSTRAP -->
</body>
</html>
The problem I am facing is that the navbar toggler is opening but not closing, I am using bootstrap 5 imported via CDN on my index file I changed the data-toggle to data-bs-toggle and the data-target to data-bs-target as suggested here on breaking changes migrating from 4 to 5 but still does not work, How can I fix this?
I am making an android app with the Webview technique. To make a look and feel like an android I am using a Material CSS (https://daemonite.github.io/material/) framework.
Now my problem is the drawer is not touch-sensitive. I can't push it back like an android drawer. The drawer can only close by touching outside of this. Please solve the problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="initial-scale=1, shrink-to-fit=no, width=device-width" name="viewport">
<title>Material</title>
<!-- CSS -->
<!-- Add Material font (Roboto) and Material icon as needed -->
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Add Material CSS, replace Bootstrap CSS -->
<link href="/material/css/material.min.css" rel="stylesheet">
<!-- Additional CSS for documentation site -->
<link href="/material/docs/css/docs.min.css" rel="stylesheet">
</head>
<body class="bg-light h-100">
<header class="navbar navbar-dark navbar-full bg-primary doc-navbar-default">
<button aria-controls="navdrawerDefault" aria-expanded="false" aria-label="Toggle Navdrawer" class="navbar-toggler" data-target="#navdrawerDefault" data-toggle="navdrawer"><span class="navbar-toggler-icon"></span></button>
<span class="navbar-brand mr-auto">Navdrawer</span>
</header>
<div aria-hidden="true" class="navdrawer" id="navdrawerDefault" tabindex="-1">
<div class="navdrawer-content">
<div class="navdrawer-header">
<a class="navbar-brand px-0" href="javascript:void(0)">Navdrawer header</a>
</div>
<nav class="navdrawer-nav">
<a class="nav-item nav-link active" href="javascript:void(0)">Active</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
<a class="nav-item nav-link" href="javascript:void(0)">Link</a>
</nav>
<div class="navdrawer-divider"></div>
<p class="navdrawer-subheader">Navdrawer subheader</p>
<ul class="navdrawer-nav">
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0)"><i class="material-icons mr-3">alarm_on</i> Active with icon</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:void(0)"><i class="material-icons mr-3">alarm_off</i> Disabled with icon</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="material-icons mr-3">link</i> Link with icon</a>
</li>
</ul>
</div>
</div>
<!-- JavaScript -->
<script crossorigin="anonymous" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!-- Add Material JavaScript on top of Bootstrap JavaScript -->
<script src="/material/js/material.min.js"></script>
</body>
</html>
I cannot get my bootstrap 4 dropdown menu to work. I know this has been asked before but I have tried everything on all of the other threads. I'm getting an 'uncaught TypeError: cannot read property 'fn' of undefined' at bootstrap.min.js and at util.js when I look at the console. I'm not sure if this is the problem or how to resolve these errors.
Here is my header code:
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/layout.css' %}">
<link href="https://fonts.googleapis.com/css?family=Montserrat|PT+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" integrity="sha256-BJ/G+e+y7bQdrYkS2RBTyNfBHpA9IuGaPmf9htub5MQ=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel='shortcut icon' type='image/x-icon' href='/static/css/favicon.ico' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
Here is the code for the navbar including the dropdown menu:
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<a class="navbar-left logo" href="{% url 'home' %}"><img class="logo" src="/static/css/brand.jpg"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<div class="navbar-nav">
<form class="form-inline my-2 my-lg-0" action="{% url 'search:search_users' %}" method="GET" value="{{request.GET.q}}">
<input class="form-control mr-sm-2" type="text" name="q" value="{{request.GET.q}}" placeholder="Search by Skill">
<button class="btn btn-primary my-2 my-sm-0" id = "search" name="submit" type="submit" value ="Search">Search</button>
</form>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Find Expertise</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="{% url 'browse' %}">Browse Researchers</a>
<a class="dropdown-item" href="{% url 'booking:request_expert' %}">Request Expertise</a>
<a class="dropdown-item" href="{% url 'booking:tutorial_list' %}">Find a Tutorial</a>
</div>
</div>
<a class="nav-item nav-link" href="{% url 'booking:tutorial_list' %}">TUTORIALS</a>
<a class="nav-item nav-link" href="{% url 'faq' %}">FAQ</a>
<a class="nav-item nav-link" href="{% url 'profile' %}">MY PROFILE</a>
<a class="nav-item nav-link" href="{% url 'booking:booking_list' %}"> MY SCHEDULE</a>
<a class ="nav-item nav-link" href="{% url 'logout' %}">LOGOUT</a>
</div>
</div>
</nav>
I also tried to change the order of the jquery, popper and bootstrap files. Further, I tried to replace these files with the latest versions however, the dropdown menu still does not work. All of the other javascript on the site is working fine.
If you are using some package manager. If yes, try to install dependencies via it.
Import last versions of jQuery, popper and bootstrap.
Check. Maybe you are using another packages where you already imported jQuery. It should be imported just once.
I was trying to make a navigation bar for my web page following bootstraps template. I've attached it to my base.html.twig file for a Symfony project. It works fine besides the drop down menu which when clicked does not diplay
Here's my twig document
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Health Centre Ireland{% endblock %}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="{{ asset('css/styles.css') }}"/>
{% block stylesheets %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('redcross.ico') }}" />
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" a href="#">Health Centre Ireland</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarsExampleDDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only"></span> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Calender</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Message Board</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">My Profile</a>
<a class="dropdown-item" href="{{ logout_path('main') }}">Log Out</a>
<a class="dropdown-item" href="#">Delete Profile</a>
</div>
</li>
</ul>
</div>
</nav>
</body>
I have tried to put JavaScript at the bottom of my document before I close out the body and html, but this makes the content of the page besides the navbar disappear. Any help would be greatly appreciated, thank you
You need to add javascript like indicated in the official documentation of bootstrap (https://getbootstrap.com/docs/4.0/getting-started/introduction/)
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
Yes, you could need to load also de JavaScript files from bootstrap possibly.
Sometines but, it's only necessary a CSS file to make work the dropdowns. Make sure the properties from the CSS you are using appears in the CSS file you added from bootstrap. Maybe is the wrong CSS.
Why isn't my bootstrap navbar not collapsing? The toggle button shows up but when I click it, nothing happens. (Written in React so using className instead of class.) I even tried copying and pasting directly from the Bootstrap example and it still doesn't work. Am I forgetting to import something somewhere? I also tried copying and pasting from this example from this other question on stackoverflow, didn't work.
<nav className="navbar navbar-default navbar-fixed-top navbar-shrink">
<div className="container">
<div className="navbar-header page-scroll">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar=in-collapse" aria-expanded="false" aria-controls="navbar">
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-logo page-scroll" href="#about">
<img src="icon.png" />Page
</a>
</div>
<div className="collapse navbar-collapse" id="navbar-in-collapse">
<ul className="nav navbar-nav navbar-right">
<li className="hidden active">
</li>
<li className="">
<a className="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li className="">
<a className="page-scroll" href="#blog">Blog</a>
</li>
<li className="">
<a className="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
In my html, it looks like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Kaisin Li</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="./index.css" rel="stylesheet" />
<link rel="icon" href="./favicon.ico">
</head>
<body>
<div id="main"></div>
<script src="./bundle.js" defer></script>
</body>
</html>
Thanks!
In first, you need to append links to jQuery and bootrstrap.js to your page. In second, data-target="#navbar=in-collapse" should be replaced by data-target="#navbar-in-collapse". See the and run the snippet below.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-in-collapse" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-logo page-scroll" href="#about">
<img src="icon.png" />Page
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-in-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="hidden active">
</li>
<li class="">
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li className="">
<a class="page-scroll" href="#blog">Blog</a>
</li>
<li class="">
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
If you use bundles for jQuery and Bootstrap scrips, make shure the scripts are bundled in correct order.
try including bootstrap.min.js too
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0alpha.6/js/bootstrap.min.js" ></script>
You need to load bootstrap js
some functionality in bootstrap depends on it such as navbar collapse
check the fourth point here
your code should look something like this
<!DOCTYPE HTML>
<html>
<head>
<title>Kaisin Li</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="./index.css" rel="stylesheet" />
<link rel="icon" href="./favicon.ico">
</head>
<body>
<div id="main"></div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="./bundle.js" defer></script>
</body>
</html>