Las listas de elementos de Bootstrap son componentes flexibles y poderosos, y que te permitirán mostrar listados formados por elementos complejos.
Lista Básica
La lista de elementos más básica está formada por un listado desordenado de elementos.
Para crear una lista básica, utiliza un elemento <ul> con las clase .list-group, y elementos <li> con la clase .list-group-item
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo Bootstrap - Webdisenia</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="list-group">
<li class="list-group-item">Primer elemento</li>
<li class="list-group-item">Segundo elemento</li>
<li class="list-group-item">Tercer elemento</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador
Listas de elementos con Badges
Puedes añadir badges a la lista de elementos. Los badges se alinearán automáticamente a la derecha del elemento.
Para crear un badge, utiliza un elemento <span> con la clase .badge en el interior del elemento de lista.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo Bootstrap - Webdisenia</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="list-group">
<li class="list-group-item"><span class="badge">12</span> Nuevos</li>
<li class="list-group-item"><span class="badge">5</span> Eliminados</li>
<li class="list-group-item"><span class="badge">3</span> Advertencias</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador
Listas de elementos con enlaces
Para crear una lista de elementos con enlaces, tienes que utilizar un elemento <div> en vez del elemento <ul> y <a> en vez de <li>:
Ejemplo
!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo Bootstrap - Webdisenia</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="list-group">
<a href="#" class="list-group-item active">Primer elemento</a>
<a href="#" class="list-group-item">Segundo elemento</a>
<a href="#" class="list-group-item">Tercer elemento</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador
Elementos desactivados
Para desactivar un elemento de la lista, utiliza la clase .disabled
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo Bootstrap - Webdisenia</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="list-group">
<a href="#" class="list-group-item disabled">Primer elemento</a>
<a href="#" class="list-group-item">Segundo elemento</a>
<a href="#" class="list-group-item">Tercer elemento</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador
Clases contextuales
Puedes colorear los elementos de una lista utilizando las clases: .list-group-item-success, list-group-item-info, list-group-item-warning, y .list-group-item-danger
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ejemplo Bootstrap - Webdisenia</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
Listas de elementos con clases contextuales
<ul class="list-group">
<li class="list-group-item list-group-item-success">Primer elemento</li>
<li class="list-group-item list-group-item-info">Segundo elemento</li>
<li class="list-group-item list-group-item-warning">Tercer elemento</li>
<li class="list-group-item list-group-item-danger">Cuarto elemento</li>
</ul>
Elementos con enlaces y clases contextuales
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Primer elemento</a>
<a href="#" class="list-group-item list-group-item-info">Segundo elemento</a>
<a href="#" class="list-group-item list-group-item-warning">Tercer elemento</a>
<a href="#" class="list-group-item list-group-item-danger">Cuarto elemento</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador
Clases personalizadas
Puedes añadir casi cualquier contenido HTML en una lista de elementos.
Para ello, Bootstrap proporciona las clases: .list-group-item-heading y .list-group-item-text
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ejemplo - Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
List Group Item Text
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
List Group Item Text
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
List Group Item Text
</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador
