{"id":7456,"date":"2019-09-25T15:54:22","date_gmt":"2019-09-25T15:54:22","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7456"},"modified":"2019-09-25T15:54:22","modified_gmt":"2019-09-25T15:54:22","slug":"alertas-con-bootstrap-4","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/alertas-con-bootstrap-4\/","title":{"rendered":"Las alertas con Bootstrap 4"},"content":{"rendered":"

Las alertas son muy \u00fatiles para mostrar al usuario un mensaje informativo, un suceso correcto, un suceso incorrecto o err\u00f3neo y\/o una alerta entre otros.<\/p>\n

Las alertas proporcionan mensajes textuales, principalmente, para acciones t\u00edpicas del usuario tales como la inserci\u00f3n, modificaci\u00f3n o eliminaci\u00f3n de un registro con un formato o dise\u00f1o espec\u00edfico que lo representa.<\/p>\n

Hay muchas formas y estilos para mostrar este tipo de alertas. Las principales caracter\u00edsticas son el color de fondo y el color del texto que las identifican.<\/p>\n

En este art\u00edculo vas a conocer como crear mensajes de alerta utilizando Bootstrap 4<\/strong>.<\/p>\n

El caso es que Boostrap<\/strong> ya tiene unas clases CSS<\/strong> predefinidas para mostrar r\u00e1pida y f\u00e1cilmente alertas en tu archivo HTML<\/strong>.<\/p>\n

Las alertas con Bootstrap<\/strong> est\u00e1n disponibles para cualquier longitud de texto. No hay l\u00edmite. Adem\u00e1s, tambi\u00e9n se permite agregar dentro contenido HTML<\/strong>.<\/p>\n

Tienes disponible para agregar en tu archivo HTML<\/strong> 8 clases contextuales para las alertas:<\/p>\n

Alerta primaria<\/h3>\n

Las alertas primarias se muestran con un fondo azul claro y con un color azul m\u00e1s oscuro para el texto.<\/p>\n

Para utilizar este tipo de alerta, en tu archivo HTML<\/strong> debes agregar al contenedor del mensaje de alerta las clases \u00abalert alert-primary\u00bb.<\/p>\n

Por ejemplo:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"alert alert-primary"<\/span> role=<\/span>"alert"<\/span>><\/span>\n    Esta es una alerta primaria. Utiliza la clase <strong<\/span><\/a>><\/span>alert alert-primary<\/<\/span>strong<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Obteniendo como resultado:<\/p>\n
\"Alerta<\/a><\/p>\n
Alerta secundaria<\/h3>\n
Las alertas secundarias se muestran con un fondo gris claro y con un color gris un poco m\u00e1s oscuro para el texto.<\/p>\n
Para utilizar este tipo de alerta, en tu archivo HTML<\/strong> debes agregar al contenedor del mensaje de alerta las clases \u00abalert alert-secondary\u00bb.<\/p>\n
Por ejemplo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"alert alert-secondary"<\/span> role=<\/span>"alert"<\/span>><\/span>\n    Esta es una alerta secundaria. Utiliza la clase <strong<\/span><\/a>><\/span>alert alert-secondary<\/<\/span>strong<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Obteniendo como resultado:<\/p>\n
\"Alerta<\/a><\/p>\n
Alerta de \u00e9xito<\/h3>\n
Las alertas de \u00e9xito se muestran con un fondo verde claro y con un color verde un poco m\u00e1s oscuro para el texto.<\/p>\n
Para utilizar este tipo de alerta, en tu archivo HTML<\/strong> debes agregar al contenedor del mensaje de alerta las clases \u00abalert alert-success\u00bb.<\/p>\n
Por ejemplo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"alert alert-success"<\/span> role=<\/span>"alert"<\/span>><\/span>\n    Esta es una alerta de \u00e9xito. Utiliza la clase <strong<\/span><\/a>><\/span>alert alert-success<\/<\/span>strong<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Obteniendo como resultado:<\/p>\n
\"Alerta<\/a><\/p>\n
Yo suelo utilizar mucho este tipo de alertas para informar al usuario de que su acci\u00f3n se ha ejecutado con \u00e9xito, por ejemplo.<\/p>\n
Alerta de peligro<\/h3>\n
Las alertas de peligro se muestran con un fondo rojo claro y con un color rojo un poco m\u00e1s oscuro para el texto.<\/p>\n
Para utilizar este tipo de alerta, en tu archivo HTML<\/strong> debes agregar al contenedor del mensaje de alerta las clases \u00abalert alert-danger\u00bb.<\/p>\n
Por ejemplo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"alert alert-danger"<\/span> role=<\/span>"alert"<\/span>><\/span>\n    Esta es una alerta de peligro. Utiliza la clase <strong<\/span><\/a>><\/span>alert alert-danger<\/<\/span>strong<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Obteniendo como resultado:<\/p>\n
\"Alerta<\/a><\/p>\n
Yo suelo utilizar mucho este tipo de alertas para informar al usuario de que su acci\u00f3n no se ha ejecutado correctamente. Hay alg\u00fan error. Es ideal para mostrar errores al usuarios.<\/p>\n
Alerta de advertencia<\/h3>\n
Las alertas de advertencia se muestran con un fondo amarillo claro y con un color amarillo un poco m\u00e1s oscuro para el texto.<\/p>\n
Para utilizar este tipo de alerta, en tu archivo HTML<\/strong> debes agregar al contenedor del mensaje de alerta las clases \u00abalert alert-danger\u00bb.<\/p>\n
Por ejemplo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"alert alert-warning"<\/span> role=<\/span>"alert"<\/span>><\/span>\n    Esta es una alerta de advertencia. Utiliza la clase <strong<\/span><\/a>><\/span>alert alert-warning<\/<\/span>strong<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Obteniendo como resultado:<\/p>\n
\"Alerta<\/a><\/p>\n
En el ejemplo en funcionamiento puedes ver en directo estos tipos de alertas y algunos m\u00e1s.<\/p>\n
Conclusiones<\/h3>\n
Dentro del contenedor de la alerta, en la mayor\u00eda de casos se agrega texto pero tambi\u00e9n puedes agregar etiquetas HTML<\/strong> de todo tipo.<\/p>\n
Las alertas en Bootstrap<\/strong> tienen un aspecto espec\u00edfico por defecto que ya puede servir para la mayor\u00eda de los casos. No obstante, debes saber que esto puede ser personalizado. Tan solo tienes que sobrescribir la clase que desea cambiar. Si dominas el CSS<\/strong> no te resultar\u00e1 nada dif\u00edcil.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n
Ver m\u00e1s informaci\u00f3n sobre las alertas en Bootstrap 4<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Descubre como agregar alertas al usuario f\u00e1cilmente utlizando Bootstrap. Ideal para mensajes de confirmaci\u00f3n, error, advertencia, etc.<\/p>\n","protected":false},"author":1,"featured_media":7462,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[163],"class_list":["post-7456","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-bootstrap"],"yoast_head":"\nLas alertas con Bootstrap 4 - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Descubre como agregar alertas al usuario f\u00e1cilmente utlizando Bootstrap. Ideal para mensajes de confirmaci\u00f3n, error, advertencia, etc.\" \/>\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=\"Las alertas con Bootstrap 4 - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Descubre como agregar alertas al usuario f\u00e1cilmente utlizando Bootstrap. Ideal para mensajes de confirmaci\u00f3n, error, advertencia, etc.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/alertas-con-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-09-25T15:54:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/09\/bootstrap-alertas.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=\"4 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\/alertas-con-bootstrap-4\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/alertas-con-bootstrap-4\/\",\"name\":\"Las alertas con Bootstrap 4 - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/alertas-con-bootstrap-4\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/alertas-con-bootstrap-4\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/09\/bootstrap-alertas.png\",\"datePublished\":\"2019-09-25T15:54:22+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Descubre como agregar alertas al usuario f\u00e1cilmente utlizando Bootstrap. Ideal para mensajes de confirmaci\u00f3n, error, advertencia, etc.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/alertas-con-bootstrap-4\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/alertas-con-bootstrap-4\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/alertas-con-bootstrap-4\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/09\/bootstrap-alertas.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/09\/bootstrap-alertas.png\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/alertas-con-bootstrap-4\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Las alertas con 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":"Las alertas con Bootstrap 4 - Jose Aguilar Blog","description":"Descubre como agregar alertas al usuario f\u00e1cilmente utlizando Bootstrap. Ideal para mensajes de confirmaci\u00f3n, error, advertencia, etc.","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":"Las alertas con Bootstrap 4 - Jose Aguilar Blog","og_description":"Descubre como agregar alertas al usuario f\u00e1cilmente utlizando Bootstrap. Ideal para mensajes de confirmaci\u00f3n, error, advertencia, etc.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/alertas-con-bootstrap-4\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2019-09-25T15:54:22+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/09\/bootstrap-alertas.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":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/alertas-con-bootstrap-4\/","url":"https:\/\/www.jose-aguilar.com\/blog\/alertas-con-bootstrap-4\/","name":"Las alertas con Bootstrap 4 - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/alertas-con-bootstrap-4\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/alertas-con-bootstrap-4\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/09\/bootstrap-alertas.png","datePublished":"2019-09-25T15:54:22+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Descubre como agregar alertas al usuario f\u00e1cilmente utlizando Bootstrap. Ideal para mensajes de confirmaci\u00f3n, error, advertencia, etc.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/alertas-con-bootstrap-4\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/alertas-con-bootstrap-4\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/alertas-con-bootstrap-4\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/09\/bootstrap-alertas.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/09\/bootstrap-alertas.png","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/alertas-con-bootstrap-4\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Las alertas con 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\/7456","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=7456"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7456\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7462"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}