<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="alert" role="alert"> <p>Well done! You successfully read this important alert message.</p> <div class="panel panel-primary"> <div class="panel-heading"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> Texto cabecera </div> <div class="panel-body"> <div class="col-md-3"> <strong>Acuerdo</strong> <span>Lorem ipsum dolor...</span> </div><!-- .col-md-3 --> <div class="col-md-3"> <strong>Fecha</strong> <span>2014-12-27</span> </div><!-- .col-md-3 --> <div class="clearfix"></div> <div class="col-md-6"> <strong>Cliente</strong> <span>LA12345678 - Nombre super largo de cliente</span> </div><!-- .col-md-6 --> <div class="clearfix"></div> <div class="col-md-6"> <strong>Servicio</strong> <span>14-SERVICIO DE RED PARA CENTRALITAS</span> </div><!-- .col-md-6 --> <div class="clearfix"></div> <div class="col-md-12"> <strong>Concepto</strong> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla id tellus quis convallis. Maecenas ipsum est, porttitor id scelerisque non, interdum quis metus metus.</span> </div><!-- .col-md-12 --> <div class="clearfix"></div> <div class="col-md-12"> <strong>Importe</strong> <span>12345678,90</span> <strong>EUR</strong> </div><!-- .col-md-12 --> <div class="clearfix"></div> <div class="col-md-12"> <strong>Comentarios</strong> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla id tellus quis convallis. Maecenas ipsum est, porttitor id scelerisque non, interdum quis metus metus.</span> </div><!-- .col-md-12 --> <div class="clearfix"></div> <div class="col-md-3"> <div class="input-group form-param"> <span class="input-group-addon">Acuerdo</span> <input id="acuerdo" name="acuerdo" class="form-control" placeholder="acuerdo" type="text" disabled="disabled" value="Lorem ipsum dolor..."> </div><!-- .input-group --> </div><!-- .col-md-3 --> <div class="col-md-3"> <div class="input-group form-param"> <span class="input-group-addon">Fecha</span> <input id="fecha" name="fecha" class="form-control" placeholder="fecha" type="text" disabled="disabled" value="2014-12-27"> </div><!-- .input-group --> </div><!-- .col-md-3 --> <div class="col-md-5"> <div class="input-group form-param"> <span class="input-group-addon">Servicio</span> <input id="servicio" name="servicio" class="form-control" placeholder="servicio" type="text" disabled="disabled" value="14-SERVICIO DE RED PARA CENTRALITAS"> </div><!-- .input-group --> </div><!-- .col-md-5 --> <div class="col-md-11"> <div class="input-group form-param"> <span class="input-group-addon">Concepto</span> <textarea id="concepto" name="concepto" class="form-control" placeholder="concepto" disabled="disabled">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla id tellus quis convallis. Maecenas ipsum est, porttitor id scelerisque non, interdum quis metus metus.</textarea> </div><!-- .input-group --> </div><!-- .col-md-11 --> <div class="col-md-3"> <div class="input-group form-param"> <span class="input-group-addon">Importe</span> <input id="importe" name="importe" class="form-control" placeholder="importe" type="text" disabled="disabled" value="1234567,89"> <span class="input-group-addon" id="eur-addon">EUR</span> </div><!-- .input-group --> </div><!-- .col-md-3 --> <div class="col-md-11"> <div class="input-group form-param"> <span class="input-group-addon">Comentarios</span> <textarea id="comentarios" name="comentarios" class="form-control" placeholder="comentarios" disabled="disabled">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla id tellus quis convallis. Maecenas ipsum est, porttitor id scelerisque non, interdum quis metus metus.</textarea> </div><!-- .input-group --> </div><!-- .col-md-11 --> </div><!-- .panel-body --> <div class="panel-footer"> Texto pie </div> </div><!-- .panel --> </div><!-- .alert --> </div><!-- .container -->

.form-param{ padding : 5px; }