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:
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Bulma Tutorial</title>
<section class="section">
<div class="columns">
<div class="column is-4 is-offset-4">
<div class="field">
<div class="control">
</div>
</div>
<div class="field">
<div class="control has-icons-left has-icons-right">
<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">
<div class="control has-icons-left has-icons-right">
<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">
<div class="control">
</div>
</div>
<div class="field">
<div class="control">
<div class="select">
</div>
</div>
</div>
<div class="field">
<div class="control">
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Submit</button>
</div>
</div>
</div>
</div>
</section>
|
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-