<section class="position-relative py-24 py-xl-40 bg-light">
<div class="container">
<div class="pt-8 pb-32 bg-white rounded">
<div class="d-flex flex-column flex-sm-row mb-16 mb-md-24 px-6 px-md-12 justify-content-end align-items-end align-items-sm-center">
<span class="small text-secondary-dark mb-4 mb-sm-0 me-sm-4">I already have an account</span>
<a class="btn p-0 d-flex align-items-center text-success" href="#">
<span class="me-3">Sign in</span>
<svg width="14" height="11" viewbox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
</svg>
</a>
</div>
<div class="px-6 px-md-16 px-lg-24">
<h2 class="display-5 mb-16">Sign up to Wrexa</h2>
<div class="mw-sm mw-md-none mx-auto px-md-12 px-lg-24">
<form action="#" method="post">
<div class="row mb-12">
<div class="col-12 col-md-6 mb-6 mb-md-0">
<div class="form-floating">
<input class="form-control" type="email" placeholder="[email protected]" value="">
<label for="">Your email</label>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-floating">
<input class="form-control" type="text" placeholder="Your name">
<label for="">Your name</label>
</div>
</div>
</div>
<div class="d-md-flex mb-16 align-items-center">
<a class="d-flex align-items-center text-decoration-none" href="#">
<img class="img-fluid me-6" style="width: 22px;" src="wrexa-assets/logos/brands/google.svg" alt="">
<span class="small text-secondary-dark">Sign Up with Google</span>
</a>
<div class="d-none d-md-block mx-8 bg-secondary" style="width: 1px; height: 12px;"></div>
<div class="d-md-none ms-1 my-8 bg-secondary" style="width: 12px; height: 1px;"></div>
<a class="d-flex align-items-center text-decoration-none" href="#">
<img class="img-fluid me-6" src="wrexa-assets/logos/brands/facebook.svg" alt="">
<span class="small text-secondary-dark">Sign Up with Facebook</span>
</a>
</div>
<div class="text-center">
<button class="btn btn-primary" type="submit">Create Account</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>Framework
Bootstrap
UI Library
Wrexa
Sign in / Sign up Components by Shuffle
Choose from 5 variations of Bootstrap Sign in / Sign up components. Presented here are variants available in Wrexa library.
Get access to all Bootstrap Sign in / Sign up components, code and our visual editor. Try the demo for free!
