Bulma Login Page
Bulma Login Page– We can use Bulma Css form controls to create Login Page. It is pretty simple and quick to create login page in Bulma. Here in this article we are going to create simple login template which you can use anywhere. You can also use our online editor to edit and run the code online.
Bulma Login Page | Form | Template | Download Example
Here is simple login form which have two input fields – email and password.
Bulma Login Page Template Example:
<section class="section">
<div class="columns">
<div class="column is-4 is-offset-4">
<div class="field">
<p class="control has-icons-left has-icons-right">
<input class="input" type="email" placeholder="Email">
<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-check"></i>
</span>
</p>
</div>
<div class="field">
<p class="control has-icons-left">
<input class="input" type="password" placeholder="Password">
<span class="icon is-small is-left">
<i class="fa fa-lock"></i>
</span>
</p>
</div>
<div class="field">
<p class="control">
<button class="button is-success">
Login
</button>
</p>
</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-
Advertisements
