How to expand nav tabs to take equal widths in bootstrap? [duplicate] - html

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>

Related

Center Pills nav and Pills content Bootstrap

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 -->

CSS - Moving items around in Navbar

See screenshots for what I am trying to achieve.
https://imgur.com/jaOmFnz
https://imgur.com/aRxile9
The menu list items (My application, Register, Login) I want to move to the far right of the screen. I have tried messing with the margins, float:right, however still cannot get this to work.
The container div spans the full width. Would I need to amend this div?
I've created a codeped to illustrate this
https://codepen.io/jquerypain121/pen/OJNaWpa
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Log in - PhotoUploaderForm</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-white border-bottom box-shadow mb-3">
<div class="container">
<img src="https://lh3.googleusercontent.com/proxy/HQAE10KQ0NmS9htB5BKSoN24jWvyaizAKwhGy8hNVVsCbFUubvDdLSsYB8xWbN3JUDzDuAzw0OxKO5QZyL_XPqitq1wcSYaMVJ35_oC48c4FKZYykJUoucS-LJT1" width="200" title="title" alt="additional title">
<a class="navbar-brand" href="/">My Application</a>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class=" moveright nav navbar-nav">
<a class="navbar-brand" href="/">My Application</a>
<li class="nav-item">
<a class="nav-link text-dark" id="register" href="/Identity/Account/Register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" id="login" href="/Identity/Account/Login">Login</a>
</li>
</ul>
<ul class="navbar-nav flex-grow-1">
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid">
<main role="main" class="pb-3">
<h1>Log in</h1>
<div class="row">
<div class="col-md-4">
<section>
<form id="account" method="post" action="/Identity/Account/Login" novalidate="novalidate">
<hr>
<div class="text-danger validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>
<div class="form-group">
<label for="Input_Email">Email</label>
<input class="form-control" type="email" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Input_Email" name="Input.Email" value="">
<span class="text-danger field-validation-valid" data-valmsg-for="Input.Email" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<label for="Input_Password">Password</label>
<input class="form-control" type="password" data-val="true" data-val-required="The Password field is required." id="Input_Password" name="Input.Password">
<span class="text-danger field-validation-valid" data-valmsg-for="Input.Password" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label for="Input_RememberMe">
<input type="checkbox" data-val="true" data-val-required="The Remember me? field is required." id="Input_RememberMe" name="Input.RememberMe" value="true">
Remember me?
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" formaction="/Identity/Account/Login?returnUrl=%2F">Log in</button>
<input type="hidden" id="ReturnUrl" name="ReturnUrl" value="/">
</div>
<div class="form-group">
<p>
Register as a new user
</p>
</div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8PEcG7qoomVJk-wiZaqy0p6b5tfvXZTuVH-9YakoOKQQf8mWfBn4MYD7BCb3YKL_NmEz_Ru57zD8PV8Tq_6ea5WApccwrpwYrOkBdu7Qu9Z6NMycGCHqDTI35Ci1mPMVQSqyQ47sNdvfhZhfkMSx_DQ"><input name="Input.RememberMe" type="hidden" value="false"></form>
</section>
</div>
<div class="col-md-6 col-md-offset-2">
</div>
</div>
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
<p style="float:left;color: white;">© 2020 - Leicestershire Health Informatics Service -</p>
<a style="float:right; margin-right: 10px;" href="/Home/Privacy">Privacy</a>
<a style="float:right;margin-right: 10px;" href="/Home/Information">Info</a>
<a style="float:right;margin-right: 10px;" href="/Home/TermsAndConditions">T&C</a>
</div>
</footer>
</body></html>
Any help would be appreciated, thanks

you don't need to customize the code. Bootstrap has it's own design which you want to achieve. For your reference https://getbootstrap.com/docs/4.5/components/navbar/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand">
<img src="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top">
My Application
</a>
<div class="form-inline">
<a class="nav-link text-dark" href="">My Application</a>
<a class="nav-link text-dark" id="register" href="/Identity/Account/Register">Register</a>
<a class="nav-link text-dark" id="login" href="/Identity/Account/Login">Login</a>
</div>
</nav>

Instead of writing moveright in your ul class list, write ml-auto. This should move the list to the right.

Make the width of the nav 100%
and then make the ul float: right;
Hope it will work for you

Creating a Combo Login/Signup Form with Bootstrap

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 ✓

Bootstrap4 move login form towards to the center

I have the following login page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Log in </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="/">
<img src="https://loremimage.com/default/32/32/1" />
Διαχείρηση Μελών ΕΛΛΑΚ Κύπρου
</a>
</nav>
</header>
<div class="container-fluid d-flex align-items-center justify-content-center">
<div class="row bg-light border border-primary">
<div class="col mt-5 col-xs-12 col-md-12 col-lg-12">
<h1 style="text-align:center">Log in</h1>
<form action="/login_check" method="post">
<div class="form-group">
<input type="text" class="form-control" id="username" name="_username" value="" placeholder="Username" required="required" />
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" name="_password" placeholder="Password" required="required" />
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" id="remember_me" name="_remember_me" class="form-check-input" />
<label class="form-check-label" for="remember_me" >Remember me</label>
</div>
</div>
<div class="form-row">
<div class="col">
<input type="submit" class="btn btn-primary btn-block" id="_submit" name="_submit" value="Log in" />
</div>
<div class="col">
<a class="btn btn-warning btn-block" href="/resetting/request">I forgot my password</a>
</div>
</div>
</form>
</div>
<div class="col col-xs-12 col-md-12 col-lg-12 mt-1 mb-5">
<a class="btn btn-primary btn-block" href="/register/">I do not have an account</a>
</div>
</div>
</div>
</body>
</html>
And my problem is that the login form is not too center as I want to as this image shows.
What I want to do is to display like that:
So do you know how to move the whole login form towards the center I tried the bootstrap's d-flex align-items-center justify-content-center class combination and somehow it does center but the flexbox is as height as my login form.
So my guess is on how I can make the flexbox take over the whole remaining height. DO you know how to do that?

