<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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-12"> Listado de enlace con icono a la izquierada. Los botones tendran la misma altura en funcion de la altura del mayor de ellos. Los botoes centran el texto verticalmente respecto al icono </div> </div> <div class="row "> <div class="col-md-12"> <ul class="list-group list-unstyled list-icons"> <li> <div class="row no-gutter row-eq"> <a href="listado.html" class="col-md-4 btn col-eq"> <span class="glyphicon glyphicon-envelope"></span> <span>Cursos Ingeniería - Tecnología</span> </a> <a href="listado.html" class="col-md-4 btn col-eq"> <span class="glyphicon glyphicon-search"></span> <span>Cursos Ciencias Sociales y Humanidades</span> </a> <a href="listado.html" class="col-md-4 col-eq btn "> <span class="glyphicon glyphicon-print"></span><span>Cursos Educación - Enseñanza y otro texto que meto para alargar</span> </a> </div> </li> <li> <div class="row no-gutter row-eq"> <a href="listado.html" class="col-md-4 btn col-eq"> <span class="glyphicon glyphicon-envelope"></span> <span>Cursos Ingeniería - Tecnología</span> </a> <a href="listado.html" class="col-md-4 btn col-eq"> <span class="glyphicon glyphicon-search"></span> <span>Cursos Ciencias Sociales y Humanidades</span> </a> <a href="listado.html" class="col-md-4 col-eq btn "> <span class="glyphicon glyphicon-print"></span><span>Cursos Educación - Enseñanza y otro texto que meto para alargar</span> </a> </div> </li> <li> <div class="row no-gutter row-eq"> <a href="listado.html" class="col-md-4 btn col-eq"> <span class="glyphicon glyphicon-envelope"></span> <span>Cursos Ingeniería - Tecnología</span> </a> <a href="listado.html" class="col-md-4 btn col-eq"> <span class="glyphicon glyphicon-search"></span> <span>Cursos Ciencias Sociales y Humanidades</span> </a> <a href="listado.html" class="col-md-4 col-eq btn "> <span class="glyphicon glyphicon-print"></span><span>Cursos Educación - Enseñanza y otro texto que meto para alargar</span> </a> </div> </li> <li> <div class="row no-gutter row-eq"> <a href="listado.html" class="col-md-4 btn col-eq"> <span class="glyphicon glyphicon-envelope"></span> <span>Cursos Ingeniería - Tecnología</span> </a> <a href="listado.html" class="col-md-4 btn col-eq"> <span class="glyphicon glyphicon-search"></span> <span>Cursos Ciencias Sociales y Humanidades</span> </a> <a href="listado.html" class="col-md-4 col-eq btn "> <span class="glyphicon glyphicon-print"></span><span>Cursos Educación - Enseñanza y otro texto que meto para alargar</span> </a> </div> </li> <div id="mascategorias" class="accordion-body collapse"> <li> <div class="row no-gutter row-eq"> <a href="listado.html" class="col-md-4 btn col-eq"> <span class="glyphicon glyphicon-search"></span> <span>Cursos Ciencias Sociales y Humanidades</span> </a> <a href="listado.html" class="col-md-4 btn col-eq"> <span class="glyphicon glyphicon-print"></span> <span>Cursos Ingeniería - Tecnología</span> </a> <a href="listado.html" class="col-md-4 col-eq btn "> <span class="glyphicon glyphicon-envelope"></span> <span>Cursos Educación - Enseñanza</span> </a> </div> </li> <li> <div class="row no-gutter row-eq"> <a href="listado.html" class="col-md-4 btn col-eq"> <span class="glyphicon glyphicon-search"></span> <span>Cursos Ciencias Sociales y Humanidades</span> </a> <a href="listado.html" class="col-md-4 btn col-eq"> <span class="glyphicon glyphicon-print"></span> <span>Cursos Ingeniería - Tecnología</span> </a> <a href="listado.html" class="col-md-4 col-eq btn "> <span class="glyphicon glyphicon-envelope"></span> <span>Cursos Educación - Enseñanza</span> </a> </div> </li> <li> <div class="row no-gutter row-eq"> <a href="listado.html" class="col-md-4 btn col-eq"> <span class="glyphicon glyphicon-search"></span> <span>Cursos Ciencias Sociales y Humanidades</span> </a> <a href="listado.html" class="col-md-4 btn col-eq"> <span class="glyphicon glyphicon-print"></span> <span>Cursos Ingeniería - Tecnología</span> </a> <a href="listado.html" class="col-md-4 col-eq btn "> <span class="glyphicon glyphicon-envelope"></span> <span>Cursos Educación - Enseñanza</span> </a> </div> </li> <li> <div class="row no-gutter row-eq"> <a href="listado.html" class="col-md-4 btn col-eq"> <span class="glyphicon glyphicon-search"></span> <span>Cursos Ciencias Sociales y Humanidades</span> </a> <a href="listado.html" class="col-md-4 btn col-eq"> <span class="glyphicon glyphicon-print"></span> <span>Cursos Ingeniería - Tecnología</span> </a> <a href="listado.html" class="col-md-4 col-eq btn "> <span class="glyphicon glyphicon-envelope"></span> <span>Cursos Educación - Enseñanza</span> </a> </div> </li> <li> <div class="row no-gutter row-eq"> <a href="listado.html" class="col-md-4 btn col-eq"> <span class="glyphicon glyphicon-search"></span> <span>Cursos Ciencias Sociales y Humanidades</span> </a> <a href="listado.html" class="col-md-4 btn col-eq"> <span class="glyphicon glyphicon-print"></span> <span>Cursos Ingeniería - Tecnología</span> </a> <a href="listado.html" class="col-md-4 col-eq btn "> <span class="glyphicon glyphicon-envelope"></span> <span>Cursos Educación - Enseñanza</span> </a> </div> </li> </div> </ul> <a data-toggle="collapse" href="#mascategorias" class="btn btn-sm btn-block btn-outline-naranja hoveranimado hidden-md hidden-lg"><i class="icon-add"></i> VER MÁS</a> </div> </div> </div>

.container{background-color:#cccccc;} /*SAME HEIGHT*/ .row-eq{ display: flex; } .col-eq{ flex: 1; background: #ffffff; margin: 10px; } @media (max-width: 768px) { .row-eq{ display: block; } .col-eq{ flex: unset; } } .list-icons .btn, .list-icons .btn .glyphicon,.list-icons .btn span { -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -kthtml-transition: all 0.2s linear; transition: all 0.2s linear; } .list-icons .btn { display: flex; align-items: center; background-color: #ffffff; margin: 5px; padding: 10px; white-space: inherit; text-align: left; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -kthtml-transition: all 0.2s linear; transition: all 0.2s linear; } @media (max-width: 768px) { .list-icons .btn { margin: 1px; padding: 2px 2px 2px 10px; } } .list-icons .btn:hover{ background-color: #FF7600; } .list-icons .btn:hover .glyphicon{ background-color: #ffffff; color: #FF7600; transform: scale(1.3,1.3); } .list-icons .btn:hover span{ color: #ffffff; } .list-icons .btn span { font-size: 16px; line-height: 15px; color:#000000; } .list-icons .btn .glyphicon { font-size: 18px; background-color: #cccccc; border-radius: 50px; margin-right: 9px; color: #ffffff; padding: 10px; } @media only screen and (min-width: 991px) { .list-icons .collapse { display: block; } }