Bulma Registration Page
Bulma Registration Page– We can use Bulma Css form controls to create Registration Page. It is very simple to create Registration page in Bulma if you basic idea about Bulma Css Form. Here in this article we are going to create simple Registration template which you can use anywhere. You can also use our online editor to edit and run the code online.
Bulma Registration Page | Form | Template | Download Example
Here is simple Registration form which contains form fields for Registration.
Bulma Login Page Template Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bulma Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="columns">
<div class="column is-4 is-offset-4">
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input" type="text" placeholder="Text input">
</div>
</div>
<div class="field">
<label class="label">Username</label>
<div class="control has-icons-left has-icons-right">
<input class="input is-success" type="text" placeholder="Text input" value="bulma">
<span class="icon is-small is-left">
<i class="fa fa-user"></i>
</span>
<span class="icon is-small is-right">
<i class="fa fa-check"></i>
</span>
</div>
<p class="help is-success">This username is available</p>
</div>
<div class="field">
<label class="label">Email</label>
<div class="control has-icons-left has-icons-right">
<input class="input is-danger" type="email" placeholder="Email input" value="hello@">
<span class="icon is-small is-left">
<i class="fa fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fa fa-warning"></i>
</span>
</div>
<p class="help is-danger">This email is invalid</p>
</div>
<div class="field">
<label class="label">Phone</label>
<div class="control">
<input class="input" type="text" placeholder="Phone Number">
</div>
</div>
<div class="field">
<label class="label">Gender</label>
<div class="control">
<div class="select">
<select>
<option>Select</option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox">
I agree to the <a href="#">terms and conditions</a>
</label>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Submit</button>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
</dfn>
|
We have used column is-4 and is-offset-4 to align center this login form. If you don’t want to align center remove class is-offset-4.
If you run the above example it will produce output something like this-
Advertisements