You should give height to your container-fluid div in view-port
height: calc(100vh - 60px);
60px is your header height (View in full-screen mode of snippet)
.custom {
height: calc(100vh - 60px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Log in </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="/">
<img src="https://loremimage.com/default/32/32/1" />
Διαχείρηση Μελών ΕΛΛΑΚ Κύπρου
</a>
</nav>
</header>
<div class="custom container-fluid d-flex align-items-center justify-content-center">
<div class="row bg-light border border-primary">
<div class="col mt-5 col-xs-12 col-md-12 col-lg-12">
<h1 style="text-align:center">Log in</h1>
<form action="/login_check" method="post">
<div class="form-group">
<input type="text" class="form-control" id="username" name="_username" value="" placeholder="Username" required="required" />
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" name="_password" placeholder="Password" required="required" />
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" id="remember_me" name="_remember_me" class="form-check-input" />
<label class="form-check-label" for="remember_me" >Remember me</label>
</div>
</div>
<div class="form-row">
<div class="col">
<input type="submit" class="btn btn-primary btn-block" id="_submit" name="_submit" value="Log in" />
</div>
<div class="col">
<a class="btn btn-warning btn-block" href="/resetting/request">I forgot my password</a>
</div>
</div>
</form>
</div>
<div class="col col-xs-12 col-md-12 col-lg-12 mt-1 mb-5">
<a class="btn btn-primary btn-block" href="/register/">I do not have an account</a>
</div>
</div>
</div>
</body>
</html>

Using radio buttons for tab control using bootstrap

I am trying to control tabs with radio buttons to change a content area for a scheduling screen. This works fine other than the radio buttons do not check.
Anyone got any ideas how to fix this?
<div>
<div>
<input id="optDaily" name="intervaltype" checked type="radio" data-target="#scheduleDaily" data-toggle="tab">
<label for="optDaily">Daily</label>
</div>
<div>
<input id="optWeekly" name="intervaltype" type="radio" data-target="#scheduleWeekly" data-toggle="tab">
<label for="optWeekly">Weekly</label>
</div>
<div>
<input id="optMonthly" name="intervaltype" type="radio" data-target="#scheduleMonthly" data-toggle="tab">
<label for="optMonthly">Monthly</label>
</div>
</div>
<div class="tab-content">
<div id="scheduleDaily" class="tab-pane active schedule-pane" >
Daily
</div>
<div id="scheduleWeekly" class="tab-pane schedule-pane" >
Weekly
</div>
<div id="scheduleMonthly" class="tab-pane schedule-pane" >
Montly
</div>
</div>
Here is the example in jsfiddle http://jsfiddle.net/nEWMq/

The radio buttons aren't getting checked because of this code:
e.preventDefault()
To fix this, remove data-toggle="tab" from the radio buttons and then add this jQuery code:
$('input[name="intervaltype"]').click(function () {
$(this).tab('show');
});

Bootstrap 4.3.1 working tabs as radio buttons
$(document).ready(function () {
$('input[name="intervaltype"]').click(function () {
$(this).tab('show');
$(this).removeClass('active');
});
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="nav nav-tabs" role="tablist">
<div>
<input id="optDaily" checked name="intervaltype" type="radio" data-target="#scheduleDaily">
<label for="optDaily">Daily</label>
</div>
<div>
<input id="optWeekly" name="intervaltype" type="radio" data-target="#scheduleWeekly">
<label for="optWeekly">Weekly</label>
</div>
<div>
<input id="optMonthly" name="intervaltype" type="radio" data-target="#scheduleMonthly">
<label for="optMonthly">Monthly</label>
</div>
</div>
<div class="tab-content">
<div id="scheduleDaily" class="tab-pane active">Daily</div>
<div id="scheduleWeekly" class="tab-pane">Weekly</div>
<div id="scheduleMonthly" class="tab-pane">Montly</div>
</div>

Try this works for me
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="container">
<div class="row">
<div class="span12">
<p class="lead">Bare minimum radio button tabs example:</p>
<div id="tab" class="btn-group" data-toggle="buttons">
<a href="#prices" class="btn btn-default active" data-toggle="tab">
<input type="radio" />Prices</a>
<a href="#features" class="btn btn-default" data-toggle="tab">
<input type="radio" />Features</a>
<a href="#requests" class="btn btn-default" data-toggle="tab">
<input type="radio" />Requests</a>
<a href="#contact" class="btn btn-default" data-toggle="tab">
<input type="radio" />Contact</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="prices">Prices content</div>
<div class="tab-pane" id="features">Features Content</div>
<div class="tab-pane" id="requests">Requests Content</div>
<div class="tab-pane" id="contact">Contact Content</div>
</div>
</div>
</div>
</div>