DEV Community

Cover image for The Noob CMS: Bootstrap 4
Muhammad
Muhammad

Posted on

The Noob CMS: Bootstrap 4

Question: What is a Boostrap?

Alt Text

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.

Alt Text

You will have a file .zip

Alt Text

Now we need to copy the files form the bootstrap-4.3.1-dist.zip to our noob_cms folder.

Alt Text

This is what we should have in our noob_cms folder.

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

So This code has just converted our old login form to the new login form

Alt Text

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

GitHub logo th3n00bc0d3r / noobcms_login

Noob CMS Login and User Admin Version

noobcms_login

Noob CMS Login and User Admin Version




Noob Index

Top comments (0)