<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 ----------> <section class="newsletter"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="content"> <h2>SUBSCRIBE TO OUR NEWSLETTER</h2> <div class="input-group"> <input type="email" class="form-control" placeholder="Enter your email"> <span class="input-group-btn"> <button class="btn" type="submit">Subscribe Now</button> </span> </div> </div> </div> </div> </div> </section>

.newsletter { padding: 80px 0; background: #19beda; } .newsletter .content { max-width: 650px; margin: 0 auto; text-align: center; position: relative; z-index: 2; } .newsletter .content h2 { color: #243c4f; margin-bottom: 40px; } .newsletter .content .form-control { height: 50px; border-color: #ffffff; border-radius:0; } .newsletter .content.form-control:focus { box-shadow: none; border: 2px solid #243c4f; } .newsletter .content .btn { min-height: 50px; border-radius:0; background: #243c4f; color: #fff; font-weight:600; }