Form isn't wrapping in the correct class - html

Question

I am writing some code that hides and displays a different form depending on whether the user wants to login or register. However for some reason my form isn't displaying in the html in between the <form class="login-inputs"> , its doesn't even appear in the HTML doc. Can anyone see why?
<div class="col-md-3">
<button type="button" id="login" class="btn btn-default login hidden">Login</button>
<button type="button" id="register" class="btn btn-default register">Register</button>
<form class="login-inputs hidden">
<h3>Login</h3>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>

Answer 1

Remove the hidden class.
media screen element "on" and "off" class:
/* For Phone device */
.visible-xs{
display: block !important;
}
.hidden-xs{
display: none !important;
}
/* For Phone device End */
#media (min-width: 768px){
.visible-sm{
display: block !important;
}
.hidden-sm{
display: none !important;
}
}
#media (min-width: 992px){
.visible-md{
display: block !important;
}
.hidden-md{
display: none !important;
}
}
#media (min-width: 1200px){
.visible-lg{
display: block !important;
}
.hidden-lg{
display: none !important;
}
}
Just use the class. This CSS already have bootstrap 3.