How to Create Responsive SMS BOX With Bootstrap

Posted By Awadhesh Kumar | 30-Jun-2015

I have created SMS Box with bootstrap layout. I have given 140 character limit in this box using jquery function after which user can not type further character. This code is also responsive in nature due to bootstrap class and also the example is for the developers who want to handle the word limit in front end without any outside jquery plugin. I have used example of the send SMS and also it could be used for restricting writing summary.

 

 

HTML Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <title>
        SMS box
    </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div style="margin-top:50px;" class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">                    
                    <div class="panel panel-info" >
                        <div class="panel-heading">
                            <div class="panel-title">Send SMS</div>
                        </div>     
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                +91
                                            </span>
                                            <input type="text" class="form-control borderRadius" name="username" value="" placeholder="Enter Your Mobile Number">                                        
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <div class="form-group">
                                        <textarea class="form-control input-sm borderRadius " type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"></textarea>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
                                    <span class="help-block">
                                        <p id="characterlimit" class="help-block ">Left&nbsp;</p>
                                    </span>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6" align="right">
                                    <button class="btn btn-success disabled" id="btnSubmit" name="btnSubmit" type="button">Send SMS</button>                                        
                                </div>
                            </div>
                        </div>                     
                    </div>  
                </div>    
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  </body>
</html>

Jquery Code

Below is the code for the jquery. In which we are using keydown function to read the chapacters each time and on exceeding 140 chracters, we show error message.

 



   
 
Request for Proposal

Recaptcha is required.

Sending message..