Bulma CSS Login Form Page Example

Bulma CSS Login Form Page Example

06/22 By frontendshape

Hello everyone. In today’s tutorial, we will create a login form page in bulma css. For this section we will create login form page and login page with image.


Bulma CSS Login Page Example

1. Bulma CSS simple login page.

<!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>Bulma CSS Login Page</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    </head>

    <body>
        <div class="hero is-fullheight">
            <div class="hero-body is-justify-content-center is-align-items-center">
                <div class="columns is-flex is-flex-direction-column box">
                    <div class="column">
                        <label for="email">Email</label>
                        <input class="input is-primary" type="text" placeholder="Email address">
                    </div>
                    <div class="column">
                        <label for="Name">Password</label>
                        <input class="input is-primary" type="password" placeholder="Password">
                        <a href="forget.html" class="is-size-7 has-text-primary">forget password?</a>
                    </div>
                    <div class="column">
                        <button class="button is-primary is-fullwidth" type="submit">Login</button>
                    </div>
                    <div class="has-text-centered">
                        <p class="is-size-7"> Don't have an account? <a href="#" class="has-text-primary">Sign up</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
bulma css login page template

bulma css login page template


2. Bulma CSS login page with image.

<!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>Bulma CSS Login Page with image</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    </head>

    <body>
        <div class="container">
            <div class="columns">
                <div class="column is-5">
                    <div class="columns is-flex is-flex-direction-column">
                        <div class="column">
                            <label for="email">Email</label>
                            <input class="input is-primary" type="text" placeholder="Email address">
                        </div>
                        <div class="column">
                            <label for="Name">Password</label>
                            <input class="input is-primary" type="password" placeholder="Password">
                            <a href="forget.html" class="is-size-7 has-text-primary">forget password?</a>
                        </div>
                        <div class="column">
                            <button class="button is-primary is-fullwidth" type="submit">Login</button>
                        </div>
                        <div class="has-text-centered">
                            <p class="is-size-7"> Don't have an account? <a href="#" class="has-text-primary">Sign
                                    up</a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="column is-5">
                    <img src="https://cdn.pixabay.com/photo/2017/02/25/23/51/human-2099066__340.png" alt="bulma login page">
                </div>
            </div>
        </div>
    </body>

</html>
bulma login form with image

bulma login form with image


Read Also

Bulma CSS Responsive Navbar Menu

Bulma CSS 404 Page Examples

Bulma CSS Registration Form Page Example

Enter Your Search Query