"Quadro"
Bootstrap 3.2.0 Snippet by CEscorcio

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Merriweather:400,700,900' rel='stylesheet' type='text/css'> <link href="Bootstrap/bootstrap.css" rel="stylesheet" type="text/css" /> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="/Content/Bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="jumbotron alerta">Faltam <span>15 dias</span> para o seu serviço expirar</div> <ul> <li class="col-md-1">19 <img src="http://smartkiss.net/assets/int_makt_communication.png"/> Avaliações Pendentes</li> <li class="col-md-1">19 <img src="http://smartkiss.net/assets/int_makt_communication.png"/> Avaliações Pendentes</li> <li class="col-md-1">19 <img src="http://smartkiss.net/assets/int_makt_communication.png"/> Avaliações Pendentes</li> <li class="col-md-1">19 <img src="http://smartkiss.net/assets/int_makt_communication.png"/> Avaliações Pendentes</li> <li class="col-md-1">19 <img src="http://smartkiss.net/assets/int_makt_communication.png"/> Avaliações Pendentes</li> <li class="col-md-1">19 <img src="http://smartkiss.net/assets/int_makt_communication.png"/> Avaliações Pendentes</li> <li class="col-md-1">19 <img src="http://smartkiss.net/assets/int_makt_communication.png"/> Avaliações Pendentes</li> <li class="col-md-1">19 <img src="http://smartkiss.net/assets/int_makt_communication.png"/> Avaliações Pendentes</li> </ul> <div class="col-md-4" style="border:1px solid cyan"> <div class="jumbotron"> <div class="cabecalho bgcolor-one"> <div class="icon"> <div class="icon-clientes"></div> </div> <div>Clientes</div> </div> </div> </div> <div class="panel panel-yellow"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> Panel content </div> </div> </div> <div class="col-md-4" style="border:1px solid red">Perfil</div> <div class="col-md-8" style="border:1px solid yellow">Mapa</div> <div class="col-md-4" style="border:1px solid blue">Visualizações</div> <div class="col-md-5" style="border:1px solid purple">Empresas Qualificadas</div> <div class="col-md-3" style="border:1px solid pink">Empresas Não Qualificadas</div> <div class="col-md-4" style="border:1px solid grey">Tutoriais</div> <div class="col-md-5" style="border:1px solid brown">Ranking</div> <div class="col-md-3" style="border:1px solid aqua">Estado</div> <div class="col-md-4" style="border:1px solid orange">Apoio Cliente</div> </div> </body> </html> <div class="modal img-modal"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-body"> <div class="row"> <div class="col-md-8 modal-image"> <img class="img-responsive " src="http://www.pimart.eu/wp-content/uploads/2014/04/martin-schoeller-george-clooney-portrait-up-close-and-personal.jpeg"> <img class="img-responsive hidden" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg" /> <img class="img-responsive hidden" src="http://www.netflights.com/media/216535/hong%20kong_03_681x298.jpg" /> <a href="" class="img-modal-btn left"><i class="glyphicon glyphicon-chevron-left"></i></a> <a href="" class="img-modal-btn right"><i class="glyphicon glyphicon-chevron-right"></i></a> </div> <div class="col-md-4 modal-meta"> <div class="modal-meta-top"> <button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <div class="img-poster clearfix"> <a href=""><img class="img-circle" src="http://www.localcrimenews.com/wp-content/uploads/2013/07/default-user-icon-profile.png"/></a> <strong><a href="">John Doe</a></strong> <span>12 minutes ago</span> </div> <ul class="img-comment-list"> <li> <div class="comment-img"> <img src="http://lorempixel.com/50/50/people/6"> </div> <div class="comment-text"> <strong><a href="">Jane Doe</a></strong> <p>Hello this is a test comment.</p> <span class="date sub-text">on March 5th, 2014</span> </div> </li> <li> <div class="comment-img"> <img src="http://lorempixel.com/50/50/people/7"> </div> <div class="comment-text"> <strong><a href="">Jane Doe</a></strong> <p>Hello this is a test comment and this comment is particularly very long and it goes on and on and on.</p> <span>on March 5th, 2014</span> </div> </li> <li> <div class="comment-img"> <img src="http://lorempixel.com/50/50/people/9"> </div> <div class="comment-text"> <strong><a href="">Jane Doe</a></strong> <p class="">Hello this is a test comment.</p> <span class="date sub-text">on March 5th, 2014</span> </div> </li> </ul> </div> <div class="modal-meta-bottom"> <input type="text" class="form-control" placeholder="Leave a commment.."/> </div> </div> </div> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div>
ul { text-align:center; list-style: none; } li { float: left; background: #fff; border: 2px solid #e5e3e4; padding: 15px; } .texto { background: #2d3b46 } .alerta { background: #fff; padding: 10px 0px; text-align: center; color: #565656; font-size: 12px; } .alerta span { color: #c9093c; font-size: 14px; font-weight: bold; }

Related: See More

Paper Bootstrap Wizard

Questions / Comments: