<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="container"> <div class="row"> <div class="col-md-4"> <h5>Icon / Input styling when put together</h5> <p class="mt">Twitter (Username Only)</p> <span class="pre-input-icon bg-primary"><i class="fa fa-at"></i></span><input type="text" class="form-control post-icon-input" name="twitterhandle" id="twitterhandle"> </div> </div> </div>

.pre-input-icon{float: left;color: #FFF;padding: .5em;border-top-left-radius: 4px;border-bottom-left-radius: 4px;font-size: 1em; min-width: 30px; text-align: center;} .post-icon-input{border-radius: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; width: 80%; display: inline;}