Newsletter Subscription Form In Bootstrap 4 -w3hubs.com
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h1 class="text-center m-5">SUBSCRIBE TO OUR NEWSLETTER</h1>
</div>
<section class="bg-dark text-center p-5 mt-4">
<div class="container p-3">
<h3 class="text-white">SUBSCRIBE NOW</h3>
<form action="#" method="Post">
<input type="text" name="text" placeholder="Enter Your Email Id">
<button type="button" class="btn btn-default">Subscribe<i class="fa fa-envelope"></i></button>
</form>
</div>
</section>
<section class="bg-warning text-center p-5 mt-4">
<div class="container p-3">
<h3>SUBSCRIBE NOW</h3>
<form action="#" method="Post">
<input type="text" name="text" placeholder="Enter Your Email Id">
<button type="button" class="btn btn-secondary">Subscribe</button>
</form>
</div>
</section>
<section class="bg-secondary text-center p-5 mt-4">
<div class="container p-3">
<h3>SUBSCRIBE NOW</h3>
<form action="#" method="Post">
<input type="text" name="text" placeholder="Enter Your Email Id">
<button type="button" class="btn btn-success">Subscribe</button>
</form>
</div>
</section>
<section class="bg-danger text-center p-5 mt-4">
<div class="container p-3">
<h3>SUBSCRIBE NOW</h3>
<form action="#" method="Post">
<input type="text" name="text" placeholder="Enter Your Email Id">
<button type="button" class="btn btn-dark">Subscribe</button>
</form>
</div>
</section>
<section class="bg-info text-center p-5 mt-4">
<div class="container p-3">
<h3>SUBSCRIBE NOW</h3>
<form action="#" method="Post">
<input type="text" name="text" placeholder="Enter Your Email Id">
<button type="button" class="btn btn-light">Subscribe</button>
</form>
</div>
</section>
<section class="bg-success text-center p-5 mt-4">
<div class="container p-3">
<h3>SUBSCRIBE NOW</h3>
<form action="#" method="Post">
<input type="text" name="text" placeholder="Enter Your Email Id">
<button type="button" class="btn btn-info">Subscribe</button>
</form>
</div>
</section>
<section class="bg-light text-center p-5 mt-4">
<div class="container p-3">
<h3>SUBSCRIBE NOW</h3>
<form action="#" method="Post">
<input type="text" name="text" placeholder="Enter Your Email Id">
<button type="button" class="btn btn-primary">Subscribe</button>
</form>
</div>
</section>
<section class="bg-primary text-center p-5 mt-4">
<div class="container p-3">
<h3>SUBSCRIBE NOW</h3>
<form action="#" method="Post">
<input type="text" name="text" placeholder="Enter Your Email Id">
<button type="button" class="btn btn-warning" >Subscribe</button>
</form>
</div>
</section>
<footer>
<p>© W3hubs 2018</p>
</footer>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800');
body{
padding: 0;
margin: 0;
font-family: "Open Sans";
}
h1{
text-align: center;
font-size: 36px;
}
h3{
text-align: center;
font-size: 30px;
padding: 20px;
font-weight: 400;
letter-spacing: 1px;
}
input[type=text] {
padding: 12px 20px;
margin: 9px 0;
box-sizing: border-box;
border-radius: 10px;
outline: none;
width: 40%;
height:20%;
boredr:1px solid #7c7b7b;
}
input[type=text]:hover {
border:1px solid #000;
transition: 6s;
}
::placeholder {
color: #000;
opacity: 1;
font-weight: 400;
font-size: 20px;
text-align: center;
}
button{
height: 50px;
padding: 0;
margin: 0;
}
.btn{
border-radius: 30px;
width: 14%;
margin-left: 5px;
font-size: 20px;
}
footer{
background: #000;
text-align: center;
padding: 10px;
}
footer p{
color: #fff;
padding: 10px;
margin: 0;
font-weight: 700;
font-size: 20px;
}
@media(max-width: 992px){
.btn{
width: 20%
}
input[type=text]{
width: 50%;
}
}
@media(max-width: 768px){
.btn{
width: 40%
}
input[type=text]{
width: 90%;
}
}
@media(max-width: 440px){
.btn{
width: 50%;
font-size: 18px;
}
input[type=text]{
width: 100%;
}
h3{
font-size: 22px;
}
}
@media(max-width: 373px){
h3{
font-size: 20px;
font-weight: 600;
}
h1{
font-size: 28px;
font-weight: 400;
}
}
,The author is w3hubs





