Skip to content

Instantly share code, notes, and snippets.

@gabizinha12

gabizinha12/bulma-form.html

Forked from hrmsk66/bulma-form.html
Created July 31, 2020 14:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gabizinha12/9d8e510fd88dc5f3f2248b79b2f8624e to your computer and use it in GitHub Desktop.
Save gabizinha12/9d8e510fd88dc5f3f2248b79b2f8624e to your computer and use it in GitHub Desktop.
Download ZIP
Bulma Simple Form
Raw
bulma-form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
</head>
<body>
<section class="hero is-primary is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns is-5-tablet is-4-desktop is-3-widescreen">
<div class="column">
<form class="box">
<div class="field has-text-centered">
<img src="images/logo.png" width="167">
</div>
<div class="field">
<label class="label">Email</label>
<div class="control has-icons-left">
<input type="email" class="input" placeholder="e.g. hkakehas@cisco.com">
<span class="icon is-small is-left">
<i class="fa fa-envelope"></i>
</span>
</div>
</div>
<div class="field">
<label class="label">Password</label>
<div class="control has-icons-left">
<input type="password" class="input" placeholder="*********" required>
<span class="icon is-small is-left">
<i class="fa fa-lock"></i>
</span>
</div>
</div>
<div class="field">
<label class="checkbox">
<input type="checkbox">
Remember me
</label>
</div>
<div class="field">
<button class="button is-success">
Login
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment