<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-10 col-md-offset-1"> <div class="panel panel-default panel-table"> <div class="panel-heading"> <div class="row"> <div class="col col-xs-6"> <h3 class="panel-title">Joined sensors</h3> </div> <div class="col col-xs-6 text-right"> <button type="button" class="btn btn-sm btn-primary btn-create" data-toggle="modal" data-target="#login-modal">Add new sensor</button> </div> </div> </div> <div class="panel-body"> <table class="table table-striped table-bordered table-list"> <thead> <tr> <th class="col-xs-3">EUI</th> <th class="col-xs-3 hidden-xs">APP EUI</th> <th class="col-xs-3">APP KEY</th> <th class="col-xs-3"><span class="glyphicon glyphicon-cog"></span></th> </tr> </thead> <tbody> <tr> <td align=""> A81758FFFE03001E </td> <td class="hidden-xs">000000000000000000000000000000</td> <td>2b7e151628aed2a6abf7158809cf4f3c</td> <td><a href="#" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Delete</a> <a href="#" class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> Edit</a> </td> </tr> </tbody> </table> </div> <div class="panel-footer"> <div class="row"> <div class="col col-xs-4">Page 1 of 5 </div> <div class="col col-xs-8"> <ul class="pagination hidden-xs pull-right"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> <ul class="pagination visible-xs pull-right"> <li><a href="#">«</a></li> <li><a href="#">»</a></li> </ul> </div> </div> </div> <div class="modal fade" id="login-modal" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Add sensor</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="textinput">EUI</label> <div class="col-md-6"> <input id="textinput" name="textinput" placeholder="1234" class="form-control input-md" type="text"> <span class="help-block"> 1234</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="appeui">App EUI</label> <div class="col-md-6"> <input id="appeui" name="appeui" placeholder="0" class="form-control input-md" type="text"> <span class="help-block"> ex:0</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="appkey">App Key</label> <div class="col-md-6"> <input id="appkey" name="appkey" placeholder="2b7e151628aed2a6abf7158809cf4f3c" class="form-control input-md" type="text"> <span class="help-block"> ex:2b7e151628aed2a6abf7158809cf4f3c</span> </div> </div> </fieldset> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div>

body .modal { /* new custom width */ width: 30%; }