<section class="py-20">
<div class="container">
<div class="bg-dark rounded px-6 px-lg-24 py-10 py-lg-20">
<div class="row py-5 align-items-center">
<div class="col-12 col-md-7 mb-6 mb-md-0">
<div class="mb-3 mb-lg-0">
<h3 class="mb-4 font-semibold font-heading text-white">Sign up to our newsletter</h3>
<p class="h5 fw-normal text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-12 col-md-5">
<form action="#">
<div class="row align-items-center">
<div class="col-12 col-lg-8 mb-4 mb-lg-0">
<div class="position-relative">
<input class="form-control bg-transparent text-white" type="text" placeholder="e.g [email protected]">
<span class="position-absolute start-0 top-0 ms-3 mt-n2 px-1 bg-dark text-white small">Your email address</span>
</div>
</div>
<div class="col-12 col-lg-4">
<button class="btn btn-info w-100">Sign up</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>Framework
Bootstrap
UI Library
Zeus
Newsletter Components by Shuffle
Choose from 4 variations of Bootstrap Newsletter components. Presented here are variants available in Zeus library.
Get access to all Bootstrap Newsletter components, code and our visual editor. Try the demo for free!
