<section class="position-relative pt-32 pb-36 overflow-hidden" style="background: linear-gradient(98.24deg, #FFFFFF 0%, #F9F9FF 47.4%, #EBECF7 100%)">
<img class="position-absolute top-50 start-0 translate-middle-y" src="gradia-assets/elements/sign-up/radial.svg" alt="">
<div class="position-relative container" style="z-index: 50;">
<div class="row g-16">
<div class="col-12 col-md-6">
<div class="mw-md-lg">
<h2 class="fs-10 mb-3">Join Gradia for free</h2>
<p class="fs-17 text-muted mb-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
</div>
<form class="mw-md-xl">
<div class="row mb-6 g-4">
<div class="col-12 col-md-6">
<div class="form-group">
<input class="bg-white text-dark px-5 py-4 w-100 border rounded-1" id="signUpInput1-1" style="border-radius: 3px;" type="email" placeholder="First name">
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
<input class="bg-white text-dark px-5 py-4 w-100 border rounded-1" id="signUpInput1-2" style="border-radius: 3px;" type="email" placeholder="Last name">
</div>
</div>
<div class="col-12">
<div class="form-group">
<input class="bg-white text-dark px-5 py-4 w-100 border rounded-1" id="signUpInput1-3" style="border-radius: 3px;" type="email" placeholder="Email address">
</div>
</div>
<div class="col-12">
<div class="form-group">
<input class="bg-white text-dark px-5 py-4 w-100 border rounded-1" id="signUpInput1-4" style="border-radius: 3px;" type="email" placeholder="Website">
</div>
</div>
</div>
<div class="form-check mb-8">
<input class="form-check-input" id="signUpInput1-5" type="checkbox" value="">
<label class="fs-19 text-dark form-check-label" for="signUpInput1-5">
<span>I agree to the</span>
<span class="text-secondary">Terms & Conditions</span>
<span>of Gradia</span>
</label>
</div>
<button class="btn btn-light-light fs-20 px-9 py-5 text-uppercase" type="submit" style="letter-spacing: 1px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">Sign up for free</button>
</form>
</div>
<div class="col-12 col-md-6">
<div class="mw-md-lg ms-auto">
<div class="mb-12">
<p class="fs-16 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lacus urna aliquet malesuada gravida viverra vehicula. Elementum, fusce in eu nunc viverra. Diam enim, varius tincidunt orci sed mauris. Eu sed risus tempor lorem.</p>
<div class="row align-items-center g-3">
<div class="col-auto">
<img src="gradia-assets/images/sign-up/elipse3.png" alt="">
</div>
<div class="col">
<h3 class="fs-17 mb-1">Kristin Watson</h3>
<p class="fs-19 text-muted mb-0">Scrum Master</p>
</div>
</div>
</div>
<div>
<p class="fs-16 mb-8">Elementum, fusce in eu nunc viverra. Diam enim, varius tincidunt orci sed mauris. Eu sed risus tempor lorem ipsum.</p>
<div class="row align-items-center g-3">
<div class="col-auto">
<img src="gradia-assets/images/sign-up/elipse4.png" alt="">
</div>
<div class="col">
<h3 class="fs-17 mb-1">Jane Cooper</h3>
<p class="fs-19 text-muted mb-0">Software Tester</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- Alert 85
- Application 53
- Banners 15
- Blog 56
- Call to action 95
- Careers 4
- Contact 38
- Content 59
- Cookies 41
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 43
- Features 132
- Footers 53
- Graphs 18
- HTTP codes 48
- Hero section 91
- How it works 43
- Logo clouds 72
- Modals 3
- Navbar 68
- Navigation (horizontal) 92
- Navigation (vertical) 6
- Newsletter 45
- Portfolio 39
- Pricing 43
- Projects 9
- Reviews 5
- Sign in / Sign up 71
- Stats 76
- Tables 57
- Team 41
- Testimonials 41
- Users 25
Login and registration is a sensitive part of any site. When designing this type of component, one should think very carefully about the amount of data to be obtained, their order and importance. Acquiring new users and maintaining ties with registered users keeps the site alive. That's why Bootstrap Sign in and Sing up components collected in Shuffle Editor are refined to a pixel perfect state. When choosing the right version for your project, you certainly won't run out of options!
Choose from many variations of Bootstrap sign in and sign up components. Presented here are variants available in various UI libraries. You will also find many other types of components that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.
Get access to all Bootstrap sign in/sign up components, code and our editor. Try the demo for free.
