Registration form
Bootstrap 5 Registration form component
Responsive Registration form built with Bootstrap 5. Templates for signup forms, registration popups, register modal designs, registration validation & more.Basic registration form example
This registration form card uses grid functionalities and simple input fields. Check out the validation documentation, to learn how to customize validation messages and types for your registration input fields.
Sign up
<section class="vh-100" style="background-color: #eee;">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-lg-12 col-xl-11">
<div class="card text-black" style="border-radius: 25px;">
<div class="card-body p-md-5">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
<p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Sign up</p>
<form class="mx-1 mx-md-4">
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-user fa-lg me-3 fa-fw"></i>
<div data-mdb-input-init class="form-outline flex-fill mb-0">
<input type="text" id="form3Example1c" class="form-control" />
<label class="form-label" for="form3Example1c">Your Name</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
<div data-mdb-input-init class="form-outline flex-fill mb-0">
<input type="email" id="form3Example3c" class="form-control" />
<label class="form-label" for="form3Example3c">Your Email</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-lock fa-lg me-3 fa-fw"></i>
<div data-mdb-input-init class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4c" class="form-control" />
<label class="form-label" for="form3Example4c">Password</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-key fa-lg me-3 fa-fw"></i>
<div data-mdb-input-init class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4cd" class="form-control" />
<label class="form-label" for="form3Example4cd">Repeat your password</label>
</div>
</div>
<div class="form-check d-flex justify-content-center mb-5">
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example3c" />
<label class="form-check-label" for="form2Example3">
I agree all statements in <a href="#!">Terms of service</a>
</label>
</div>
<div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg">Register</button>
</div>
</form>
</div>
<div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-registration/draw1.webp"
class="img-fluid" alt="Sample image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Registration form with select
Another variation of a simple sign up form. Note that, registration forms are different than login forms, since they are used to create a new account instead of logging into an existing one. They usually contain more input fields as well as different types of input fields to collect extensive data about the user during registration. Selects are one of the most common input types used in registration forms, the example below uses a standard select, input, but you could also consider with a multiselect or a select with custom "other" option input.
Registration Info
<section class="h-100 h-custom" style="background-color: #8fc4b7;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-lg-8 col-xl-6">
<div class="card rounded-3">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-registration/img3.webp"
class="w-100" style="border-top-left-radius: .3rem; border-top-right-radius: .3rem;"
alt="Sample photo">
<div class="card-body p-4 p-md-5">
<h3 class="mb-4 pb-2 pb-md-0 mb-md-5 px-md-2">Registration Info</h3>
<form class="px-md-2">
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="form3Example1q" class="form-control" />
<label class="form-label" for="form3Example1q">Name</label>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div data-mdb-input-init class="form-outline datepicker">
<input type="text" class="form-control" id="exampleDatepicker1" />
<label for="exampleDatepicker1" class="form-label">Select a date</label>
</div>
</div>
<div class="col-md-6 mb-4">
<select data-mdb-select-init>
<option value="1" disabled>Gender</option>
<option value="2">Female</option>
<option value="3">Male</option>
<option value="4">Other</option>
</select>
</div>
</div>
<div class="mb-4">
<select data-mdb-select-init>
<option value="1" disabled>Class</option>
<option value="2">Class 1</option>
<option value="3">Class 2</option>
<option value="4">Class 3</option>
</select>
</div>
<div class="row mb-4 pb-2 pb-md-0 mb-md-5">
<div class="col-md-6">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form3Example1w" class="form-control" />
<label class="form-label" for="form3Example1w">Registration code</label>
</div>
</div>
</div>
<button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-success btn-lg mb-1">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
@media (min-width: 1025px) {
.h-custom {
height: 100vh !important;
}
}
Registration form with radio buttons
This example utilizes the radio button component for the selection of gender.
Registration Form
<section class="vh-100 gradient-custom">
<div class="container py-5 h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12 col-lg-9 col-xl-7">
<div class="card shadow-2-strong card-registration" style="border-radius: 15px;">
<div class="card-body p-4 p-md-5">
<h3 class="mb-4 pb-2 pb-md-0 mb-md-5">Registration Form</h3>
<form>
<div class="row">
<div class="col-md-6 mb-4">
<div data-mdb-input-init class="form-outline">
<input type="text" id="firstName" class="form-control form-control-lg" />
<label class="form-label" for="firstName">First Name</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div data-mdb-input-init class="form-outline">
<input type="text" id="lastName" class="form-control form-control-lg" />
<label class="form-label" for="lastName">Last Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4 d-flex align-items-center">
<div data-mdb-input-init class="form-outline datepicker w-100">
<input type="text" class="form-control form-control-lg" id="birthdayDate" />
<label for="birthdayDate" class="form-label">Birthday</label>
</div>
</div>
<div class="col-md-6 mb-4">
<h6 class="mb-2 pb-1">Gender: </h6>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="femaleGender"
value="option1" checked />
<label class="form-check-label" for="femaleGender">Female</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="maleGender"
value="option2" />
<label class="form-check-label" for="maleGender">Male</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="otherGender"
value="option3" />
<label class="form-check-label" for="otherGender">Other</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4 pb-2">
<div data-mdb-input-init class="form-outline">
<input type="email" id="emailAddress" class="form-control form-control-lg" />
<label class="form-label" for="emailAddress">Email</label>
</div>
</div>
<div class="col-md-6 mb-4 pb-2">
<div data-mdb-input-init class="form-outline">
<input type="tel" id="phoneNumber" class="form-control form-control-lg" />
<label class="form-label" for="phoneNumber">Phone Number</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<select class="select form-control-lg">
<option value="1" disabled>Choose option</option>
<option value="2">Subject 1</option>
<option value="3">Subject 2</option>
<option value="4">Subject 3</option>
</select>
<label class="form-label select-label">Choose option</label>
</div>
</div>
<div class="mt-4 pt-2">
<input data-mdb-ripple-init class="btn btn-primary btn-lg" type="submit" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
.gradient-custom {
/* fallback for old browsers */
background: #f093fb;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to bottom right, rgba(240, 147, 251, 1), rgba(245, 87, 108, 1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to bottom right, rgba(240, 147, 251, 1), rgba(245, 87, 108, 1))
}
.card-registration .select-input.form-control[readonly]:not([disabled]) {
font-size: 1rem;
line-height: 2.15;
padding-left: .75em;
padding-right: .75em;
}
.card-registration .select-arrow {
top: 13px;
}
Full page registration template
If you need to add more input fields to your form, you should consider making it fullpage. We also recommend to add a "reset all" button in such cases to make it easy to clear all of the fields at once. Full page registration is commonly used in combination with credit card inputs or other payment forms when you need to create a user profile during the checkout process. Instead of making your form fullpage, you can also consider using a stepper component, to spread your inputs over many steps.
Student registration form
Gender:
<section class="h-100 bg-dark">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col">
<div class="card card-registration my-4">
<div class="row g-0">
<div class="col-xl-6 d-none d-xl-block">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-registration/img4.webp"
alt="Sample photo" class="img-fluid"
style="border-top-left-radius: .25rem; border-bottom-left-radius: .25rem;" />
</div>
<div class="col-xl-6">
<div class="card-body p-md-5 text-black">
<h3 class="mb-5 text-uppercase">Student registration form</h3>
<div class="row">
<div class="col-md-6 mb-4">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form3Example1m" class="form-control form-control-lg" />
<label class="form-label" for="form3Example1m">First name</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form3Example1n" class="form-control form-control-lg" />
<label class="form-label" for="form3Example1n">Last name</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form3Example1m1" class="form-control form-control-lg" />
<label class="form-label" for="form3Example1m1">Mother's name</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form3Example1n1" class="form-control form-control-lg" />
<label class="form-label" for="form3Example1n1">Father's name</label>
</div>
</div>
</div>
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="form3Example8" class="form-control form-control-lg" />
<label class="form-label" for="form3Example8">Address</label>
</div>
<div class="d-md-flex justify-content-start align-items-center mb-4 py-2">
<h6 class="mb-0 me-4">Gender: </h6>
<div class="form-check form-check-inline mb-0 me-4">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="femaleGender"
value="option1" />
<label class="form-check-label" for="femaleGender">Female</label>
</div>
<div class="form-check form-check-inline mb-0 me-4">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="maleGender"
value="option2" />
<label class="form-check-label" for="maleGender">Male</label>
</div>
<div class="form-check form-check-inline mb-0">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="otherGender"
value="option3" />
<label class="form-check-label" for="otherGender">Other</label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<select data-mdb-select-init>
<option value="1">State</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
</select>
</div>
<div class="col-md-6 mb-4">
<select data-mdb-select-init>
<option value="1">City</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
</select>
</div>
</div>
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="form3Example9" class="form-control form-control-lg" />
<label class="form-label" for="form3Example9">DOB</label>
</div>
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="form3Example90" class="form-control form-control-lg" />
<label class="form-label" for="form3Example90">Pincode</label>
</div>
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="form3Example99" class="form-control form-control-lg" />
<label class="form-label" for="form3Example99">Course</label>
</div>
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="form3Example97" class="form-control form-control-lg" />
<label class="form-label" for="form3Example97">Email ID</label>
</div>
<div class="d-flex justify-content-end pt-3">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-light btn-lg">Reset all</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-warning btn-lg ms-2">Submit form</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.card-registration .select-input.form-control[readonly]:not([disabled]) {
font-size: 1rem;
line-height: 2.15;
padding-left: .75em;
padding-right: .75em;
}
.card-registration .select-arrow {
top: 13px;
}
Application form with upload
The example below gives the user an option to upload a pdf with their CV using a file input. For more examples and different designs of the file input (i.e. using drag & drop), check out our file upload plugin.
Apply for a job
Full name
Email address
Full name
Upload CV
Upload your CV/Resume or any other relevant file. Max file size 50
MB
<section class="vh-100" style="background-color: #2779e2;">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-xl-9">
<h1 class="text-white mb-4">Apply for a job</h1>
<div class="card" style="border-radius: 15px;">
<div class="card-body">
<div class="row align-items-center pt-4 pb-3">
<div class="col-md-3 ps-5">
<h6 class="mb-0">Full name</h6>
</div>
<div class="col-md-9 pe-5">
<input type="text" class="form-control form-control-lg" />
</div>
</div>
<hr class="mx-n3">
<div class="row align-items-center py-3">
<div class="col-md-3 ps-5">
<h6 class="mb-0">Email address</h6>
</div>
<div class="col-md-9 pe-5">
<input type="email" class="form-control form-control-lg" placeholder="example@example.com" />
</div>
</div>
<hr class="mx-n3">
<div class="row align-items-center py-3">
<div class="col-md-3 ps-5">
<h6 class="mb-0">Full name</h6>
</div>
<div class="col-md-9 pe-5">
<textarea class="form-control" rows="3" placeholder="Message sent to the employer"></textarea>
</div>
</div>
<hr class="mx-n3">
<div class="row align-items-center py-3">
<div class="col-md-3 ps-5">
<h6 class="mb-0">Upload CV</h6>
</div>
<div class="col-md-9 pe-5">
<input class="form-control form-control-lg" id="formFileLg" type="file" />
<div class="small text-muted mt-2">Upload your CV/Resume or any other relevant file. Max file
size 50 MB</div>
</div>
</div>
<hr class="mx-n3">
<div class="px-5 py-4">
<button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg">Send application</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Registration form template with address
The example below contains an extended space dedicated to address forms and a checkbox for accepting "Terms and Conditions".
General Infomation
Contact Details
<section class="h-100 h-custom gradient-custom-2">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12">
<div class="card card-registration card-registration-2" style="border-radius: 15px;">
<div class="card-body p-0">
<div class="row g-0">
<div class="col-lg-6">
<div class="p-5">
<h3 class="fw-normal mb-5" style="color: #4835d4;">General Infomation</h3>
<div class="mb-4 pb-2">
<select data-mdb-select-init>
<option value="1">Title</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
<div class="row">
<div class="col-md-6 mb-4 pb-2">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form3Examplev2" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplev2">First name</label>
</div>
</div>
<div class="col-md-6 mb-4 pb-2">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form3Examplev3" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplev3">Last name</label>
</div>
</div>
</div>
<div class="mb-4 pb-2">
<select data-mdb-select-init>
<option value="1">Position</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
<div class="mb-4 pb-2">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form3Examplev4" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplev4">Position</label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4 pb-2 mb-md-0 pb-md-0">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form3Examplev5" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplev5">Bussines Arena</label>
</div>
</div>
<div class="col-md-6">
<select data-mdb-select-init>
<option value="1">Employees</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-lg-6 bg-indigo text-white">
<div class="p-5">
<h3 class="fw-normal mb-5">Contact Details</h3>
<div class="mb-4 pb-2">
<div data-mdb-input-init class="form-outline form-white">
<input type="text" id="form3Examplea2" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplea2">Street + Nr</label>
</div>
</div>
<div class="mb-4 pb-2">
<div data-mdb-input-init class="form-outline form-white">
<input type="text" id="form3Examplea3" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplea3">Additional Information</label>
</div>
</div>
<div class="row">
<div class="col-md-5 mb-4 pb-2">
<div data-mdb-input-init class="form-outline form-white">
<input type="text" id="form3Examplea4" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplea4">Zip Code</label>
</div>
</div>
<div class="col-md-7 mb-4 pb-2">
<div data-mdb-input-init class="form-outline form-white">
<input type="text" id="form3Examplea5" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplea5">Place</label>
</div>
</div>
</div>
<div class="mb-4 pb-2">
<div data-mdb-input-init class="form-outline form-white">
<input type="text" id="form3Examplea6" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplea6">Country</label>
</div>
</div>
<div class="row">
<div class="col-md-5 mb-4 pb-2">
<div data-mdb-input-init class="form-outline form-white">
<input type="text" id="form3Examplea7" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplea7">Code +</label>
</div>
</div>
<div class="col-md-7 mb-4 pb-2">
<div data-mdb-input-init class="form-outline form-white">
<input type="text" id="form3Examplea8" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplea8">Phone Number</label>
</div>
</div>
</div>
<div class="mb-4">
<div data-mdb-input-init class="form-outline form-white">
<input type="text" id="form3Examplea9" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplea9">Your Email</label>
</div>
</div>
<div class="form-check d-flex justify-content-start mb-4 pb-3">
<input class="form-check-input me-3" type="checkbox" value="" id="form2Example3c" />
<label class="form-check-label text-white" for="form2Example3">
I do accept the <a href="#!" class="text-white"><u>Terms and Conditions</u></a> of your
site.
</label>
</div>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-light btn-lg"
data-mdb-ripple-color="dark">Register</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@media (min-width: 1025px) {
.h-custom {
height: 100vh !important;
}
}
.card-registration .select-input.form-control[readonly]:not([disabled]) {
font-size: 1rem;
line-height: 2.15;
padding-left: .75em;
padding-right: .75em;
}
.card-registration .select-arrow {
top: 13px;
}
.gradient-custom-2 {
/* fallback for old browsers */
background: #a1c4fd;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(161, 196, 253, 1), rgba(194, 233, 251, 1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(161, 196, 253, 1), rgba(194, 233, 251, 1))
}
.bg-indigo {
background-color: #4835d4;
}
@media (min-width: 992px) {
.card-registration-2 .bg-indigo {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
}
@media (max-width: 991px) {
.card-registration-2 .bg-indigo {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
}
Registration modal
This example is a simple registration popup. Check out our modals documentation, to learn how to show the modal, customize modal size and styles.
Create an account
<section class="vh-100 bg-image"
style="background-image: url('https://mdbcdn.b-cdn.net/img/Photos/new-templates/search-box/img4.webp');">
<div class="mask d-flex align-items-center h-100 gradient-custom-3">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-9 col-lg-7 col-xl-6">
<div class="card" style="border-radius: 15px;">
<div class="card-body p-5">
<h2 class="text-uppercase text-center mb-5">Create an account</h2>
<form>
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="form3Example1cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example1cg">Your Name</label>
</div>
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="form3Example3cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example3cg">Your Email</label>
</div>
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="form3Example4cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example4cg">Password</label>
</div>
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="form3Example4cdg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example4cdg">Repeat your password</label>
</div>
<div class="form-check d-flex justify-content-center mb-5">
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example3cg" />
<label class="form-check-label" for="form2Example3g">
I agree all statements in <a href="#!" class="text-body"><u>Terms of service</u></a>
</label>
</div>
<div class="d-flex justify-content-center">
<button type="button" data-mdb-button-init
data-mdb-ripple-init class="btn btn-success btn-block btn-lg gradient-custom-4 text-body">Register</button>
</div>
<p class="text-center text-muted mt-5 mb-0">Have already an account? <a href="#!"
class="fw-bold text-body"><u>Login here</u></a></p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.gradient-custom-3 {
/* fallback for old browsers */
background: #84fab0;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(132, 250, 176, 0.5), rgba(143, 211, 244, 0.5));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(132, 250, 176, 0.5), rgba(143, 211, 244, 0.5))
}
.gradient-custom-4 {
/* fallback for old browsers */
background: #84fab0;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(132, 250, 176, 1), rgba(143, 211, 244, 1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(132, 250, 176, 1), rgba(143, 211, 244, 1))
}
Registration form with PHP or Node.js
Learn how to create a registration form with PHP using a pre-defined backend template for and Admin Dashboard using PHP and Laravel.
PHP registration TutorialLearn how to create a registration form with Node using a pre-defined backend template for and Admin Dashboard using Node.js and Express.js.
Node registration Tutorial