My toggle tabs are not working even though I got the code off of the internet
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="register.css" rel="stylesheet">
</head>
<body>
<div class="container register">
<div class="row">
<div class="col-md-9 register-right">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item active">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#cust">Customer</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#rest">Restaurant</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="cust" role="tabpanel">
<h3 class="register-heading">Registration for customers</h3>
<div class="row register-form">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="First Name *" value="" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Last Name *" value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password *" value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Confirm Password *" value="" />
</div>
<div class="form-group">
<div class="maxl">
<label class="radio inline">
<input type="radio" name="gender" value="male" checked>
<span> Male </span>
</label>
<label class="radio inline">
<input type="radio" name="gender" value="female">
<span>Female </span>
</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" placeholder="Your Email *" value="" />
</div>
<div class="form-group">
<input type="text" minlength="10" maxlength="10" name="txtEmpPhone" class="form-control" placeholder="Your Phone *" value="" />
</div>
<div class="form-group">
<select class="form-control">
<option class="hidden" selected disabled>Please select meal your option</option>
<option>Vegetarian</option>
<option>Non Vegetarian</option>
</select>
</div>
<input type="submit" class="btnRegister" value="Register"/>
</div>
</div>
</div>
<div class="tab-pane fade" id="rest" role="tabpanel">
<h3 class="register-heading">Register your restaurant</h3>
<div class="row register-form">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Restaurant Name *" value="" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Address *" value="" />
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email *" value="" />
</div>
<div class="form-group">
<input type="text" maxlength="10" minlength="10" class="form-control" placeholder="Phone *" value="" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="password" class="form-control" placeholder="Password *" value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Confirm Password *" value="" />
</div>
<input type="submit" class="btnRegister" value="Register" />
</div>
The first tab is showing by default but I'm not able to switch to the other one. I went to the developers tools section and there weren't any errors.
I am using bootstrap v4 by the way. I have tried changing the position of the links, as someone recommeded in a different question but it didn't work for me.
I'm not sure what is the problem with your code, But when i customize in my code then it was worked for me, Please review my code and let me know if you have any question.
Hope it will work for you.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item active">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#cust" role="tab" >
Customer
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#rest" role="tab">
Restaurant
</a>
</li>
</ul>
<div class="tab-content">
<div id="cust" class="tab-pane in active">
<h3>Register your customer</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="rest" class="tab-pane fade">
<h3 class="register-heading">Register your restaurant</h3>
<div class="row register-form">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Restaurant Name *" value="" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Address *" value="" />
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email *" value="" />
</div>
<div class="form-group">
<input type="text" maxlength="10" minlength="10" class="form-control" placeholder="Phone *" value="" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="password" class="form-control" placeholder="Password *" value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Confirm Password *" value="" />
</div>
<input type="submit" class="btnRegister" value="Register"/>
</div>
</div>
</div>
</div>
</div>
Related
I was creting a bootstrap page with nav pills to change between two html forms
<ul class="nav nav-pills my-5 d-flex justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active btn-lg" href="#login" id="pills-login-tab" data-toggle="pill" role="tab">Log-in</a>
</li>
<span class="mx-3 d-flex align-items-center"><h5><small>or</small></h5></span>
<li class="nav-item">
<a class="nav-link btn-lg" href="#register" id="pills-register-tab" data-toggle="pill" role="tab">Register</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<!--Log-in-->
<div class="tab-pane fade show active col-6 mx-auto" id="login" role="tabpanel">
<form action="login.php" method="post">
<input class="d-none" name="action" value="login" viewonly>
<!--Email-->
<div class="form-group">
<label for="email">Email</label>
<input class="form-control " type="email" id="email" name="email" value="" required>
<div class="invalid-feedback">
</div>
</div>
<!--Password-->
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" id="password" name="password" required>
<div class="invalid-feedback">
</div>
</div>
<!--Submit-->
<input class="btn btn-primary" type="submit" id="submit">
</form>
</div><!--Log-in-->
<!--Register-->
<div class="tab-pane fade" id="register" role="tabpanel">
<form class=" col-6 mx-auto" action="login.php" method="post">
<input class="d-none" name="action" value="register" viewonly>
<!--Name-->
<div class="form-group" id="name-form">
<label for="name">Name</label>
<input class="form-control" type="text" id="name" name="name" required>
<div class="invalid-feedback">
</div>
</div>
<!--Username-->
<div class="form-group" id="username-form">
<label for="username">Username</label>
<input class="form-control" type="text" id="username" name="username" required>
<div class="invalid-feedback">
</div>
</div>
<!--Email-->
<div class="form-group" id="email-form">
<label for="email">Email </label>
<input class="form-control" type="email" id="email" name="email" required>
<div class="invalid-feedback">
</div>
</div>
<!--Password-->
<div class="form-group" id="password-form">
<label for="password">Password</label>
<input class="form-control" type="password" id="password" name="password" required>
<div class="invalid-feedback">
</div>
</div>
<!--Repeat Password-->
<div class="form-group" id="repeat-password-form">
<label for="rep-password">Repeat Passwords</label>
<input class="form-control" type="password" id="repeat-password" required>
<div class="invalid-feedback">
</div>
</div>
<!--Submit-->
<input class="btn btn-primary" type="submit" id="submit">
</form>
</div><!--Register-->
</div><!--Pills-->
I noticed that the first time that i visit that page it all works but if I go to the home page (or when I simply refresh) and then back to this page the nav doesnt work anymore.
I also noticed that if I chose the first option (default) and i refresh it works.
I don't really know what to do.
I'm using Node for backend.
Your code looks normal and correct. But you have a lot of ID duplicates, like "email", "password", "submit". ID should be unique inside DOM, otherwise it may cause errors. Correct this and maybe everything will work fine.
Your code works fine with latest jQuery and Bootstrap CDN
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
UPDATED
If your BS script work correctly - the URL of the page shouldn't change on pills clicking. So, after reloading the page - everything should work fine. If your URL changes while you clicking on pills - there is some other script, which have an influence on bootstrap.
I can't seem to make the inputs have a margin between them. I though form-group was supposed to handle this but the margin is not working.
Why is not working and how do I fix this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#command">Command</a></li>
<li><a data-toggle="tab" href="#volumes">Volumes</a></li>
<li><a data-toggle="tab" href="#networkTab">Network</a></li>
<li><a data-toggle="tab" href="#labels">Labels</a></li>
<li><a data-toggle="tab" href="#environmentTab">Environment Variables</a></li>
<li><a data-toggle="tab" href="#security">Security</a></li>
</ul>
<div class="tab-content tab-content-border" style="width: 100%">
<div id="command" class="tab-pane fade in active">
<div class="form-group">
<label for="commands" class="col-sm-2 control-label">Command</label>
<div class="col-sm-10">
<input name="commands" id="commands" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label for="entryPoint" class="col-sm-2 control-label">Entry Point</label>
<div class="col-sm-10">
<input name="entryPoint" id="entryPoint" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label for="workingDir" class="col-sm-2 control-label">Working
Directory</label>
<div class="col-sm-10">
<input name="workingDir" id="workingDir" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label for="user" class="col-sm-2 control-label">User</label>
<div class="col-sm-10">
<input name="user" id="user" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Console</label>
<div class="col-sm-10">
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="it" class="form-control" type="radio" />
<label for="it">Interactive & TTY
<small>(-i -t)</small>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="tty" class="form-control" type="radio" />
<label for="tty">TTY
<small>(-t)</small>
</label>
</div>
</div>
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="interactive" class="form-control" type="radio" />
<label for="interactive">Interactive
<small>(-i)</small>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="none" class="form-control" type="radio" checked/>
<label for="none">None</label>
</div>
</div>
</div>
</div>
</div>
You could try adding a class to the form group div. In this case I've added the class "input-box".
<div class="form-group input-box">
<label for="entryPoint" class="col-sm-2 control-label">Entry
Point</label>
<div class="col-sm-10">
<input name="entryPoint" id="entryPoint" class="form-control"
type="text"/>
</div>
</div>
And for the CSS...
.input-box {
padding-bottom: 30px;
}
This should add a 30px gap between each input.
Check this code snippet. I have added a margin-bottom class to each input.
Also when you are adding a div tag with row, make sure you add a container before. It is a must to add otherwise content will overflow.
Hope this solves your question.
.margin-bottom {
margin-bottom: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#command">Command</a></li>
<li><a data-toggle="tab" href="#volumes">Volumes</a></li>
<li><a data-toggle="tab" href="#networkTab">Network</a></li>
<li><a data-toggle="tab" href="#labels">Labels</a></li>
<li><a data-toggle="tab" href="#environmentTab">Environment Variables</a></li>
<li><a data-toggle="tab" href="#security">Security</a></li>
</ul>
<div class="tab-content tab-content-border" style="width: 100%">
<div id="command" class="tab-pane fade in active">
<div class="form-group margin-bottom">
<label for="commands" class="col-sm-2 control-label">Command</label>
<div class="col-sm-10">
<input name="commands" id="commands" class="form-control margin-bottom" type="text" />
</div>
</div>
<div class="form-group">
<label for="entryPoint" class="col-sm-2 control-label">Entry Point</label>
<div class="col-sm-10">
<input name="entryPoint" id="entryPoint" class="form-control margin-bottom" type="text" />
</div>
</div>
<div class="form-group">
<label for="workingDir" class="col-sm-2 control-label">Working
Directory</label>
<div class="col-sm-10">
<input name="workingDir" id="workingDir" class="form-control margin-bottom" type="text" />
</div>
</div>
<div class="form-group">
<label for="user" class="col-sm-2 control-label">User</label>
<div class="col-sm-10">
<input name="user" id="user" class="form-control margin-bottom" type="text" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Console</label>
<div class="col-sm-10">
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="it" class="form-control margin-bottom" type="radio" />
<label for="it">Interactive & TTY
<small>(-i -t)</small>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="tty" class="form-control" type="radio" />
<label for="tty">TTY
<small>(-t)</small>
</label>
</div>
</div>
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="interactive" class="form-control" type="radio" />
<label for="interactive">Interactive
<small>(-i)</small>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="none" class="form-control" type="radio" checked/>
<label for="none">None</label>
</div>
</div>
</div>
</div>
</div>
</div>
You just need to add row class just go through this fiddle - https://fiddle.jshell.net/Bharadhwaj/3bfpnu94/1/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#command">Command</a></li>
<li><a data-toggle="tab" href="#volumes">Volumes</a></li>
<li><a data-toggle="tab" href="#networkTab">Network</a></li>
<li><a data-toggle="tab" href="#labels">Labels</a></li>
<li><a data-toggle="tab" href="#environmentTab">Environment Variables</a></li>
<li><a data-toggle="tab" href="#security">Security</a></li>
</ul>
<div class="tab-content tab-content-border" style="width: 100%">
<div id="command" class="tab-pane fade in active">
<div class="form-group row">
<label for="commands" class="col-sm-2 control-label">Command</label>
<div class="col-sm-10">
<input name="commands" id="commands" class="form-control" type="text" />
</div>
</div>
<div class="form-group row">
<label for="entryPoint" class="col-sm-2 control-label">Entry Point</label>
<div class="col-sm-10">
<input name="entryPoint" id="entryPoint" class="form-control" type="text" />
</div>
</div>
<div class="form-group row">
<label for="workingDir" class="col-sm-2 control-label">Working
Directory</label>
<div class="col-sm-10">
<input name="workingDir" id="workingDir" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label for="user" class="col-sm-2 control-label">User</label>
<div class="col-sm-10">
<input name="user" id="user" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Console</label>
<div class="col-sm-10">
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="it" class="form-control" type="radio" />
<label for="it">Interactive & TTY
<small>(-i -t)</small>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="tty" class="form-control" type="radio" />
<label for="tty">TTY
<small>(-t)</small>
</label>
</div>
</div>
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="interactive" class="form-control" type="radio" />
<label for="interactive">Interactive
<small>(-i)</small>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="none" class="form-control" type="radio" checked/>
<label for="none">None</label>
</div>
</div>
</div>
</div>
</div>
#sdasdasd
Please go through this sample snippet:
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
https://fiddle.jshell.net/Bharadhwaj/ckckkz66/
I am coming from a C# background where i do basically winform to Web where i have to make good UI and a good form, now i am trying to make a Form using Bootstrap as i know how to do backend and all. now i want to learn how to use Bootstrap for Frontend as i see , most jobs are Web Based now.
Now My code Looks like this, and its very scattered.
<!doctype html>
<html>
<head>
<title>New Bootstrap test</title>
<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.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<h3>Test Form </h3>
<body>
<form class="form-hotizontal" role="form" method="post" action="index.php"/>
<div class="form-group">
<label for ="fullname" class="col-sm-2 control-label">Name</label>
<div class ="col-sm-10">
<input type="text" class="form-control" id="name" name="fullname" placeholder="Name in Full" value="" />
</div>
<div class="form-group">
<label for ="telephone" class="col-sm-2 control-label">Telephone</label>
<div class ="col-sm-10">
<input type="text" class="form-control" id="telephone" name="telephone" placeholder="Telephone" value="" />
</div>
<div class="form-group">
<label for ="email" class="col-sm-2 control-label">Email</label>
<div class ="col-sm-10">
<input type="text" class="form-control" id="email" name="email" placeholder="E-Mail" value="" />
</div>
<div class="form-group">
<label for ="name" class="col-sm-2 control-label">ID Number</label>
<div class ="col-sm-10">
<input type="text" class="form-control" id="idnumber" name="idnumber" placeholder="ID Number" value="" />
</div>
<div class="form-group">
<div class ="col-sm-10">
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
</html>
When i run it in browser instead of displaying a correct form, it just arranges them like staircases. I am new to this hence, I need help in this case.
You're missing div tags. There was also a typo in the form-horizontal class. Here is the corrected version. Here is a codepen for a demo. For every starting div tag, there should be a closing div.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<form class="form-horizontal" role="form" method="post" action="index.php" />
<div class="form-group">
<label for="fullname" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="fullname" placeholder="Name in Full" value="" />
</div>
</div>
<div class="form-group">
<label for="telephone" class="col-sm-2 control-label">Telephone</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="telephone" name="telephone" placeholder="Telephone" value="" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" name="email" placeholder="E-Mail" value="" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">ID Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="idnumber" name="idnumber" placeholder="ID Number" value="" />
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
hii guys i have a code that consists of login and registration forms as a tabs when we clicked on either ones it goes on to that respective form but now I want to change it a bit by removing the Register tab and adding it as a signup button beside login button and in the register page i want to add login button when i click it its goes to login form vice-versa..
PS:- I am new to HTML and Bootstrap and i want this to be done in pure HTML r Bootstrap
here is the code of signup.html
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-3">
<div class="panel panel-login">
<div class="panel-heading">
<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-form" role="tab" aria-controls="login" aria-selected="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" id="register-tab" data-toggle="tab" href="#register-form" role="tab" aria-controls="register" aria-selected="false">Register</a>
</li>
</ul>
<hr>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div class="tab-content" id="myTabContent">
<form id="login-form" class="tab-pane show active" role="tabpanel" aria-labelledby="login-tab" action="#" method="post" role="form" >
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group text-center">
<input type="checkbox" tabindex="3" class="" name="remember" id="remember">
<label for="remember"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-6">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
Forgot Password?
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="row logs">
<button class="loginBtn loginBtn--google" (click)="signInGoogle()" >Login with Google</button>
<button class="loginBtn loginBtn--facebook" (click)="signInFacebook()" >Login with Facebook</button>
<button class="loginBtn btn-linkedin" (click)="signInLinkedin()">
<span class="fa fa-linkedin"></span>
<span class="linkedtext">Login with LinkedIn</span>
</button>
</div>
</div>
</form>
<form id="register-form" class=" fade tab-pane " action="#" method="post" role="form" >
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirm Password">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-6 col-sm-offset-3">
<input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I tried many ways to do it but I couldn't come up.. if there is anyother way to do it please let me know thanks.
Jquery makes this really easy to do:
$(document).ready(function () {
$('#register-form').hide()
$('#register-tab').click(function () {
$("#login-form").hide();
$("#register-form").show();
})
$('#login-tab').click(function () {
$("#register-form").hide();
$("#login-form").show();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-3">
<div class="panel panel-login">
<div class="panel-heading">
<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-form" role="tab" aria-controls="login" aria-selected="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" id="register-tab" data-toggle="tab" href="#register-form" role="tab" aria-controls="register" aria-selected="false">Register</a>
</li>
</ul>
<hr>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div class="tab-content" id="myTabContent">
<form id="login-form" class="tab-pane show active" role="tabpanel" aria-labelledby="login-tab" action="#" method="post" role="form" >
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group text-center">
<input type="checkbox" tabindex="3" class="" name="remember" id="remember">
<label for="remember"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-6">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
Forgot Password?
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="row logs">
<button class="loginBtn loginBtn--google" (click)="signInGoogle()" >Login with Google</button>
<button class="loginBtn loginBtn--facebook" (click)="signInFacebook()" >Login with Facebook</button>
<button class="loginBtn btn-linkedin" (click)="signInLinkedin()">
<span class="fa fa-linkedin"></span>
<span class="linkedtext">Login with LinkedIn</span>
</button>
</div>
</div>
</form>
<form id="register-form" class=" fade tab-pane " action="#" method="post" role="form" >
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirm Password">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-6 col-sm-offset-3">
<input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I want to vertically center a container div on the page. This works on JSfiddle, but when I preview the page on my computer the container stays stuck to the top of the page. The body also seems to only fill half the page.
Does anyone know the reason for this? I don't know if it's the code, seeing as it works on JSfiddle.
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel login-tab">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
Login
</div>
<div class="col-xs-6">
Register
</div>
</div>
<hr>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form id="login-form" method="post" style="display:block;">
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="checkbox" tabindex="3" class="" name="remember" id="remember">
<label for="remember">Remember me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a href="#" tabindex="5" class="forgot-password">
Forgot password?</a>
</div>
</div>
</div>
</div>
</form>
<form id="register-form" method="post" style="display:none;">
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="Conform Password">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Other stylesheets:
<!--in head-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<!--before ending body-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="script.js"></script>