I tried to make a login button which opens up a modal for login details. When I click on the button it is referred to that point where I want it to be. But nothing opens up. A similar problem is with another button that has to open up another modal.
My 2nd problem in about the navbar toggling action is not working. there is no response from the button when I click on the toggle button.
below is my code - :
CODE FOR NAV BAR BUTTON -
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-md fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon "></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo.png" height="30" width="41"></a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#"><span class="fa fa-home fa-lg"></span>
Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html"><span
class="fa fa-info fa-lg"></span> About</a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-list fa-lg"></span> Menu</a>
</li>
<li class="nav-item"><a class="nav-link" href="contactus.html"><span
class="fa fa-address-card fa-lg"></span> Contact</a></li>
</ul>
<span class="navbar-text">
<a data-toggle="modal" href="#loginModal">
<span class="fa fa-sign-in"></span> Login
</a>
</span>
</div>
</div>
</nav>
-------------------------------------------------
-------------------------------------------------
CODE FOR LOGIN MODAL -
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog-centered modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3"
placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1"
id="exampleInputPassword3" placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me
</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-1">Sign in</button>
</div>
</form>
</div>
</div>
</div>enter code here
</div>
</body>
' <!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js">
</script>
<script src="node_modules/popper.js/dist/umd/popper.min.js">
</script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js">
</script>
<script>'$'(document).on('.data-api')</script>
<script>'
.navbar-toggler {bordeR:2px solid red !important;}
body{min-height: 500px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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://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>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class="navbar navbar-expand-md">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon "></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo.png" height="30" width="41"></a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#"><span class="fa fa-home fa-lg"></span>
Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html"><span
class="fa fa-info fa-lg"></span> About</a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-list fa-lg"></span> Menu</a>
</li>
<li class="nav-item"><a class="nav-link" href="contactus.html"><span
class="fa fa-address-card fa-lg"></span> Contact</a></li>
</ul>
<span class="navbar-text">
<a data-toggle="modal" data-target="#loginModal">
<span class="fa fa-sign-in"></span> Login
</a>
</span>
</div>
</div>
</nav>
<div id="loginModal" class="modal" role="dialog">
<div class="modal-dialog-centered modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3"
placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1"
id="exampleInputPassword3" placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me
</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-1">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
There is no Bootstrap JS and jQuery Added, so without it, modal will not work
do not pass href on login button, instead use data-target="#loginModal"
remove FADE class from modal,
I have removed many other classes from your code just for demo purpose, like fixed top on nav, yuou have have those as per your requirements
Related
I have given three textbox in a form .If I resize the page little bit , the label control is overlapped with textbox and some part of the label is not visible. How can I fix this issue. I have given _layout.cs file code here with and also I have attached the employee edit horizontal view html
My layout file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Vehicle Management</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
<!-- Custom styles for this template -->
<link rel="stylesheet" href="~/css/simple-sidebar.css" />
</head>
<body>
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"> Menu </div>
<div class="list-group list-group-flush">
Dashboard
<a class="list-group-item list-group-item-action bg-light" asp-controller="Vehicle"
asp-action="Index">Vehicle</a>
<a class="list-group-item list-group-item-action bg-light" asp-controller="Employee"
asp-action="Employeelist">Overview</a>
#*Events
Profile
Status*#
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>
<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" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
#*<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>*#
#*<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>*#
#*Commended by Polachan*#
#*<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>*#
</ul>
</div>
</nav>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
#RenderSection("Scripts", required: false)
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
#model EmpMgt.Models.ViewModels.AddEmployee
<br />
<form asp-controller="Employee"
asp-action="AddEmployee"
data-ajax="true"
data-ajax-method="POST"
data-ajax-mode="replace"
data-ajax-update="#content"
class="form-horizontal"
role="form" data-parsley-validate novalidate>
<div class="row">
<div class="col-sm-4">
<div class="form-group row">
<label class="control-label col-sm-3">Name</label>
<div class="col-sm-9">
<input class="form-control" type="text" asp-for="Employee.Name" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group row">
<label class="control-label col-sm-3">Address1</label>
<div class="col-sm-9">
<input class="form-control" type="text" asp-for="Employee.Address1" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group row">
<label class="control-label col-sm-3">Address2</label>
<div class="col-sm-9">
<input class="form-control" type="text" asp-for="Employee.Address2" />
</div>
</div>
</div>
</div>
</form>
Here is a demo worked:
View:
<br />
<form asp-controller="Employee"
asp-action="AddEmployee"
data-ajax="true"
data-ajax-method="POST"
data-ajax-mode="replace"
data-ajax-update="#content"
class="form-horizontal"
role="form" data-parsley-validate novalidate>
<div class="row">
<div class="col-sm-4">
<div class="form-group row">
<label class=" control-label " style="margin-right:10px">Name</label>
<input class="form-control" type="text" style="width:60%;" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group row">
<label class=" control-label " style="margin-right:10px">Address1</label>
<input class="form-control" type="text" style="width:60%;" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group row">
<label class=" control-label " style="margin-right:10px">Address2</label>
<input class="form-control" type="text" style="width:60%;" />
</div>
</div>
</div>
</form>
result:
Im trying to create a navigation which has a login form and below login form is the menu links.
I want these two in my navigation. But the problem is that the output has only given me is one horizontal. And the menu links are not below in the login form.
I want the menu links below the login form. But it's giving me a wrong output
CSS:
.nav-link {
font-size: 18px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
}
.navbar-light .navbar-nav .nav-link {
color: #ffff !important;
}
#search { margin: auto; }
body {
overflow-x: hidden;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1, user-scalable=no">
<title></title>
<!-- favicon -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<!-- /favicon -->
<link href="/realcss/bootstrap-4.1.3.min.css" type="text/css" rel="stylesheet">
<link href="/realcss/flag-icon.min.css" type="text/css" rel="stylesheet">
<link href="/realcss/fontawesome-all-5.3.min.css" type="text/css" rel="stylesheet">
<link href="/css/layout.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- navigation.tpl -->
<header>
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-dark border-bottom" style="float: right;">
<a class="navbar-brand" href="#"><img class="logo" src="/images/logo/M.png" style="max-width: 400px;
max-height: 64px;" alt=""></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 justify-content-center" id="navbarCollapse">
<div id="search">
<form class="d-flex justify-content-center align-items-center form-inline my-2 my-lg-0">
<div class="col-auto pl-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-user"></i></div>
</div>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email Address">
</div>
</div>
<div class="col-auto pl-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-lock"></i></div>
</div>
<input type="password" class="form-control" id="inlineFormInputGroup" placeholder="Password">
</div>
</div>
<div class="col-auto pl-0 pr-0">
<button class="btn btn-primary my-2 my-sm-0" type="submit">Login</button>
</div>
</form>
</div>
<ul class="navbar-nav d-flex justify-content-center">
<li id="li-home" class="nav-item active">
<a id="link-home" class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li id="li-about" class="nav-item">
<a id="link-about" class="nav-link" href="#">Link</a>
</li>
<li id="li-team" class="nav-item">
<a id="link-team" class="nav-link" href="#">Link</a>
</li>
<li id="li-news" class="nav-item">
<a id="link-news" class="nav-link" href="#">Link</a>
</li>
<li id="li-contact" class="nav-item">
<a id="link-contact" class="nav-link" href="{{ route('promotion') }}">Promotion</a>
</li>
</ul>
</div>
</nav>
</header>
</body>
Try the following CSS:
.navbar-expand-md .navbar-collapse{
flex-direction:column;
}
Live Demo
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
How to center this form in Bootstrap 4? [duplicate]
(2 answers)
Align the form to the center in Bootstrap 4 [duplicate]
(3 answers)
Closed 4 years ago.
I want that the login form is centered on the login page and I have tried using align-items-center and justify-content-center ( https://codepen.io/sanesanyo/pen/vveNqE ) but it still ends up starting from the top. I will be extremely glab if someone can help me out. Spent a lot of time and havent been able to find a solution.
Thanks a lot in advance.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content='IE=Edge' http-equiv='X-UA-Compatible'>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="app.css">
<title>Dein Immobilien Centre - Das Portal für Zwangsversteigerungen in Deutschland</title>
</head>
<body id="login" style="height:800px">
<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-xl pt-10 pb-0 fixed-top">
<img src="ImmoCenterDeinLogo.jpg" style="width: 240px; height: 50px" alt="">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ÜBER UNS
</li>
<li class="nav-item">
ANGEBOTE
</li>
<li class="nav-item">
KATALOG
</li>
<li class="nav-item">
KONTAKT
</li>
<li class="nav-item">
IMPRESSUM
</li>
<ul class="navbar-nav">
<li class="nav-item">
Sign Up <i class="fas fa-user-plus"></i>
</li>
<li class="nav-item">
Login <i class="fas fa-user"></i>
</li>
</ul>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<section class="container-fluid px-0">
<div class="row align-items-center justify-content-center">
<div class="col-lg-6">
<div id="headingGroup" class="text-white text-center mt-5" >
<h2 class="display-2">" "</h2>
<h2 class="display-2">DEIN<span>/</span>IMMOBILIEN<span>/</span>CENTER</h2>
<h2 class="display-3">Dein Neues Zuhause</h2>
</div>
</div>
</div>
<div class="row align-items-center justify-content-center">
<div class="col-lg-6">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
Add height 100%
<section class="container-fluid px-0" style="height: 100%;">
<div class="row align-items-center justify-content-center" style="height: 100%;">
https://codepen.io/anon/pen/RELryp
Apart from text color on top and size, I don't think you need to change anything there, your code looks ok for me.
The code is as follows:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content='IE=Edge' http-equiv='X-UA-Compatible'>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="app.css">
<title>Dein Immobilien Centre - Das Portal für Zwangsversteigerungen in Deutschland</title>
</head>
<body id="login" style="height:800px">
<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-xl pt-10 pb-0 fixed-top">
<img src="ImmoCenterDeinLogo.jpg" style="width: 240px; height: 50px" alt="">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ÜBER UNS
</li>
<li class="nav-item">
ANGEBOTE
</li>
<li class="nav-item">
KATALOG
</li>
<li class="nav-item">
KONTAKT
</li>
<li class="nav-item">
IMPRESSUM
</li>
<ul class="navbar-nav">
<li class="nav-item">
Sign Up <i class="fas fa-user-plus"></i>
</li>
<li class="nav-item">
Login <i class="fas fa-user"></i>
</li>
</ul>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<section class="container-fluid px-0" >
<div class="row align-items-center justify-content-center">
<div class="col-lg-6">
<div id="headingGroup" class="text text-center mt-5" >
<h2 class="display-5">" "</h2>
<h2 class="display-4">DEIN<span>/</span>IMMOBILIEN<span>/</span>CENTER</h2>
<h2 class="display-4">Dein Neues Zuhause</h2>
</div>
</div>
</div>
<div class="row align-items-center justify-content-center">
<div class="col-lg-6">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to integrate a dropdown sign in menu into a bootstrap template. Below is my code for the template page and the sign in menu which should be appearing when the log in button is pressed in the right of the navigation bar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="bootstrap/favicon.ico">
<title>Example</title>
<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="bootstrap/assets/js/ie-emulation-modes-warning.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#"><img src="images/logo.png" style="margin:6px 0px"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Log In <span class="caret"></span>
<ul class="dropdown-menu dropdown-lr animated slideInRight" role="menu">
<div class="col-lg-12">
<div class="text-center">
<h3><b>Log In</b></h3>
</div>
<form id="ajax-login-form" action="" method="post" role="form" autocomplete="off">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password" autocomplete="off">
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-7">
<input type="checkbox" tabindex="3" name="remember" id="remember">
<label for="remember"> Remember Me</label>
</div>
<div class="col-xs-5 pull-right">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-success" value="Log In">
</div>
</div>
</div>
<input type="hidden" class="hide" name="token" id="token" value="a465a2791ae0bae853cf4bf485dbe1b6">
</form>
</div>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bootstrap/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
</html>
I want to the dropdown to be displayed at the bottom of the NAV BRAND (or Nav logo on the top left) when pressing the menu button. But, it appears next to the button in mobile view and in the center. See here:
Below is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<!-- TOP NAVBAR -->
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
MOCK WEBSITE
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>ABOUT</li>
<li class="dropdown">
PORTFOLIO <b class="caret"></b>
<ul class="dropdown-menu">
<li>PHOTOS</li>
<li>VIDEOS</li>
<li>MUSIC</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</div> <!-- Container -->
</div> <!-- Nav -->
<div class="jumbotron">
<div class="container">
<h1>MOCK WEBSITE</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<h4>Contact Me</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="contact-name" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="contact-email" placeholder="you#example.com">
</div>
</div>
<div class="form-group">
<label for="contact-msg" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea class="form-control" rows="8" placeholder="Write your message..."></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">Send</button>
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</form>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Site Built By Andrew Vu</p>
Subscribe on YouTube
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
You've forgotten wrapper navbar-header to group brand and button:
<div class="navbar-header">
MOCK WEBSITE
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
jsfiddle-example