am new to laravel...this is the first project that I am doing...while following a tutorial, I was trying to put Navbar from bootstrap and put the following code into my header.blade page...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script
src="http://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
But while checking in the browser it looks like the following... Could not actually figure out whether any new library of bootstrap to be added in the header or not...
I think You have an conflict in placing your bootstrap asset in html. just add this bootstrap assets inside element
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
in your codes just Look at this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
Related
As a relative newbee to Bootstrap I have been trying to code a menu with dropdowns. Code is listed below, but I find some issues:
The menu code was copied from GetBootstrap.com docs. Looked at other sites to see where the problem may be, tried alternatives but no luck.
bootstrap.min.css and bootstrap.bundle.min.js, both version 5, have been linked in to the code. Have tried these files directly on site and via links. Also tried popper.js plus bootstrap.min.js; same result.
Direct links do work, but the dropdown part does not. Clicking on the dropdown item produces nothing. It would be great if it would show on hover and stay in place so that sub-items can be clicked.
The menu should be on the righthand side of the screen; looking at answers, ms-auto should do this. It does not.
When the screen is collapsed to tablet or phone size, the menu goes to the expected compressed symbol, but does not function at all; it will not show anything when clicked.
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/text835.png" width="160" height="48" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item" dropdown>
<a class="nav-link dropdown-toggle" href="#"
id="navbarConsultants" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Consultants</a>
<ul class="dropdown-menu" aria-labelledby="navbarConsultants">
<li><a class="dropdown-item" href="#">Consultants</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Andy</a></li>
<li><a class="dropdown-item" href="#">Bill</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
dropdown should be a class .. not an attribute:
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="//via.placeholder.com/160x48" width="160" height="48" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarConsultants" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Consultants</a>
<ul class="dropdown-menu" aria-labelledby="navbarConsultants">
<li><a class="dropdown-item" href="#">Consultants</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Andy</a></li>
<li><a class="dropdown-item" href="#">Bill</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
Everything works as expected
Using CDN to integrate Bootstrap 5.0.0-beta3 resources, following should work.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Custom Navbar with <strong>Bootstrap 5.0.0-beta3</strong></title>
</head>
<body>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
-->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/text835.png" width="160" height="48" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarConsultants" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Consultants</a>
<ul class="dropdown-menu" aria-labelledby="navbarConsultants">
<li><a class="dropdown-item" href="#">Consultants</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Andy</a></li>
<li><a class="dropdown-item" href="#">Bill</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
I hope, this will help you out!
Feel free to Upvote the answer
Thank you both to Manifest Man and Zim. I was using an earlier version of bootstrap 5 and when the latest version of bootstrap.min.css and bootstrap.bundle.min.js were used it started to work.
In addition, yes, dropdown is a class, not an attribute.
I am creating a new Blazor web assembly pwa app. I have bought a theme from themeforest and trying to integrate it in my Blazor web assembly app. I am using visual studio and .net core 3.1.202. I was able to get the layout UI to work but my side navigation is not working. I am unable to collapse or expand any menu option or even clicking on the hamburger icon doesn't work. I couldn't figure out what I have missed. There are no errors in the console window of the browser. Hence, I request help in this matter. Thanks in advance.
This is what my index.razor page looks like:
This is my wwwroot folder:
Screenshot of console window:
This is my index.html
<!DOCTYPE html>
<html class="fixed sidebar-light" data-style-switcher-options="{'sidebarColor': 'light'}">
<head>
<!-- Basic -->
<meta charset="UTF-8">
<title>Light Sidebar Layout | Porto Admin - Responsive HTML5 Template</title>
<meta name="keywords" content="HTML5 Admin Template" />
<meta name="description" content="Porto Admin - Responsive HTML5 Template">
<meta name="author" content="okler.net">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="vendor/animate/animate.compat.css">
<link rel="stylesheet" href="vendor/font-awesome/css/all.min.css" />
<link rel="stylesheet" href="vendor/boxicons/css/boxicons.min.css" />
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css" />
<link rel="stylesheet" href="vendor/bootstrap-datepicker/css/bootstrap-datepicker3.css" />
<!-- Specific Page Vendor CSS -->
<link rel="stylesheet" href="vendor/jquery-ui/jquery-ui.css" />
<link rel="stylesheet" href="vendor/jquery-ui/jquery-ui.theme.css" />
<link rel="stylesheet" href="vendor/bootstrap-multiselect/css/bootstrap-multiselect.css" />
<link rel="stylesheet" href="vendor/morris/morris.css" />
<!--(remove-empty-lines-end)-->
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css" />
<!--(remove-empty-lines-end)-->
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Head Libs -->
<!--<script src="vendor/modernizr/modernizr.js"></script>-->
<!--<script src="master/style-switcher/style.switcher.localstorage.js"></script>-->
<link href="css/app.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
</head>
<body>
<app>Loading...</app>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
<!-- Head Libs -->
<script src="vendor/modernizr/modernizr.js"></script>
<!-- Vendor -->
<script src="vendor/jquery/jquery.js"></script>
<script src="vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
<script src="vendor/jquery-cookie/jquery.cookie.js"></script>
<!--<script src="master/style-switcher/style.switcher.js"></script>-->
<script src="vendor/popper/umd/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.js"></script>
<script src="vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="vendor/common/common.js"></script>
<script src="vendor/nanoscroller/nanoscroller.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.js"></script>
<script src="vendor/jquery-placeholder/jquery.placeholder.js"></script>
<!-- Specific Page Vendor -->
<script src="vendor/jquery-ui/jquery-ui.js"></script>
<script src="vendor/jqueryui-touch-punch/jquery.ui.touch-punch.js"></script>
<script src="vendor/jquery-appear/jquery.appear.js"></script>
<script src="vendor/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>
<script src="vendor/jquery.easy-pie-chart/jquery.easypiechart.js"></script>
<script src="vendor/flot/jquery.flot.js"></script>
<script src="vendor/flot.tooltip/jquery.flot.tooltip.js"></script>
<script src="vendor/flot/jquery.flot.pie.js"></script>
<script src="vendor/flot/jquery.flot.categories.js"></script>
<script src="vendor/flot/jquery.flot.resize.js"></script>
<script src="vendor/jquery-sparkline/jquery.sparkline.js"></script>
<script src="vendor/raphael/raphael.js"></script>
<script src="vendor/morris/morris.js"></script>
<script src="vendor/gauge/gauge.js"></script>
<script src="vendor/snap.svg/snap.svg.js"></script>
<script src="vendor/liquid-meter/liquid.meter.js"></script>
<script src="vendor/jqvmap/jquery.vmap.js"></script>
<script src="vendor/jqvmap/data/jquery.vmap.sampledata.js"></script>
<script src="vendor/jqvmap/maps/jquery.vmap.world.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.africa.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.asia.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.australia.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.europe.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.north-america.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.south-america.js"></script>
<!--(remove-empty-lines-end)-->
<!-- Theme Base, Components and Settings -->
<script src="js/theme.js"></script>
<!-- Theme Custom -->
<script src="js/custom.js"></script>
<!-- Theme Initialization Files -->
<script src="js/theme.init.js"></script>
<!-- Analytics to Track Preview Website -->
<script>
(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-42715764-8', 'auto');
ga('send', 'pageview');
</script>
<script>
// Maintain Scroll Position
if (typeof localStorage !== 'undefined') {
if (localStorage.getItem('sidebar-left-position') !== null) {
var initialPosition = localStorage.getItem('sidebar-left-position'),
sidebarLeft = document.querySelector('#sidebar-left .nano-content');
sidebarLeft.scrollTop = initialPosition;
}
}
</script>
<!-- Examples -->
<script src="js/examples/examples.dashboard.js"></script>
</body>
</html>
My MainLayout.razor
#inherits LayoutComponentBase
<section class="body">
<!-- start: header -->
<header class="header">
<div class="logo-container">
<a href="/" class="logo">
<img src="img/logo.png" width="75" height="35" alt="Porto Admin" />
</a>
<div class="d-md-none toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened">
<i class="fas fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<!-- start: search & user box -->
<div class="header-right">
<span class="separator"></span>
<div id="userbox" class="userbox">
<a href="#" data-toggle="dropdown">
<figure class="profile-picture">
<img src="img/!logged-user.jpg" alt="Joseph Doe" class="rounded-circle" data-lock-picture="img/!logged-user.jpg" />
</figure>
<div class="profile-info" data-lock-name="John Doe" data-lock-email="johndoe#okler.com">
<span class="name">John Doe Junior</span>
<span class="role">Administrator</span>
</div>
<i class="fa custom-caret"></i>
</a>
<div class="dropdown-menu">
<ul class="list-unstyled mb-2">
<li class="divider"></li>
<li>
<a role="menuitem" tabindex="-1" href="pages-user-profile.html"><i class="bx bx-user-circle"></i> My Profile</a>
</li>
<li>
<a role="menuitem" tabindex="-1" href="#" data-lock-screen="true"><i class="bx bx-lock"></i> Lock Screen</a>
</li>
<li>
<a role="menuitem" tabindex="-1" href="pages-signin.html"><i class="bx bx-power-off"></i> Logout</a>
</li>
</ul>
</div>
</div>
</div>
<!-- end: search & user box -->
</header>
<!-- end: header -->
<div class="inner-wrapper">
<NavMenu />
<section role="main" class="content-body">
<header class="page-header">
<h2>Light Sidebar Layout</h2>
<div class="right-wrapper text-right">
<ol class="breadcrumbs">
<li>
<a href="index.html">
<i class="bx bx-home-alt"></i>
</a>
</li>
<li><span>Layouts</span></li>
<li><span>Light Sidebar</span></li>
</ol>
<a class="sidebar-right-toggle disabled"><i class="fas fa-chevron-left"></i></a>
</div>
</header>
<!-- start: page -->
#Body
</section>
</div>
</section>
My NavMenu.razor
<!-- start: sidebar -->
<aside id="sidebar-left" class="sidebar-left">
<div class="sidebar-header">
<div class="sidebar-title">
Navigation
</div>
<div class="sidebar-toggle d-none d-md-block" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle">
<i class="fas fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<div class="nano">
<div class="nano-content">
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li>
<a class="nav-link" href="layouts-default.html">
<i class="bx bx-home-alt" aria-hidden="true"></i>
<span>Dashboard</span>
</a>
</li>
<li class="nav-parent">
<a class="nav-link" href="#">
<i class="bx bx-cart-alt" aria-hidden="true"></i>
<span>eCommerce</span>
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="ecommerce-dashboard.html">
Dashboard
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-products-list.html">
Products List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-products-form.html">
Products Form
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-category-list.html">
Categories List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-category-form.html">
Category Form
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-coupons-list.html">
Coupons List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-coupons-form.html">
Coupons Form
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-orders-list.html">
Orders List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-orders-detail.html">
Orders Detail
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-customers-list.html">
Customers List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-customers-form.html">
Customers Form
</a>
</li>
</ul>
</li>
<li>
<a class="nav-link" href="mailbox-folder.html">
<span class="float-right badge badge-primary">182</span>
<i class="bx bx-envelope" aria-hidden="true"></i>
<span>Mailbox</span>
</a>
</li>
<li class="nav-parent nav-expanded nav-active">
<a class="nav-link" href="#">
<i class="bx bx-layout" aria-hidden="true"></i>
<span>Layouts</span>
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="index.html">
Landing Page
</a>
</li>
<li>
<a class="nav-link" href="layouts-default.html">
Default
</a>
</li>
<li>
<a class="nav-link" href="layouts-modern.html">
Modern
</a>
</li>
<li class="nav-parent">
<a>
Boxed
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-boxed.html">
Static Header
</a>
</li>
<li>
<a class="nav-link" href="layouts-boxed-fixed-header.html">
Fixed Header
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a>
Horizontal Menu Header
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-header-menu.html">
Pills
</a>
</li>
<li>
<a class="nav-link" href="layouts-header-menu-stripe.html">
Stripe
</a>
</li>
<li>
<a class="nav-link" href="layouts-header-menu-top-line.html">
Top Line
</a>
</li>
</ul>
</li>
<li>
<a class="nav-link" href="layouts-dark.html">
Dark
</a>
</li>
<li>
<a class="nav-link" href="layouts-dark-header.html">
Dark Header
</a>
</li>
<li>
<a class="nav-link" href="layouts-two-navigations.html">
Two Navigations
</a>
</li>
<li class="nav-parent">
<a>
Tab Navigation
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-tab-navigation-dark.html">
Tab Navigation Dark
</a>
</li>
<li>
<a class="nav-link" href="layouts-tab-navigation.html">
Tab Navigation Light
</a>
</li>
<li>
<a class="nav-link" href="layouts-tab-navigation-boxed.html">
Tab Navigation Boxed
</a>
</li>
</ul>
</li>
<li class="nav-active">
<a class="nav-link" href="layouts-light-sidebar.html">
Light Sidebar
</a>
</li>
<li>
<a class="nav-link" href="layouts-left-sidebar-collapsed.html">
Left Sidebar Collapsed
</a>
</li>
<li>
<a class="nav-link" href="layouts-left-sidebar-scroll.html">
Left Sidebar Scroll
</a>
</li>
<li class="nav-parent">
<a>
Left Sidebar Big Icons
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-left-sidebar-big-icons.html">
Left Sidebar Big Icons Dark
</a>
</li>
<li>
<a class="nav-link" href="layouts-left-sidebar-big-icons-light.html">
Left Sidebar Big Icons Light
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a>
Left Sidebar Panel
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-left-sidebar-panel.html">
Left Sidebar Panel Dark
</a>
</li>
<li>
<a class="nav-link" href="layouts-left-sidebar-panel-light.html">
Left Sidebar Panel Light
</a>
</li>
</ul>
</li>
<li>
<a class="nav-link" href="layouts-square-borders.html">
Square Borders
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</aside>
<!-- end: sidebar -->
I had the same issue with a theme from themeforest. The problem was, that all event handlers defined in theme js file are not fired by the frontend.
My solution was to find out what css things changes for an event (for example collapse menu) and to write a java script function that does that DOM maniupulation. Then I'm using JS Interopt from Blazor to call that function. Basically I rewrite all needed JS handlers by hand and call it by for example #onclick handlers in razor components.
A lot of work to do, but it works.
UPDATE:
Most of my theme components are triggered by a DOMContentLoaded event, so a simple manual call of this event is enough. I created following JS function in my custom.js file
function triggerThemeJS() {
window.document.dispatchEvent(new Event("DOMContentLoaded", {
bubbles: true,
cancelable: true
}));
}
and call this with JS Interopt from Blazor Razor page (for example MainLayout):
#inject IJSRuntime javaScript
...
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if(firstRender)
{
await javaScript.InvokeVoidAsync("triggerThemeJS");
}
}
I'm currently making a website using bootstrap 4 and CodeIgniter as backend. But the navigation bar went weird for some reason.
enter image description here (I still don't have enough point to post picture)
There's no navbar color and not to mention, the list is vertical, not horizontal.
This is my code:
<html>
<head>
<title>Code Igniter Blog</title>
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="<?php echo base_url(); ?>">CI Blog</a>
</div>
<div id="navbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
Edit:
I was following a CodeIgniter tutorial by Traversy Media on youtube. I have followed all the steps, except the navbar went weird.
https://www.youtube.com/watch?v=I752ofYu7ag
just go to this link https://bootswatch.com/flatly/
copy source code from this link
Here Your Solution:-
<html>
<head>
<title>Code Igniter Blog</title>
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="<?php echo base_url(); ?>">CI Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="<?php echo base_url(); ?>">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url(); ?>/about">About</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
When i using #include in master page blade template for add header and sidebar page,this action makes clear login data.
i've tried.without using include in master page below code printing login data
{{Auth::User()->first_name . ' ' . Auth::User()->family}}
but after add include,with one refresh page all login data is cleared!
master page:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<link rel="stylesheet" href="{{URL::asset('asset/css/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{URL::asset('asset/css/bootstrap-theme.min.css')}}">
<link rel="stylesheet" href="{{URL::asset('asset/css/font-awesome.min.css')}}">
<link rel="stylesheet" href="{{URL::asset('asset/css/style.css')}}">
<link rel="stylesheet" href="{{URL::asset('asset/css/style-responsive.css')}}">
<script src="{{URL::asset('asset/js/jquery.min.js')}}"></script>
#yield('css')
</head>
<body>
{{--Header Start--}}
#include('layouts.header')
{{--End Header--}}
{{--Sidebar Start--}}
#include('layouts.sidebar')
{{--End Sidebar--}}
{{--Content Start--}}
#yield('content')
{{--End Content--}}
<script type="text/javascript" src="{{URL::asset('asset/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('asset/js/jquery.nicescroll.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('asset/js/common-scripts.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('asset/js/jquery.dcjqaccordion.2.7.js')}}"></script>
#yield('js')
</body>
</html>
UPDATE:
call view:
Route::get('/', function () {
return view('index');
});
and this is my header page:
<section id="container" class="">
<!--header start-->
<header class="header white-bg">
<div class="sidebar-toggle-box">
<div data-original-title="Toggle Navigation" data-placement="right" class="fa fa-reorder tooltips"></div>
</div>
<!--logo start-->
PTA<span>OIMS</span>
<!--logo end-->
<div class="nav notify-row" id="top_menu">
<!-- notification start -->
<ul class="nav top-menu">
<!-- settings start -->
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-tasks"></i>
<span class="badge bg-success">6</span>
</a>
<ul class="dropdown-menu extended tasks-bar">
<div class="notify-arrow notify-arrow-green"></div>
<li>
<p class="green">You have 6 pending tasks</p>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Dashboard v1.3</div>
<div class="percent">40%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Database Update</div>
<div class="percent">60%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Iphone Development</div>
<div class="percent">87%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
<span class="sr-only">87% Complete</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Mobile App</div>
<div class="percent">33%</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 33%">
<span class="sr-only">33% Complete (danger)</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="task-info">
<div class="desc">Dashboard v1.3</div>
<div class="percent">45%</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
</a>
</li>
<li class="external">
See All Tasks
</li>
</ul>
</li>
<!-- settings end -->
<!-- inbox dropdown start-->
<li id="header_inbox_bar" class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-envelope-o"></i>
<span class="badge bg-important">5</span>
</a>
<ul class="dropdown-menu extended inbox">
<div class="notify-arrow notify-arrow-red"></div>
<li>
<p class="red">You have 5 new messages</p>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="img/avatar-mini.jpg"></span>
<span class="subject">
<span class="from">Jonathan Smith</span>
<span class="time">Just now</span>
</span>
<span class="message">
Hello, this is an example msg.
</span>
</a>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="img/avatar-mini2.jpg"></span>
<span class="subject">
<span class="from">Jhon Doe</span>
<span class="time">10 mins</span>
</span>
<span class="message">
Hi, Jhon Doe Bhai how are you ?
</span>
</a>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="img/avatar-mini3.jpg"></span>
<span class="subject">
<span class="from">Jason Stathum</span>
<span class="time">3 hrs</span>
</span>
<span class="message">
This is awesome dashboard.
</span>
</a>
</li>
<li>
<a href="#">
<span class="photo"><img alt="avatar" src="img/avatar-mini4.jpg"></span>
<span class="subject">
<span class="from">Jondi Rose</span>
<span class="time">Just now</span>
</span>
<span class="message">
Hello, this is metrolab
</span>
</a>
</li>
<li>
See all messages
</li>
</ul>
</li>
<!-- inbox dropdown end -->
<!-- notification dropdown start-->
<li id="header_notification_bar" class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-bell-o"></i>
<span class="badge bg-warning">7</span>
</a>
<ul class="dropdown-menu extended notification">
<div class="notify-arrow notify-arrow-yellow"></div>
<li>
<p class="yellow">You have 7 new notifications</p>
</li>
<li>
<a href="#">
<span class="label label-danger"><i class="fa fa-bolt"></i></span>
Server #3 overloaded.
<span class="small italic">34 mins</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-warning"><i class="fa fa-bell"></i></span>
Server #10 not respoding.
<span class="small italic">1 Hours</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-danger"><i class="fa fa-bolt"></i></span>
Database overloaded 24%.
<span class="small italic">4 hrs</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-success"><i class="fa fa-plus"></i></span>
New user registered.
<span class="small italic">Just now</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-info"><i class="fa fa-bank"></i></span>
Application error.
<span class="small italic">10 mins</span>
</a>
</li>
<li>
See all notifications
</li>
</ul>
</li>
<!-- notification dropdown end -->
</ul>
<!-- notification end -->
</div>
<div class="top-nav ">
<!--search & user info start-->
<ul class="nav pull-right top-menu">
<li>
<input class="form-control search fa fa-bell-o" placeholder="Search" type="text">
</li>
<!-- user login dropdown start-->
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<img alt="" src="img/avatar1_small.jpg">
<span class="username">
#if(Auth::check())
{{
Auth::User()->first_name . ' ' .
Auth::User()->family
}}</span>
#endif
<b class="caret"></b>
</a>
<ul class="dropdown-menu extended logout">
<div class="log-arrow-up"></div>
<li><i class=" fa fa-suitcase"></i>Profile</li>
<li><i class="fa fa-cog"></i> Settings</li>
<li><i class="fa fa-bell-o"></i> Notification</li>
<li><i class="fa fa-key"></i>Logout</li>
</ul>
</li>
<!-- user login dropdown end -->
</ul>
<!--search & user info end-->
</div>
</header>
<!--header end-->
I solved this problem
in header and sidebar blade, i used this:
<li><i class="fa fa-key"></i>Logout</li>
</ul>
and changed with this code in below:
<li><i class="fa fa-key"></i>Logout</li>
and create route:
Route::get('logout', 'Auth\LoginController#logout');
In bootstrap, How do I make an image a dropdown?
Hi, I have created a dropdown in bootstrap, I want to put an image such that it will be the item to click so as to see the dropdown.
Here is my code below.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Getting Started with Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-limanAbba-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LimanAbba</a>
</div>
<div class="collapse navbar-collapse" id="bs-limanAbba-navbar-collapse-1">
<div class="navbar-header navbar-right">
<ul class="nav navbar-nav">
<li>Freelance</li>
<li>About</li>
<li>Contact</li>\
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span><ul class="dropdown-menu">
<li>Liman</li>
<li>Code90</li>
<li>Coding</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
</nav>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Just put the image link on the dropdown button. See below code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown with image link.</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
<img src="https://i.stack.imgur.com/KKhkr.png?s=128&g=1">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 4</a></li>
</ul>
</div>
</div>
</body>
If you want a pure image as the dropdown toggle, you can use an anchor (a) instead of a button to have only the image displayed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<div class="container">
<h2>Pure Image Dropdown</h2>
<p>Click the image to see the dropdown</p>
<div class="dropdown">
<a href="#" id="imageDropdown" data-toggle="dropdown">
<img src="https://picsum.photos/50">
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 4</a></li>
</ul>
</div>
</div>
</body>