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