<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="subscribe-section"> <div class="container"> <div class="row text-center"> <div class="col-md-offset-2 col-md-8 col-sm-12 text-center"> <h2>Subscribe our Newsletter</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin fermentum dolor. Nunc nec augue urna.</p> <div class="subscribe-form"> <form> <input name="subscribe" class=" form-control" placeholder="your mail here" type="text"> <button type="submit" value="submit">submit</button> </form> </div> </div> </div> </div> </div>

.subscribe-section { padding: 40px 0; background-color: #AF0808; } .subscribe-section p { color: #fff; } .subscribe-section h2 { color: #fff; font-size: 30px; font-weight: 700; } .subscribe-form button { margin-top: 10px; right: 0; font-size: 24px; color: #af0808; font-weight: 700; text-transform: capitalize; padding: 0 50px; height: 49px; border: inherit; border-radius: 0px; background-color: #fff; } .subscribe-form .form-control { height: 52px; border: 1px solid #fff; border-radius: 0px; font-size: 16px; color: #fff; background-color: inherit; padding: 0 200px 0 16px; }