{"id":14745,"date":"2023-12-01T18:20:34","date_gmt":"2023-12-01T21:20:34","guid":{"rendered":"https:\/\/categoriaoutros.com.br\/?p=14745"},"modified":"2023-12-01T18:24:33","modified_gmt":"2023-12-01T21:24:33","slug":"criando-mensagens-de-alerta-com-bootstrap","status":"publish","type":"post","link":"https:\/\/categoriaoutros.com.br\/?p=14745","title":{"rendered":"Criando Mensagens de Alerta com Bootstrap"},"content":{"rendered":"\n<p>Podemos criar mensagens de alertas com Bootstrap. Uma mensagem de alerta \u00e9 importante pois chama a aten\u00e7\u00e3o do usu\u00e1rio para uma informa\u00e7\u00e3o importante, aviso ou erro. <\/p>\n\n\n\n<p>Essa mensagem de alerta \u00e9 uma notifica\u00e7\u00e3o visual exibida em uma p\u00e1gina ou aplicativo para transmitir mensagens relevantes ou cr\u00edticas.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"860\" src=\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/11\/bootstrap-logo.png\" alt=\"Criando Mensagens de Alerta com Bootstrap\" class=\"wp-image-14604\" srcset=\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/11\/bootstrap-logo.png 1024w, https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/11\/bootstrap-logo-300x252.png 300w, https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/11\/bootstrap-logo-768x645.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Criando Mensagens de Alerta com Bootstrap<\/figcaption><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Classes de alerta de mensagens no bootstrap<\/h2>\n\n\n\n<p>Para criar mensagens de alerta com Bootstrap podemos usar a classe &#8220;<strong>.alert<\/strong>&#8221; e suas variantes, como &#8220;alert-success&#8221;, &#8220;alert-danger&#8221;, etc. Al\u00e9m disso, voc\u00ea pode usar a classe &#8220;alert-dismissible&#8221; para adicionar um bot\u00e3o de fechar. Consulte a documenta\u00e7\u00e3o do Bootstrap para obter exemplos e mais detalhes. <\/p>\n\n\n\n<p>As classes de alerta dispon\u00edveis no Bootstrap s\u00e3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>alert<\/strong>: classe base para um alerta.<\/li>\n\n\n\n<li><strong>alert-primary<\/strong>: alerta com cor prim\u00e1ria.<\/li>\n\n\n\n<li><strong>alert-secondary<\/strong>: alerta com cor secund\u00e1ria.<\/li>\n\n\n\n<li><strong>alert-success<\/strong>: alerta com cor de sucesso.<\/li>\n\n\n\n<li><strong>alert-danger<\/strong>: alerta com cor de perigo.<\/li>\n\n\n\n<li><strong>alert-warning<\/strong>: alerta com cor de aviso.<\/li>\n\n\n\n<li><strong>alert-info<\/strong>: alerta com cor de informa\u00e7\u00e3o.<\/li>\n\n\n\n<li><strong>alert-light<\/strong>: alerta com cor clara.<\/li>\n\n\n\n<li><strong>alert-dark<\/strong>: alerta com cor escura.<\/li>\n<\/ul>\n\n\n\n<p>Essas classes podem ser combinadas com a classe <strong>alert-dismissible<\/strong> para adicionar um bot\u00e3o de fechar ao alerta.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Links de alerta no bootstrap<\/h2>\n\n\n\n<p>Podemos usar a classe <strong>.alert-link<\/strong> para para estilizar um link dentro de um componente de alerta. Logicamente que usamos essa classe com a tag de links <strong>&lt;a href=&#8221;#&#8221;>&lt;\/a><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.alert-link<\/strong><\/li>\n<\/ul>\n\n\n\n<pre><font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;alert alert-success alert-dismissible m-5&quot;<\/font><font color=\"#00CDCD\"> &gt;<\/font>\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font><b>Sucesso!<\/b><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font> Isso \u00e9 um alerta com link e bot\u00e3o fechar.<font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">a<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">href<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;#&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font><font color=\"#CD00CD\"><u style=\"text-decoration-style:single\"> ler mais...<\/u><\/font><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">a<\/font><font color=\"#00CDCD\">&gt;<\/font>\n  <font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Bot\u00e3o fechar nas classes de alertas do bootstrap<\/h2>\n\n\n\n<p>Podemos inserir um bot\u00e3o para fechar o alerta. Sim, ao clicarmos no bot\u00e3o o alerta ir\u00e1 desaparecer.<\/p>\n\n\n\n<p>Dentro da div principal insira as classes <strong>.alert <\/strong>e \u00a0<code><strong>.alert-dismissible<\/strong><\/code>. <\/p>\n\n\n\n<p>Em seguida, crie um bot\u00e3o HTML e dentro desse tag coloque as classes <strong>class=&#8221;btn-close&#8221;<\/strong> e <strong>data-bs-dismiss=&#8221;alert&#8221;<\/strong><\/p>\n\n\n\n<pre><font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;alert alert-success alert-dismissible m-5&quot;<\/font><font color=\"#00CDCD\"> &gt;<\/font>\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">button<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">type<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;button&quot;<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;btn-close&quot;<\/font><font color=\"#00CDCD\"> data-bs-dismiss=<\/font><font color=\"#CD0000\">&quot;alert&quot;<\/font><font color=\"#00CDCD\">&gt;&lt;\/<\/font><font color=\"#AF5F00\">button<\/font><font color=\"#00CDCD\">&gt;<\/font>\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font><b>Sucesso!<\/b><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font> Isso \u00e9 um alerta com bot\u00e3o fechar.\n  <font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Anima\u00e7\u00e3o ao fechar mensagens com bootstrap<\/h2>\n\n\n\n<p>Podemos colocar uma anima\u00e7\u00e3o ao clicarmos no bot\u00e3o para fechar o alerta:<\/p>\n\n\n\n<pre><font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;alert alert-primary alert-dismissible fade show   m-5&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">button<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">type<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;button&quot;<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;btn-close&quot;<\/font><font color=\"#00CDCD\"> data-bs-dismiss=<\/font><font color=\"#CD0000\">&quot;alert&quot;<\/font><font color=\"#00CDCD\">&gt;&lt;\/<\/font><font color=\"#AF5F00\">button<\/font><font color=\"#00CDCD\">&gt;<\/font>\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font><b>Alerta!<\/b><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font> Isso \u00e9 um alerta animado com cor prim\u00e1ria.\n  <font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<\/pre>\n\n\n\n<p>Dica: <a href=\"https:\/\/categoriaoutros.com.br\/?s=bootstrap\">Veja outros posts sobre bootstrap clicando aqui.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Praticando mensagens de alerta com bootstrap<\/h2>\n\n\n\n<p>Irei postar as linhas e a seguir a imagem ilustrando o resultado de cada exemplo.<\/p>\n\n\n\n<pre><font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;alert alert-success m-5&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font><b>Sucesso!<\/b><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font> Isso \u00e9 um alerta de sucesso em uma a\u00e7\u00e3o.\n  <font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n\n  <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;alert alert-danger m-5&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font><b>Danger!<\/b><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font> Isso \u00e9 um alerta cr\u00edtico.\n  <font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n  <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;alert alert-info m-5&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font><b>Info!<\/b><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font> Isso \u00e9 um alerta de informativo.\n  <font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n  <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;alert alert-dark m-5&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font><b>Dark!<\/b><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font> Isso \u00e9 um alerta com cor escura.\n  <font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n\n  <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;alert alert-success alert-dismissible m-5&quot;<\/font><font color=\"#00CDCD\"> &gt;<\/font>\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">button<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">type<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;button&quot;<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;btn-close&quot;<\/font><font color=\"#00CDCD\"> data-bs-dismiss=<\/font><font color=\"#CD0000\">&quot;alert&quot;<\/font><font color=\"#00CDCD\">&gt;&lt;\/<\/font><font color=\"#AF5F00\">button<\/font><font color=\"#00CDCD\">&gt;<\/font>\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font><b>Sucesso!<\/b><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font> Isso \u00e9 um alerta com bot\u00e3o fechar.\n  <font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n\n  <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;alert alert-success alert-dismissible m-5&quot;<\/font><font color=\"#00CDCD\"> &gt;<\/font>\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">button<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">type<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;button&quot;<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;btn-close&quot;<\/font><font color=\"#00CDCD\"> data-bs-dismiss=<\/font><font color=\"#CD0000\">&quot;alert&quot;<\/font><font color=\"#00CDCD\">&gt;&lt;\/<\/font><font color=\"#AF5F00\">button<\/font><font color=\"#00CDCD\">&gt;<\/font>\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font><b>Sucesso!<\/b><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font> Isso \u00e9 um alerta com link e bot\u00e3o fechar.<font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">a<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">href<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;#&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font><font color=\"#CD00CD\"><u style=\"text-decoration-style:single\"> ler mais...<\/u><\/font><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">a<\/font><font color=\"#00CDCD\">&gt;<\/font>\n  <font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\">&gt;<\/font>\n\n  <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;alert alert-primary alert-dismissible fade show   m-5&quot;<\/font><font color=\"#00CDCD\">&gt;<\/font>\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">button<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">type<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;button&quot;<\/font><font color=\"#00CDCD\"> <\/font><font color=\"#00CD00\">class<\/font><font color=\"#00CDCD\">=<\/font><font color=\"#CD0000\">&quot;btn-close&quot;<\/font><font color=\"#00CDCD\"> data-bs-dismiss=<\/font><font color=\"#CD0000\">&quot;alert&quot;<\/font><font color=\"#00CDCD\">&gt;&lt;\/<\/font><font color=\"#AF5F00\">button<\/font><font color=\"#00CDCD\">&gt;<\/font>\n        <font color=\"#00CDCD\">&lt;<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font><b>Alerta!<\/b><font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">strong<\/font><font color=\"#00CDCD\">&gt;<\/font> Isso \u00e9 um alerta animado com cor prim\u00e1ria.\n  <font color=\"#00CDCD\">&lt;\/<\/font><font color=\"#AF5F00\">div<\/font><font color=\"#00CDCD\">&gt;<\/font>\n<\/pre>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/i.pinimg.com\/736x\/fd\/20\/25\/fd202526ae9001eac1234c2341566bb3.jpg\" alt=\"\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Podemos criar mensagens de alertas com Bootstrap. Uma mensagem de alerta \u00e9 importante pois chama a aten\u00e7\u00e3o do usu\u00e1rio para uma informa\u00e7\u00e3o importante, aviso ou erro. Essa mensagem de alerta \u00e9 uma notifica\u00e7\u00e3o visual exibida em uma p\u00e1gina ou aplicativo para transmitir mensagens relevantes ou cr\u00edticas. Classes de alerta de mensagens no bootstrap Para criar&#8230;<\/p>\n<p class=\"more-link-wrap\"><a href=\"https:\/\/categoriaoutros.com.br\/?p=14745\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> &ldquo;Criando Mensagens de Alerta com Bootstrap&rdquo;<\/span> &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-14745","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Criando Mensagens de Alerta com Bootstrap - Categoria Outros<\/title>\n<meta name=\"description\" content=\"Podemos criar mensagens de alerta com Bootstrap. Uma mensagem de alerta \u00e9 importante pois chama a aten\u00e7\u00e3o do usu\u00e1rio para uma informa\u00e7\u00e3o importante, aviso ou erro.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/categoriaoutros.com.br\/?p=14745\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Criando Mensagens de Alerta com Bootstrap - Categoria Outros\" \/>\n<meta property=\"og:description\" content=\"Podemos criar mensagens de alerta com Bootstrap. Uma mensagem de alerta \u00e9 importante pois chama a aten\u00e7\u00e3o do usu\u00e1rio para uma informa\u00e7\u00e3o importante, aviso ou erro.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/categoriaoutros.com.br\/?p=14745\" \/>\n<meta property=\"og:site_name\" content=\"Categoria Outros\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/categoriaoutros\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-01T21:20:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T21:24:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/11\/bootstrap-logo.png\" \/>\n<meta name=\"author\" content=\"Categoria: Outros\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CategoriaOutros\" \/>\n<meta name=\"twitter:site\" content=\"@CategoriaOutros\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Categoria: Outros\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=14745#article\",\"isPartOf\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=14745\"},\"author\":{\"name\":\"Categoria: Outros\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40\"},\"headline\":\"Criando Mensagens de Alerta com Bootstrap\",\"datePublished\":\"2023-12-01T21:20:34+00:00\",\"dateModified\":\"2023-12-01T21:24:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=14745\"},\"wordCount\":340,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\"},\"articleSection\":[\"Uncategorized\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/categoriaoutros.com.br\/?p=14745#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=14745\",\"url\":\"https:\/\/categoriaoutros.com.br\/?p=14745\",\"name\":\"Criando Mensagens de Alerta com Bootstrap - Categoria Outros\",\"isPartOf\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#website\"},\"datePublished\":\"2023-12-01T21:20:34+00:00\",\"dateModified\":\"2023-12-01T21:24:33+00:00\",\"description\":\"Podemos criar mensagens de alerta com Bootstrap. Uma mensagem de alerta \u00e9 importante pois chama a aten\u00e7\u00e3o do usu\u00e1rio para uma informa\u00e7\u00e3o importante, aviso ou erro.\",\"breadcrumb\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=14745#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/categoriaoutros.com.br\/?p=14745\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=14745#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/categoriaoutros.com.br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Criando Mensagens de Alerta com Bootstrap\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#website\",\"url\":\"https:\/\/categoriaoutros.com.br\/\",\"name\":\"Categoria Outros\",\"description\":\"Assuntos Diversos\",\"publisher\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/categoriaoutros.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\",\"name\":\"Categoria Outros\",\"alternateName\":\"Categoria Outros\",\"url\":\"https:\/\/categoriaoutros.com.br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg\",\"contentUrl\":\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg\",\"width\":400,\"height\":400,\"caption\":\"Categoria Outros\"},\"image\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/categoriaoutros\",\"https:\/\/twitter.com\/CategoriaOutros\",\"https:\/\/br.pinterest.com\/CategoriaOutros\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40\",\"name\":\"Categoria: Outros\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g\",\"caption\":\"Categoria: Outros\"},\"sameAs\":[\"http:\/\/categoriaoutros.com.br\"],\"url\":\"https:\/\/categoriaoutros.com.br\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Criando Mensagens de Alerta com Bootstrap - Categoria Outros","description":"Podemos criar mensagens de alerta com Bootstrap. Uma mensagem de alerta \u00e9 importante pois chama a aten\u00e7\u00e3o do usu\u00e1rio para uma informa\u00e7\u00e3o importante, aviso ou erro.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/categoriaoutros.com.br\/?p=14745","og_locale":"pt_BR","og_type":"article","og_title":"Criando Mensagens de Alerta com Bootstrap - Categoria Outros","og_description":"Podemos criar mensagens de alerta com Bootstrap. Uma mensagem de alerta \u00e9 importante pois chama a aten\u00e7\u00e3o do usu\u00e1rio para uma informa\u00e7\u00e3o importante, aviso ou erro.","og_url":"https:\/\/categoriaoutros.com.br\/?p=14745","og_site_name":"Categoria Outros","article_publisher":"https:\/\/www.facebook.com\/categoriaoutros","article_published_time":"2023-12-01T21:20:34+00:00","article_modified_time":"2023-12-01T21:24:33+00:00","og_image":[{"url":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/11\/bootstrap-logo.png"}],"author":"Categoria: Outros","twitter_card":"summary_large_image","twitter_creator":"@CategoriaOutros","twitter_site":"@CategoriaOutros","twitter_misc":{"Escrito por":"Categoria: Outros","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/categoriaoutros.com.br\/?p=14745#article","isPartOf":{"@id":"https:\/\/categoriaoutros.com.br\/?p=14745"},"author":{"name":"Categoria: Outros","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40"},"headline":"Criando Mensagens de Alerta com Bootstrap","datePublished":"2023-12-01T21:20:34+00:00","dateModified":"2023-12-01T21:24:33+00:00","mainEntityOfPage":{"@id":"https:\/\/categoriaoutros.com.br\/?p=14745"},"wordCount":340,"commentCount":0,"publisher":{"@id":"https:\/\/categoriaoutros.com.br\/#organization"},"articleSection":["Uncategorized"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/categoriaoutros.com.br\/?p=14745#respond"]}]},{"@type":"WebPage","@id":"https:\/\/categoriaoutros.com.br\/?p=14745","url":"https:\/\/categoriaoutros.com.br\/?p=14745","name":"Criando Mensagens de Alerta com Bootstrap - Categoria Outros","isPartOf":{"@id":"https:\/\/categoriaoutros.com.br\/#website"},"datePublished":"2023-12-01T21:20:34+00:00","dateModified":"2023-12-01T21:24:33+00:00","description":"Podemos criar mensagens de alerta com Bootstrap. Uma mensagem de alerta \u00e9 importante pois chama a aten\u00e7\u00e3o do usu\u00e1rio para uma informa\u00e7\u00e3o importante, aviso ou erro.","breadcrumb":{"@id":"https:\/\/categoriaoutros.com.br\/?p=14745#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/categoriaoutros.com.br\/?p=14745"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/categoriaoutros.com.br\/?p=14745#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/categoriaoutros.com.br\/"},{"@type":"ListItem","position":2,"name":"Criando Mensagens de Alerta com Bootstrap"}]},{"@type":"WebSite","@id":"https:\/\/categoriaoutros.com.br\/#website","url":"https:\/\/categoriaoutros.com.br\/","name":"Categoria Outros","description":"Assuntos Diversos","publisher":{"@id":"https:\/\/categoriaoutros.com.br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/categoriaoutros.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/categoriaoutros.com.br\/#organization","name":"Categoria Outros","alternateName":"Categoria Outros","url":"https:\/\/categoriaoutros.com.br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/","url":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg","contentUrl":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg","width":400,"height":400,"caption":"Categoria Outros"},"image":{"@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/categoriaoutros","https:\/\/twitter.com\/CategoriaOutros","https:\/\/br.pinterest.com\/CategoriaOutros\/"]},{"@type":"Person","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40","name":"Categoria: Outros","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g","caption":"Categoria: Outros"},"sameAs":["http:\/\/categoriaoutros.com.br"],"url":"https:\/\/categoriaoutros.com.br\/?author=1"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/14745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14745"}],"version-history":[{"count":3,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/14745\/revisions"}],"predecessor-version":[{"id":14750,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/14745\/revisions\/14750"}],"wp:attachment":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=14745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=14745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}