Bootstrap Snippet List with icons equal height vertical aling middle using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>               
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"List with icons equal height vertical aling middle"
Bootstrap 3.0.0 Snippet by joseanmola

Related: See More

Questions / Comments:

"List with icons equal height vertical aling middle" Bootstrap 3.0.0 Snippet by joseanmola

Related: See More

Questions / Comments:

"List with icons equal height vertical aling middle"
Bootstrap 3.0.0 Snippet by joseanmola