{"id":7475,"date":"2019-10-25T11:36:03","date_gmt":"2019-10-25T11:36:03","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7475"},"modified":"2019-10-25T11:42:54","modified_gmt":"2019-10-25T11:42:54","slug":"los-grupos-de-listas-en-bootstrap-4","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/","title":{"rendered":"Los grupos de listas en Bootstrap 4"},"content":{"rendered":"

Los grupos de listas son un componente flexible y poderoso para mostrar una serie de contenido en formato listado.<\/p>\n

Suele ser un componente ideal para crear men\u00fas de navegaci\u00f3n, sistemas de pesta\u00f1as, lista de elementos, etc, pero, tambi\u00e9n se puede utilizar para otra multitud de funciones.<\/p>\n

Listas desordenadas<\/h2>\n

El grupo de lista m\u00e1s b\u00e1sico es una lista desordenada con elementos como por ejemplo:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<ul<\/span><\/a> class<\/span>=<\/span>"list-group"<\/span>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Cras justo odio<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Dapibus ac facilisis in<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Morbi leo risus<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Porta ac consectetur ac<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Vestibulum at eros<\/<\/span>li<\/span><\/a>><\/span>\n<\/<\/span>ul<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Obteniendo como resultado:<\/p>\n
\"Lista<\/a><\/p>\n
Mostrar un elemento como activo<\/h3>\n
Puedes agregar la clase .active a un elemento para indicar que se trata de la selecci\u00f3n activa actual.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<ul<\/span><\/a> class<\/span>=<\/span>"list-group"<\/span>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item active"<\/span>><\/span>Cras justo odio<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Dapibus ac facilisis in<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Morbi leo risus<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Porta ac consectetur ac<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Vestibulum at eros<\/<\/span>li<\/span><\/a>><\/span>\n<\/<\/span>ul<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
De esta forma, por defecto, el elemento tiene un fondo azul con las letras en color blanco tal y como puedes ver en la figura siguiente:<\/p>\n
\"Lista<\/a><\/p>\n
Deshabilitar un elemento de la lista<\/h3>\n
Puedes agregar la clase .disabled a un elemento de la lista para que se muestre como deshabilitado.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<ul<\/span><\/a> class<\/span>=<\/span>"list-group"<\/span>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item disabled"<\/span>><\/span>Cras justo odio<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Dapibus ac facilisis in<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Morbi leo risus<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Porta ac consectetur ac<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Vestibulum at eros<\/<\/span>li<\/span><\/a>><\/span>\n<\/<\/span>ul<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
De esta forma, el elemento deshabilitado o desactivado aparece como difuminado o en un color m\u00e1s claro tal y como se muestra en la siguiente figura:<\/p>\n
\"Lista<\/a><\/p>\n
Enlaces o botones<\/h3>\n
Un grupo de lista tambi\u00e9n puede contener enlaces o botones y puede estar encapsulado por un contenedor \u00abdiv\u00bb en vez de un \u00abul\u00bb.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"list-group"<\/span>><\/span>\n    <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> class<\/span>=<\/span>"list-group-item list-group-item-action active"<\/span>><\/span>Cras justo odio<\/<\/span>a<\/span><\/a>><\/span>\n    <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> class<\/span>=<\/span>"list-group-item list-group-item-action"<\/span>><\/span>Dapibus ac facilisis in<\/<\/span>a<\/span><\/a>><\/span>\n    <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> class<\/span>=<\/span>"list-group-item list-group-item-action"<\/span>><\/span>Morbi leo risus<\/<\/span>a<\/span><\/a>><\/span>\n    <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> class<\/span>=<\/span>"list-group-item list-group-item-action"<\/span>><\/span>Porta ac consectetur ac<\/<\/span>a<\/span><\/a>><\/span>\n    <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> class<\/span>=<\/span>"list-group-item list-group-item-action disabled"<\/span>><\/span>Vestibulum at eros<\/<\/span>a<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
De esta forma, puedes hacer clic a cualquier elemento del listado y lo mismo puedes hacer con el elemento <button>, entre otros.<\/p>\n
Eliminar algunos bordes y esquinas redondeadas<\/h3>\n
Puedes agregar .list-group-flush al elemento de la lista de grupo para eliminar algunos bordes y esquinas redondeadas.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<ul<\/span><\/a> class<\/span>=<\/span>"list-group list-group-flush"<\/span>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Cras justo odio<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Dapibus ac facilisis in<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Morbi leo risus<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Porta ac consectetur ac<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Vestibulum at eros<\/<\/span>li<\/span><\/a>><\/span>\n<\/<\/span>ul<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Obteniendo como resultado:<\/p>\n
\"Lista<\/a><\/p>\n
Colores y fondos para los elementos del listado<\/h3>\n
Puedes utilizar las clases contextuales para visualizar elementos de la lista con un fondo y color establecidos.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<ul<\/span><\/a> class<\/span>=<\/span>"list-group"<\/span>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item list-group-item-primary"<\/span>><\/span>This is a primary list group item<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item list-group-item-secondary"<\/span>><\/span>This is a secondary list group item<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item list-group-item-success"<\/span>><\/span>This is a success list group item<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item list-group-item-danger"<\/span>><\/span>This is a danger list group item<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item list-group-item-warning"<\/span>><\/span>This is a warning list group item<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item list-group-item-info"<\/span>><\/span>This is a info list group item<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item list-group-item-light"<\/span>><\/span>This is a light list group item<\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item list-group-item-dark"<\/span>><\/span>This is a dark list group item<\/<\/span>li<\/span><\/a>><\/span>\n<\/<\/span>ul<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Las clases .primary, .secondary, .success, etc son clases ya definidas por Bootstrap<\/strong> que puedes utilizar para tus elementos. Esto te puede ahorrar un rato de CSS<\/strong>.<\/p>\n
\"Fondos<\/a><\/p>\n
Listas de elementos con distintivos<\/h3>\n
Puedes agregar insignias a cualquier elemento del grupo de la lista para mostrar recuentos no le\u00eddos, actividad o cantidad de elementos disponibles.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<ul<\/span><\/a> class<\/span>=<\/span>"list-group"<\/span>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item d-flex justify-content-between align-items-center"<\/span>><\/span>\n        Cras justo odio\n        <span<\/span><\/a> class<\/span>=<\/span>"badge badge-primary badge-pill"<\/span>><\/span>14<\/<\/span>span<\/span><\/a>><\/span>\n    <\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item d-flex justify-content-between align-items-center"<\/span>><\/span>\n        Dapibus ac facilisis in\n        <span<\/span><\/a> class<\/span>=<\/span>"badge badge-primary badge-pill"<\/span>><\/span>2<\/<\/span>span<\/span><\/a>><\/span>\n    <\/<\/span>li<\/span><\/a>><\/span>\n    <li<\/span><\/a> class<\/span>=<\/span>"list-group-item d-flex justify-content-between align-items-center"<\/span>><\/span>\n        Morbi leo risus\n        <span<\/span><\/a> class<\/span>=<\/span>"badge badge-primary badge-pill"<\/span>><\/span>1<\/<\/span>span<\/span><\/a>><\/span>\n    <\/<\/span>li<\/span><\/a>><\/span>\n<\/<\/span>ul<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Este marcado mostrar\u00eda algo como lo siguiente:<\/p>\n
\"Grupo<\/a><\/p>\n
Sistema de pesta\u00f1as con los grupos de listas<\/h3>\n
Agregar un sistema de pesta\u00f1as con los grupos de listas es muy sencillo.<\/p>\n
F\u00edjate en el siguiente c\u00f3digo de marcado:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"col-4"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"list-group"<\/span> id<\/span>=<\/span>"list-tab"<\/span> role=<\/span>"tablist"<\/span>><\/span>\n            <a<\/span><\/a> class<\/span>=<\/span>"list-group-item list-group-item-action active"<\/span> id<\/span>=<\/span>"list-home-list"<\/span> data-toggle=<\/span>"list"<\/span> href<\/span>=<\/span>"#list-home"<\/span> role=<\/span>"tab"<\/span> aria-controls=<\/span>"home"<\/span>><\/span>Home<\/<\/span>a<\/span><\/a>><\/span>\n            <a<\/span><\/a> class<\/span>=<\/span>"list-group-item list-group-item-action"<\/span> id<\/span>=<\/span>"list-profile-list"<\/span> data-toggle=<\/span>"list"<\/span> href<\/span>=<\/span>"#list-profile"<\/span> role=<\/span>"tab"<\/span> aria-controls=<\/span>"profile"<\/span>><\/span>Profile<\/<\/span>a<\/span><\/a>><\/span>\n            <a<\/span><\/a> class<\/span>=<\/span>"list-group-item list-group-item-action"<\/span> id<\/span>=<\/span>"list-messages-list"<\/span> data-toggle=<\/span>"list"<\/span> href<\/span>=<\/span>"#list-messages"<\/span> role=<\/span>"tab"<\/span> aria-controls=<\/span>"messages"<\/span>><\/span>Messages<\/<\/span>a<\/span><\/a>><\/span>\n            <a<\/span><\/a> class<\/span>=<\/span>"list-group-item list-group-item-action"<\/span> id<\/span>=<\/span>"list-settings-list"<\/span> data-toggle=<\/span>"list"<\/span> href<\/span>=<\/span>"#list-settings"<\/span> role=<\/span>"tab"<\/span> aria-controls=<\/span>"settings"<\/span>><\/span>Settings<\/<\/span>a<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"col-8"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"tab-content"<\/span> id<\/span>=<\/span>"nav-tabContent"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"tab-pane fade show active"<\/span> id<\/span>=<\/span>"list-home"<\/span> role=<\/span>"tabpanel"<\/span> aria-labelledby=<\/span>"list-home-list"<\/span>><\/span>Contenido Home<\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"tab-pane fade"<\/span> id<\/span>=<\/span>"list-profile"<\/span> role=<\/span>"tabpanel"<\/span> aria-labelledby=<\/span>"list-profile-list"<\/span>><\/span>Contenido Profile<\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"tab-pane fade"<\/span> id<\/span>=<\/span>"list-messages"<\/span> role=<\/span>"tabpanel"<\/span> aria-labelledby=<\/span>"list-messages-list"<\/span>><\/span>Contenido Messages<\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"tab-pane fade"<\/span> id<\/span>=<\/span>"list-settings"<\/span> role=<\/span>"tabpanel"<\/span> aria-labelledby=<\/span>"list-settings-list"<\/span>><\/span>Contenido Settings<\/<\/span>div<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
He creado una fila que divido en 2 columnas.<\/p>\n
En la primera columna tengo los elementos del grupo de lista y en la segunda columna tengo los contenidos de cada uno de ellos.<\/p>\n
Este sistema de pesta\u00f1as funciona en el ejemplo en funcionamiento porque estoy cargando en la cabecera el JavaScript<\/strong> que aporta la librer\u00eda Bootstrap<\/strong>. Sin el JavaScript<\/strong> cargado no funciona.<\/p>\n
Conclusi\u00f3n<\/h2>\n
Con los grupos de lista de Bootstrap<\/strong> tienes la oportunidad de mostrar con distintos formatos un grupo de elementos que puede ser utilizado para men\u00fas de navegaci\u00f3n, pesta\u00f1as o cualquier otro tipo de lista de elementos que se te pueda ocurrir.<\/p>\n
En definitiva, tambi\u00e9n tienes la posibilidad de agregar cualquier contenido personalizado dentro de los elementos de la lista.<\/p>\n
Por ejemplo, puedes mostrar una lista de noticias con un grupo de lista:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"list-group"<\/span>><\/span>\n    <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> class<\/span>=<\/span>"list-group-item list-group-item-action flex-column align-items-start"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"d-flex w-100 justify-content-between"<\/span>><\/span>\n        <h5<\/span><\/a> class<\/span>=<\/span>"mb-1"<\/span>><\/span>List group item heading<\/<\/span>h5<\/span><\/a>><\/span>\n        <small<\/span><\/a>><\/span>3 days ago<\/<\/span>small<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <p<\/span><\/a> class<\/span>=<\/span>"mb-1"<\/span>><\/span>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<\/<\/span>p<\/span><\/a>><\/span>\n        <small<\/span><\/a>><\/span>Donec id elit non mi porta.<\/<\/span>small<\/span><\/a>><\/span>\n    <\/<\/span>a<\/span><\/a>><\/span>\n    <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> class<\/span>=<\/span>"list-group-item list-group-item-action flex-column align-items-start"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"d-flex w-100 justify-content-between"<\/span>><\/span>\n        <h5<\/span><\/a> class<\/span>=<\/span>"mb-1"<\/span>><\/span>List group item heading<\/<\/span>h5<\/span><\/a>><\/span>\n        <small<\/span><\/a> class<\/span>=<\/span>"text-muted"<\/span>><\/span>3 days ago<\/<\/span>small<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <p<\/span><\/a> class<\/span>=<\/span>"mb-1"<\/span>><\/span>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<\/<\/span>p<\/span><\/a>><\/span>\n        <small<\/span><\/a> class<\/span>=<\/span>"text-muted"<\/span>><\/span>Donec id elit non mi porta.<\/<\/span>small<\/span><\/a>><\/span>\n    <\/<\/span>a<\/span><\/a>><\/span>\n    <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> class<\/span>=<\/span>"list-group-item list-group-item-action flex-column align-items-start"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"d-flex w-100 justify-content-between"<\/span>><\/span>\n        <h5<\/span><\/a> class<\/span>=<\/span>"mb-1"<\/span>><\/span>List group item heading<\/<\/span>h5<\/span><\/a>><\/span>\n        <small<\/span><\/a> class<\/span>=<\/span>"text-muted"<\/span>><\/span>3 days ago<\/<\/span>small<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <p<\/span><\/a> class<\/span>=<\/span>"mb-1"<\/span>><\/span>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.<\/<\/span>p<\/span><\/a>><\/span>\n        <small<\/span><\/a> class<\/span>=<\/span>"text-muted"<\/span>><\/span>Donec id elit non mi porta.<\/<\/span>small<\/span><\/a>><\/span>\n    <\/<\/span>a<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Obteniendo como resultado un aspecto bastante agradable para un listado de noticias en una columna de tu p\u00e1gina web.<\/p>\n
\"Listas<\/a><\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Descubre como crear grupos de listas utilizando Bootstrap. Ideal para men\u00fas de navegaci\u00f3n, sistema de pesta\u00f1as y para listar cualquier contenido personalizado.<\/p>\n","protected":false},"author":1,"featured_media":7484,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[163],"class_list":["post-7475","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-bootstrap"],"yoast_head":"\nLos grupos de listas en Bootstrap 4 - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Descubre como crear grupos de listas utilizando Bootstrap. Ideal para men\u00fas de navegaci\u00f3n, sistema de pesta\u00f1as y para listar cualquier contenido personalizado.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Los grupos de listas en Bootstrap 4 - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Descubre como crear grupos de listas utilizando Bootstrap. Ideal para men\u00fas de navegaci\u00f3n, sistema de pesta\u00f1as y para listar cualquier contenido personalizado.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-25T11:36:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-10-25T11:42:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/10\/grupos-de-listas-bootstrap-4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/\",\"name\":\"Los grupos de listas en Bootstrap 4 - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/10\/grupos-de-listas-bootstrap-4.png\",\"datePublished\":\"2019-10-25T11:36:03+00:00\",\"dateModified\":\"2019-10-25T11:42:54+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Descubre como crear grupos de listas utilizando Bootstrap. Ideal para men\u00fas de navegaci\u00f3n, sistema de pesta\u00f1as y para listar cualquier contenido personalizado.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/10\/grupos-de-listas-bootstrap-4.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/10\/grupos-de-listas-bootstrap-4.png\",\"width\":250,\"height\":250,\"caption\":\"Grupos de listas en Bootstrap 4\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Los grupos de listas en Bootstrap 4\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Los grupos de listas en Bootstrap 4 - Jose Aguilar Blog","description":"Descubre como crear grupos de listas utilizando Bootstrap. Ideal para men\u00fas de navegaci\u00f3n, sistema de pesta\u00f1as y para listar cualquier contenido personalizado.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Los grupos de listas en Bootstrap 4 - Jose Aguilar Blog","og_description":"Descubre como crear grupos de listas utilizando Bootstrap. Ideal para men\u00fas de navegaci\u00f3n, sistema de pesta\u00f1as y para listar cualquier contenido personalizado.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2019-10-25T11:36:03+00:00","article_modified_time":"2019-10-25T11:42:54+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/10\/grupos-de-listas-bootstrap-4.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/","url":"https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/","name":"Los grupos de listas en Bootstrap 4 - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/10\/grupos-de-listas-bootstrap-4.png","datePublished":"2019-10-25T11:36:03+00:00","dateModified":"2019-10-25T11:42:54+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Descubre como crear grupos de listas utilizando Bootstrap. Ideal para men\u00fas de navegaci\u00f3n, sistema de pesta\u00f1as y para listar cualquier contenido personalizado.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/10\/grupos-de-listas-bootstrap-4.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/10\/grupos-de-listas-bootstrap-4.png","width":250,"height":250,"caption":"Grupos de listas en Bootstrap 4"},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/los-grupos-de-listas-en-bootstrap-4\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Los grupos de listas en Bootstrap 4"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7475"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7475\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7484"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}