I am having a website which was created using bootstrap. now i am migrating my project to react. So, I was trying to use react-bootstrap. can someone help me to translate this Nav bar code written in bootstrap to react-bootstrap. I have tried changing class to className but it didnt work.
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
<div class="container">
<a class="navbar-brand" href="/index"><img src="{% static 'lab/images/logos/newlogo.png' %}" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav"
aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a href="/index" class="nav-link"
onMouseOver="this.style.color='#A41034'" onmouseout="this.style.color='black'"
style="text-transform: capitalize;">Home</a></li>
<li class="nav-item active"><a href="/research" class="nav-link"
onMouseOver="this.style.color='#A41034'" onmouseout="this.style.color='black'"
style="text-transform: capitalize;">Research</a></li>
<li class="nav-item active"><a href="/publications" class="nav-link"
onMouseOver="this.style.color='#A41034'" onmouseout="this.style.color='black'"
style="text-transform: capitalize;">Publications</a></li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="/team" id="navbarDropdown" role="button"
onMouseOver="this.style.color='#A41034'" onmouseout="this.style.color='black'"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
style="text-transform: capitalize;">
People
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/pi" onMouseOver="this.style.color='#A41034'"
onmouseout="this.style.color='black'">Principal Investigators</a>
<a class="dropdown-item" href="/researchers"
onMouseOver="this.style.color='#A41034'"
onmouseout="this.style.color='black'">Senior Scientists</a>
<a class="dropdown-item" href="/phd_students"
onMouseOver="this.style.color='#A41034'" onmouseout="this.style.color='black'">PhD/Masters
Students</a>
<a class="dropdown-item" href="/students" onMouseOver="this.style.color='#A41034'"
onmouseout="this.style.color='black'">Research Trainees</a>
<a class="dropdown-item" href="/alumni" onMouseOver="this.style.color='#A41034'"
onmouseout="this.style.color='black'">Alumni</a>
</div>
</li>
<li class="nav-item active"><a href="/contact" class="nav-link"
onMouseOver="this.style.color='#A41034'" onmouseout="this.style.color='black'"
style="text-transform: capitalize;">Projects</a></li>
<li class="nav-item active"><a href="/joinus" class="nav-link"
onMouseOver="this.style.color='#A41034'" onmouseout="this.style.color='black'"
style="text-transform: capitalize;">Join
Us</a></li>
</ul>
</div>
</div>
</nav>
program the react extension class to render as React components then program the react bootstrap in another file exporting the navbar CSS as props to app return, make sure you import bootstrap
Can you please make sure you include bootstrap CDN or install bootstrap properly?
And also make sure you import bootstrap.
According to your code, it should work.
Related
The Hamburger icon does not work on just one page from menu in mobile. I can access that page’s contents from the dropdown in mobile. But once there, the toggle icon does not function. The exasperating part is everything worked fine at one point. So I presume the glitch emerged while updating links.
Used Bootstrap5 components as a start for the navigation. The menu consists of “Home”, “My World, “Other World”. My lengthy troubleshooting effort included simply copying and pasting the entire nav from my index.html into Other World. Result: No dice.
The navigation currently works fine in and out of all pages with the exception of Other World. From mobile dropdown menu, I can access id’s within the page. However, once inside Other World, the toggle icon does not function in either portrait or landscape. My only escape is to hit the Brand / Home / Two Worlds button.
Thanks in advance for your insight and guidance.
<!-- /////////// START NAV SECTION ////////////// -->
<nav class="navbar navbar-expand-lg navbar-dark menu shadow fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="images/arts/TW-9DE802.svg" alt="logo image">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<!--<a class="nav-link active" aria-current="page" href="#"
style="color:#90d502;background:transparent;border:none;">Home</a>-->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="home"
data-bs-toggle="dropdown" aria-expanded="false"
style="color:#90d502;background:transparent;border:none;">
Home
</button>
<ul class="dropdown-menu" aria-labelledby="home">
<li><a class="dropdown-item" href="index.html#ambient-sector">Ambient Sector</a></li>
<li><a class="dropdown-item" href="index.html#vandi-verma">Vandi Verma</a></li>
<li><a class="dropdown-item" href="index.html#guion-bluford">Guion Bluford</a></li>
<li><a class="dropdown-item" href="index.html#righteous-vibes">Righteous Vibes</a></li>
<li><a class="dropdown-item" href="index.html#astronaut-awe">Astronaut Awe</a></li>
</ul>
</li>
<li class="nav-item">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="my-world"
data-bs-toggle="dropdown" aria-expanded="false"
style="color:#90d502;background:transparent;border:none;">
My World
</button>
<ul class="dropdown-menu" aria-labelledby="my-world">
<li><a class="dropdown-item" href="my-world.html#disrupt">Disrupt Convention</a></li>
<li><a class="dropdown-item" href="my-world.html#hypnosis">spellbound</a></li>
<li><a class="dropdown-item" href="my-world.html#rhetoric">Rhetoric</a></li>
<li><a class="dropdown-item" href="my-world.html#rhythm">Rhythm in Life</a></li>
<li><a class="dropdown-item" href="my-world.html#to-be-clear">To be Clear</a></li>
<li><a class="dropdown-item" href="my-world.html#influential">What a World</a></li>
<li><a class="dropdown-item" href="my-world.html#funny">Funny - Unius</a></li>
<div class="subnav">
<a class="nav-link" style="color:#90d502;background:transparent;border:none;"
href="tatlow-rawlings.html#losing-her">Tatlow & Rawlings<br>
The Common Sense Movement</a>
</ul>
</li>
<li class="nav-item">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="other-world"
data-bs-toggle="dropdown" aria-expanded="false"
style="color:#90d502;background:transparent;border:none;">
Other World
</button>
<ul class="dropdown-menu" aria-labelledby="other-world">
<li><a class="dropdown-item" href="other-world.html#story">Sharing Stories</a></li>
<li><a class="dropdown-item" href="other-world.html#ideas">Services</a></li>
<li><a class="dropdown-item" href="other-world.html#projects">Portfolio</a></li>
</ul>
</div>
</li>
</div>
</nav>
<!-- /////////// END NAV SECTION ////////////// -->
I am trying to use the Header component of material design bootstrap in my React Application. And I pasted the below line of code from official website of Material design bootstrap to implement Header collapsible when screen size is small but it. Anyone have any idea what else need to do in order to make it work in react. I just paste it inside my react component. There is some kind of state I need to maintain here.
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarExample01"
aria-controls="navbarExample01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarExample01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Jumbotron -->
<div class="p-5 text-center bg-light">
<h1 class="mb-3">Heading</h1>
<h4 class="mb-3">Subheading</h4>
<a class="btn btn-primary" href="" role="button">Call to action</a>
</div>
<!-- Jumbotron -->
</header>
I have implemented "navbar" in my web application using AngularJS directive. When the user is logged in, it displays the username of the logged in user. But, when I log in as a different user, it still displays the username of the previous user until I manually refresh the window.
Is there any solution to this?
This is the navigation-directive.html
<header class="container" ng-controller="HomeController as vm" ng-init="vm.init()">
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">ABC app</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul ng-if="vm.isLoggedIn()" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#!/homeuser">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!/myappointments">My Appointments</span></a>
</li>
<li class="nav-item active">
<a class="nav-link">Welcome!<strong> {{vm.loggedInUser}} </strong><i class="fa fa-user-circle-o"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" ng-click="vm.logout()">Logout</span></a>
</li>
</ul>
</div>
</nav>
</header>
Below is the navigation-directive.js
angular.module('bbms').directive('mhNavigation', mhNavigation);
function mhNavigation(){
return{
restrict: 'E',
templateUrl: 'angular-app/navigation-directive/navigation-directive.html'
};
}
And in my HomeController I am doing
vm.loggedInUser = response.data.username;
I have copied the relevant part from my home controller
Navbar-toggle button was on the top-right both web and mobile mode, but when the navbar collapsed on mobile mode something gone wrong (last pic).
I know it's because my code's line order, but I don't know how to fix it.
Web mode:
Mobile Mode:
Collapsed mobile mode:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">EVENT</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<?=$_SESSION['name'];?>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="login/logout.php">Logout</a>
</div>
</li>
</ul>
</div>
<div class="nav-item" style="float:top">
<input class="btn btn-danger" type="submit" value="Create">
<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>
</nav>
One way to solve this problem would be:
Put the code for the red button after the navbar brand item in the HTML
Give it the classes ml-auto order-lg-last. The former means "margin-left:auto" and the latter will reorder that button on screens that are large (lg) or larger and put it in the last position. ml-auto will then actually push it to the right.
Give the toggler (that should come after the red button in the HTML) the ml-2 class to get a bit of space between it and the red button.
Click "run code snippet" button below and expand to full page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">EVENT</a>
<div class="nav-item ml-auto order-lg-last">
<input class="btn btn-danger" type="submit" value="Create">
</div>
<button class="navbar-toggler ml-2" 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" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<?=$_SESSION['name'];?>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="login/logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
I am using ng2 bootstrap and updated angular cli 1.0 version after that got above error here is my code. could you plz solve this problem
☰
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown" dropdown (onToggle)="toggled($event)">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"
dropdownToggle>
<i class="icon-bell"></i> <span class="badge badge-pill badge-danger">5</span>
</a>
<div class="dropdown-menu dropdown-menu-right" dropdownMenu aria-labelledby="simple-dropdown">
<a class="dropdown-item" href="#"><i class="fa fa-envelope"></i> You have 4 videos to Validate</a>
<a class="dropdown-item" href="#"><i class="fa fa-trophy"></i> Need to Declare winners for week 34</a>
</div>
</li>
<li class="nav-item dropdown" dropdown (onToggle)="toggled($event)">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"
dropdownToggle>
<img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin#tfc.com">
<span class="hidden-md-down">Super Admin</span>
</a>
<div class="dropdown-menu dropdown-menu-right" dropdownMenu aria-labelledby="simple-dropdown">
<a class="dropdown-item" href="#"><i class="fa fa-key"></i> Change Password</a>
<a class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a>
</div>
</li>
</ul>
According to the docs it looks like your missing the * on the dropdownMenu. It should be
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu aria-labelledby="simple-dropdown">
So *dropdownMenu requires the *, but the dropdown directive does not.
Example from docs:
<div class="btn-group" dropdown>
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
Button dropdown <span class="caret"></span>
</button>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
<li class="divider dropdown-divider"></li>
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
</li>
</ul>
</div>