I am trying to create a combo-menu with login and signup functionality using Bootstrap. I have followed Bootstrap and W3Schools samples and everything seems alright, but only the login form is displayed, while the signup form does not display when the Signup tab is clicked.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<ul class="nav nav-tabs" id="myTab" role="tabList">
<li class="nav-item">
<a class="nav-link active" id="login-tab" data-toggle="tab" href="login.php" role="tab" aria-controls="login" aria-selected="true"><?= Translate::get("Login") ?></a>
</li>
<li class="nav-item">
<a class="nav-link" id="signup-tab" data-toggle="tab" href="login.php" role="tab" aria-controls="signup"><?= Translate::get("Sign Up")?></a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<form class="form">
<input class="form-control" type="email" placeholder="<?= Translate::get("Email") ?>"/>
<input class="form-control" type="password" placeholder="<?= Translate::get("Password") ?>" />
<input class="form-control" type="submit" value="<?= Translate::get("Log In")?>"/>
</form>
</div>
<div class="tab-pane fade" id="signup" role="tabpanel" aria-labelledby="signup-tab">
<input type="email" placeholder="<?= Translate::get("Email")?>"/>
<input type="password" placeholder="<?= Translate::get("Password") ?>"/>
<input type="password" placeholder="<?= Translate::get("Enter Password Again") ?>" />
<input type="submit" value="<?= Translate::get("Sign Up")?>"/>
</div>
</div>
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
And the output is like this (The Signup tab does not work):
It is critical that the id of the div used in the tab content be given as href of login or signup hyperlinks. So, for the login button, we will have href="#login" and for the signup button, we'll have href="#signup". Solved ✓
Related
I'm currently working on a project that involves a login and register form. I decided to use bootstrap pills for this matter.
This is login and register html form
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Pills navs -->
<ul class="nav nav-pills nav-justified mb-3" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="tab-login" data-mdb-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="tab-register"
data-mdb-toggle="pill"
href="#pills-register"
role="tab"
aria-controls="pills-register"
aria-selected="false"
>Register</a
>
</li>
</ul>
<!-- Pills navs -->
<!-- Pills content -->
<div class="tab-content">
<div
class="tab-pane fade show active"
id="pills-login"
role="tabpanel"
aria-labelledby="tab-login"
>
<form action="/login" method="post">
<br>
<!-- Email/Username input -->
<div class="form-outline mb-4 login">
<input type="text" id="loginCred" name="loginCred" autofocus autocomplete="off" class="form-control" />
<label class="form-label" for="loginCred">Email or username</label>
</div>
<br>
<!-- Password input -->
<div class="form-outline mb-4 login">
<input type="password" id="loginPassword" name="loginPassword" class="form-control" />
<label class="form-label" for="loginPassword">Password</label>
</div>
<!-- 2 column grid layout -->
<div class="row mb-4">
<div class="col-md-12 d-flex justify-content-center">
<!-- Simple link -->
Forgot password?
</div>
</div>
<!-- Submit button -->
<button type="submit" id="login" disabled="disabled" class="btn btn-dark btn-block mb-4">Log in</button>
<!-- Register button -->
<div class="text-center">
<p>Not a member? <a id="reg" href="">Register</a></p>
</div>
</form>
</div>
<div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="tab-register">
<form action="/register" method="post" onchange="onFormUpdate()">
<br>
<!-- Name input -->
<div class="form-outline mb-4 register">
<input type="text" id="registerName" name="registerName" autofocus autocomplete="off" class="form-control" />
<label class="form-label" for="registerName">Full Name</label>
</div>
<!-- Username input -->
<div class="form-outline mb-4 register">
<input type="text" id="registerUsername" name="registerUsername" autocomplete="off" class="form-control" />
<label class="form-label" for="registerUsername">Username</label>
</div>
<div class="row-sm-3 mb-2">
<small id="passwordHelp" class="text-danger"></small>
</div>
<!-- Email input -->
<div class="form-outline mb-4 register">
<input type="email" id="registerEmail" name="registerEmail" autocomplete="off" class="form-control" />
<label class="form-label" for="registerEmail">Email</label>
</div>
<!-- Password input -->
<div id="pass" class="form-outline mb-4 register">
<input type="password" id="registerPassword" name="registerPassword" class="form-control" />
<label class="form-label" for="registerPassword">Password</label>
</div>
<div class="row-sm-3 mb-2">
<small id="passwordHelp" class="text-danger"></small>
</div>
<!-- Confirm Password input -->
<div id="confirm-pass" class="form-outline mb-4 register">
<input type="password" id="registerConfirmPassword" name="registerConfirmPassword" class="form-control" />
<label class="form-label" for="registerConfirmPassword">Confirm Password</label>
</div>
<div class="row-sm-3 mb-2">
<small id="confirmPasswordHelp" class="text-danger"></small>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="registerCheck" aria-describedby="registerCheckHelpText" />
<label class="form-check-label" for="registerCheck">
I have read and agree to the terms and conditions
</label>
</div>
<!-- Submit button -->
<button type="submit" id="register" disabled="disabled" class="btn btn-dark btn-block mb-3">Register</button>
<!-- Login button -->
<div class="text-center">
<p>Already a member? <a id="log" href="">Log in</a></p>
</div>
</form>
</div>
</div>
<!-- Pills content -->
As you can see, the form is stretched over the page. So I tried to minimize it using bootstrap w-50 as you can see below
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css" rel="stylesheet"/>
<!-- Pills navs -->
<ul class="nav nav-pills nav-justified mb-3 w-50" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="tab-login" data-mdb-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="tab-register"
data-mdb-toggle="pill"
href="#pills-register"
role="tab"
aria-controls="pills-register"
aria-selected="false"
>Register</a
>
</li>
</ul>
<!-- Pills navs -->
<!-- Pills content -->
<div class="tab-content">
<div
class="tab-pane fade show active"
id="pills-login"
role="tabpanel"
aria-labelledby="tab-login"
>
<form action="/login" method="post">
<br>
<!-- Email/Username input -->
<div class="form-outline mb-4 w-50 login">
<input type="text" id="loginCred" name="loginCred" autofocus autocomplete="off" class="form-control" />
<label class="form-label" for="loginCred">Email or username</label>
</div>
<br>
<!-- Password input -->
<div class="form-outline mb-4 login">
<input type="password" id="loginPassword" name="loginPassword" class="form-control" />
<label class="form-label" for="loginPassword">Password</label>
</div>
<!-- 2 column grid layout -->
<div class="row mb-4">
<div class="col-md-12 d-flex justify-content-center">
<!-- Simple link -->
Forgot password?
</div>
</div>
<!-- Submit button -->
<button type="submit" id="login" disabled="disabled" class="btn btn-dark btn-block mb-4">Log in</button>
</div>
<!-- Pills content -->
Now another problem arises. The from is left aligned. I searched and came to a few answers but most of them were using flex and grids. I couldn't use it in my code. I didn't find anything about nav pills and nav content.
Any help to center the form is appreciated.
Edit: I tried using justify-content-center and it didn't work also.
You could use the .mx-auto class with your .w-50 class, it will horizontally center your form
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css" rel="stylesheet"/>
<!-- Pills navs -->
<ul class="nav nav-pills nav-justified mb-3 w-50 mx-auto" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="tab-login" data-mdb-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="tab-register"
data-mdb-toggle="pill"
href="#pills-register"
role="tab"
aria-controls="pills-register"
aria-selected="false"
>Register</a
>
</li>
</ul>
<!-- Pills navs -->
<!-- Pills content -->
<div class="tab-content">
<div
class="tab-pane fade show active"
id="pills-login"
role="tabpanel"
aria-labelledby="tab-login"
>
<form action="/login" method="post">
<br>
<!-- Email/Username input -->
<div class="form-outline mb-4 w-50 login">
<input type="text" id="loginCred" name="loginCred" autofocus autocomplete="off" class="form-control" />
<label class="form-label" for="loginCred">Email or username</label>
</div>
<br>
<!-- Password input -->
<div class="form-outline mb-4 login">
<input type="password" id="loginPassword" name="loginPassword" class="form-control" />
<label class="form-label" for="loginPassword">Password</label>
</div>
<!-- 2 column grid layout -->
<div class="row mb-4">
<div class="col-md-12 d-flex justify-content-center">
<!-- Simple link -->
Forgot password?
</div>
</div>
<!-- Submit button -->
<button type="submit" id="login" disabled="disabled" class="btn btn-dark btn-block mb-4">Log in</button>
</div>
<!-- Pills content -->
This question already has answers here:
Full width tabs using Bootstrap (Support IE)
(9 answers)
Closed 2 years ago.
How can I make those two tabs of login and create account equally spaced and centered as given in the picture? I am only able to get them in the left corner and the tabs take up only as long as the text inside (as given in 2nd image). I want to make the tabs look like this:.
Sample Code :
<!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.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
</head>
<body>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a href="#login" id="tab1" class='nav-link active' aria-controls="login" aria-selected='true' role="tab" tabindex=1 data-toggle='tab'>LOGIN</a>
</li>
<li class="nav-item">
<a href="#create-account" id="tab2" class='nav-link' aria-controls="create-account" aria-selected='false' role="tab" tabindex=0 data-toggle='tab'>CREATE ACCOUNT</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane active" id="login" role="tabpanel" aria-labelledby="tab1" aria-hidden='false'>
<!-- Addition of Form 1 -->
<form class="d-flex flex-column">
<div class="form-group">
<label for="exampleInputEmail1">Email address <span class='required'>*</span></label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password <span class='required'>*</span></label>
<div class="input-group d-flex flex-row">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
<div class="input-group-append">
<div class="input-group-text">
<i href='#' class='bi bi-eye-fill ml-2'></i>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-hover btn-orange rounded-0">SIGN IN</button><br>
<button type="submit" class="btn btn-hover btn-default2 rounded-0">FORGOT YOUR PASSWORD?</button>
</form>
</div>
</body>
</html>
Per the docs, use the nav-fill class.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<ul class="nav nav-tabs nav-fill" id="myTab" role="tablist">
<li class="nav-item">
<a href="#login" id="tab1" class='nav-link active' aria-controls="login" aria-selected='true' role="tab" tabindex=1 data-toggle='tab'>LOGIN</a>
</li>
<li class="nav-item">
<a href="#create-account" id="tab2" class='nav-link' aria-controls="create-account" aria-selected='false' role="tab" tabindex=0 data-toggle='tab'>CREATE ACCOUNT</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane active" id="login" role="tabpanel" aria-labelledby="tab1" aria-hidden='false'>
<!-- Addition of Form 1 -->
<form class="d-flex flex-column">
<div class="form-group">
<label for="exampleInputEmail1">Email address <span class='required'>*</span></label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password <span class='required'>*</span></label>
<div class="input-group d-flex flex-row">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
<div class="input-group-append">
<div class="input-group-text">
<i href='#' class='bi bi-eye-fill ml-2'></i>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-hover btn-orange rounded-0">SIGN IN</button><br>
<button type="submit" class="btn btn-hover btn-default2 rounded-0">FORGOT YOUR PASSWORD?</button>
</form>
</div>
I have two html and two different controller files and my requirement is i should display one common submit button for both the forms and it should be disabled until the mandatory fields are entered in both the forms.Here is the attached plunker https://plnkr.co/edit/RAzfWZYuCi0kXPL6PDoT?p=preview
<body ng-controller="myCtrl" class="container">
<ul class="nav nav-tabs">
<li><a data-toggle="tab" href="#menu2">Student Details</a></li>
<li><a data-toggle="tab" href="contactdetails.html">Contact Info</a>
</li>
</ul>
<div class="tab-content">
<div id="menu2" class="tab-pane active">
<div class="form-group">
<label for="name">Student Name:</label>
<input type="name" class="form-control" id="name" ng-
model="students.name" required>
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="age" class="form-control" id="age" ng-
model="students.age">
</div>
</div>
</div>
My fiddle is here: http://jsfiddle.net/L4hkrwa6/14/
The HTML code is here:
<ul class="nav nav-pills nav-justified">
<li class="nav-item nav-link active"><a data-toggle="tab" href="#Show1">Show1</a></li>
<li class="nav-item nav-link"><a data-toggle="tab" href="#Show2">Show2</a></li>
<li class="nav-item nav-link"><a data-toggle="tab" href="#Show3">Show3</a></li>
</ul>
<div class="tab-content">
<form action="test">
<div id="Show1" class="tab-pane fade in active">
<input type="text" name="OnlyMe"/>
</div>
</form>
<form action="differentTest">
<div id="Show2" class="tab-pane fade">
<input type="text" name="MeAnd23Submit"/>
</div>
<div id="Show3" class="tab-pane fade">
<input type="text" name="MeAnd23Submit2"/>
</div>
<input type="text" name="23"/>
<input type="submit" value="submit"/>
</form>
</div>
When I click on Show1 (and when the page is loaded initially) I want to only see the Input 'OnlyMe'.
When I click on Show2 I want to only see the Inputs 'MeAnd23Submit', '23' and the submit button.
When I click on Show3 I want to only see the Inputs 'MeAnd23Submit2', '23' and the submit button.
I tried several combinations but nothing seems to work, I would appreciate any help...
Thanks in advance!
Update:
This is just a small example with the necessary items to understand the problem. In the "real case" I have many more input fields and I would like to not copy the fields in multiple tab-panes.
Have you tried this: forked fiddle
<ul class="nav nav-pills nav-justified">
<li class="nav-item nav-link active"><a data-toggle="tab" href="#Show1">Show1</a></li>
<li class="nav-item nav-link"><a data-toggle="tab" href="#Show2">Show2</a></li>
<li class="nav-item nav-link"><a data-toggle="tab" href="#Show3">Show3</a></li>
</ul>
<div class="tab-content">
<div id="Show1" class="tab-pane fade in active">
<form action="test">
<input type="text" name="OnlyMe"/>
</form>
</div>
<div id="Show2" class="tab-pane fade">
<form action="differentTest">
<input type="text" name="MeAnd23Submit"/>
<input type="text" name="23"/>
<input type="submit" value="submit"/>
</form>
</div>
<div id="Show3" class="tab-pane fade">
<form action="differentTest">
<input type="text" name="MeAnd23Submit2"/>
<input type="text" name="23"/>
<input type="submit" value="submit"/>
</form>
</div>
</div>
I Have included bootstrap tabs in my project.But the problem I am facing is that when I click on the tabs the content are getting changed,but the tab is not getting active.ie always the first tab is active irrespective of the click.
How can I get rid of this?
Code is given below.
<div class="row">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Trip Overview
</li>
<li role="presentation">Itinerary
</li>
<li role="presentation">Cost
</li>
<li role="presentation">Terms & Condition
</li>
<li role="presentation">Inquiry
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<span>{{model.overview}}</span>
</div>
<div role="tabpanel" class="tab-pane" id="itinerary">
<div ng-repeat="itenary in model.itenary.long">
<p>{{itenary.name}}</p>
<p>{{itenary.content}}</p>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="cost">Cost details will be uploaded soon</div>
<div role="tabpanel" class="tab-pane" id="ta">
<h3>Terms & Conditions</h3>
<div ng-repeat="term in model.tna.terms">
<ul>
<li>{{term}}</li>
</ul>
</div>
<h3>Payments</h3>
<div ng-repeat="payment in model.tna.payment">
<ul>
<li>{{payment}}</li>
</ul>
</div>
<h3>Cancellation Policy</h3>
<div ng-repeat="cancelPolicy in model.tna.payment">
<ul>
<li>{{cancelPolicy}}</li>
</ul>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="book">
<div id="contact-form" class="clearfix">
<ul id="errors" class="">
<li id="info">There were some problems with your form submission:</li>
</ul>
<p id="success">Thanks for your message! We will get back to you ASAP!</p>
<form method="post" action="/home">
<label for="name">Name: <span class="required">*</span>
</label>
<input type="text" id="name" name="name" value="" placeholder="<Your Name>" required="required" autofocus="autofocus" />
<label for="email">Email Address: <span class="required">*</span>
</label>
<input type="email" id="email" name="email" value="" placeholder="<your mail>" required="required" />
<label for="telephone">Telephone:</label>
<input type="tel" id="telephone" name="telephone" value="" />
<label for="enquiry">Enquiry:{{model.name}}</label>
<label for="message">Message: <span class="required">*</span>
</label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
<span id="loading"></span>
<input type="submit" value="Send" id="submit-button" />
<p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
</form>
</div>
</div>
</div>
</div>
these are the imported libraries inn my project
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- JS -->
<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>