"Newsletter Subscription Form In Bootstrap 4 -w3hubs.com"
Bootstrap 4.1.1 Snippet by w3hubs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: