Question: What is a Boostrap?
Bootstrap converts these type of ugly inputs and button to the flashy type of cool inputs and buttons, so that our website looks beautiful.
Bootstrap also helps to take care of all the calculations for styling our borders and frames of the websites, so when we open it on a mobile screen, it auto adjusts and we wont have to go through the hassle of managing it.
Thank You Bootstrap, We Love you for it.
How do I get it into our Website?
You can download bootstrap from the following link;
https://getbootstrap.com/docs/4.3/getting-started/download/
We can use a CDN, but for things to be understandable we are going to host boostrap on our server.
You will have a file .zip
Now we need to copy the files form the bootstrap-4.3.1-dist.zip to our noob_cms folder.
This is what we should have in our noob_cms folder.
How Do I use it?
<head>
<meta charset="UTF-8">
<title>Login</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<style>
.myLoginForm label {
margin-top: 10px;
}
.myLoginForm button {
margin-top: 10px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-4 offset-4">
<form action="" method="POST" class="myLoginForm">
<label>Email Address</label>
<input class="form-control" name="email" type="text" placeholder="Enter Email Address..." />
<label>Password</label>
<input class="form-control" name="pass" type="password" placeholder="Password..." />
<button class="btn btn-success" name="btnLogin">Login</button>
</form>
</div>
</div>
</div>
</body>
So This code has just converted our old login form to the new login form
I have Updated the New Code at the Git, please feel free to look at it
You can get the code from the following Git
th3n00bc0d3r
/
noobcms_login
Noob CMS Login and User Admin Version
noobcms_login
Noob CMS Login and User Admin Version
Top comments (0)