{"id":7567,"date":"2020-05-05T17:31:00","date_gmt":"2020-05-05T17:31:00","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7567"},"modified":"2020-05-18T17:24:51","modified_gmt":"2020-05-18T17:24:51","slug":"botones-en-bootstrap-4","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/botones-en-bootstrap-4\/","title":{"rendered":"Botones en Bootstrap 4"},"content":{"rendered":"

En este art\u00edculo vas descubrir los diferentes estilos y usos que puedes dar a los botones utilizando Bootstrap.<\/p>\n

Descubrir\u00e1s todas las clases que se puede utilizar para darle diferentes estilos, colores y tama\u00f1os personalizados ya pre-dise\u00f1ados y preparados para usar.<\/p>\n

Los botones son ideales para permitir realizar acciones al usuario en nuestra p\u00e1gina web. Un bot\u00f3n puede ser un simple bot\u00f3n (que permita ejecutar alguna acci\u00f3n JavaScript), un bot\u00f3n de tipo \u00absubmit\u00bb para enviar un formulario o un enlace.<\/p>\n

El dise\u00f1o que Bootstrap tiene preparado para los botones se puede aplicar indistintamente a los elementos HTML: <button>, <a>, <input>.<\/p>\n

Colores que puedes utilizar para los botones en Bootstrap<\/h2>\n

Bootstrap dispone de 7 colores pre-dise\u00f1ados para que puedas utilizarlos en tus desarrollos web:<\/p>\n

Color primario<\/h3>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-primary"<\/span>><\/span>Primario<\/<\/span>button<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Color secundario<\/h3>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-secondary"<\/span>><\/span>Secundario<\/<\/span>button<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Color de \u00e9xito<\/h3>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-success"<\/span>><\/span>\u00c9xito<\/<\/span>button<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Color informativo<\/h3>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-info"<\/span>><\/span>Informaci\u00f3n<\/<\/span>button<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Color de advertencia<\/h3>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-warning"<\/span>><\/span>Advertencia<\/<\/span>button<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Color de peligro<\/h3>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-danger"<\/span>><\/span>Peligro<\/<\/span>button<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Color oscuro<\/h3>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-dark"<\/span>><\/span>Oscuro<\/<\/span>button<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Color claro<\/h3>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<<\/span>button type=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-light"<\/span>><\/span>Claro<\/<\/span>button><\/span><\/pre><\/div><\/div>\n
Botones con el estilo inverso<\/h3>\n
En este caso, Bootstrap tiene otra clase que permite agregar botones sin fondo y con un borde del color pre-dise\u00f1ado. Usa la clase .btn-outline-*.<\/p>\n
(*) Color pre-dise\u00f1ado.<\/p>\n
Por ejemplo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-outline-primary"<\/span>><\/span>Primario<\/<\/span>button<\/span><\/a>><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-outline-secondary"<\/span>><\/span>Secundario<\/<\/span>button<\/span><\/a>><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-outline-success"<\/span>><\/span>\u00c9xito<\/<\/span>button<\/span><\/a>><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-outline-info"<\/span>><\/span>Informaci\u00f3n<\/<\/span>button<\/span><\/a>><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-outline-warning"<\/span>><\/span>Advertencia<\/<\/span>button<\/span><\/a>><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-outline-danger"<\/span>><\/span>Peligro<\/<\/span>button<\/span><\/a>><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-outline-link"<\/span>><\/span>Enlace<\/<\/span>button<\/span><\/a>><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-outline-dark"<\/span>><\/span>Oscuro<\/<\/span>button<\/span><\/a>><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-outline-light"<\/span>><\/span>Claro<\/<\/span>button<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Para obtener como resultado:<\/p>\n
\"Botones<\/p>\n
En la siguiente imagen puedes ver como se muestran en pantalla:<\/p>\n
\"Colores<\/p>\n
Todas estas clases se pueden utilizar de forma r\u00e1pida para darle un color y dise\u00f1o a un bot\u00f3n. Si no se adapta a tus necesidades siempre puedes crear tu propia clase, arregl\u00e1rsela al bot\u00f3n y agregarle tus estilos personalizados.<\/p>\n
Tama\u00f1os de los botones<\/h2>\n
Bootstrap tiene 3 tama\u00f1os pre-dise\u00f1ados que pueden ser \u00fatiles en diferentes escenarios.<\/p>\n
Botones largos<\/h3>\n
Usa la clase .btn-lg del siguiente modo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-primary btn-lg"<\/span>><\/span>Primario<\/<\/span>button<\/span><\/a>><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-secondary btn-lg"<\/span>><\/span>Secundario<\/<\/span>button<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Para mostrar los botones con siguiente tama\u00f1o:<\/p>\n
\"Botones<\/p>\n
Botones medianos<\/h3>\n
Los botones medianos son los botones por defecto. Usa la clase .btn-md del siguiente modo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-primary btn-md"<\/span>><\/span>Primario<\/<\/span>button<\/span><\/a>><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-secondary btn-md"<\/span>><\/span>Secundario<\/<\/span>button<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Para mostrar los botones con el siguiente tama\u00f1o:<\/p>\n
\"Botones<\/p>\n
Botones peque\u00f1os<\/h3>\n
Para agregar un bot\u00f3n peque\u00f1o puedes usar la clase .btn-sm del siguiente modo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-primary btn-sm"<\/span>><\/span>Primario<\/<\/span>button<\/span><\/a>><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-secondary btn-sm"<\/span>><\/span>Secundario<\/<\/span>button<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Para mostrar los botones con el siguiente tama\u00f1o:<\/p>\n
\"Botones<\/p>\n
Esto de los tama\u00f1os puede ser ideal para considerar los distintos tama\u00f1os de los botones en los distintos tama\u00f1os de los dispositivos.<\/p>\n
Botones de tipo bloque<\/h2>\n
Con Bootstrap puedes crear botones de tipo bloque para que abarque todo el ancho del elemento primario agregando la clase .btn-block.<\/p>\n
A continuaci\u00f3n, el c\u00f3digo para unos botones largos y de tipo bloque:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-primary btn-lg btn-block"<\/span>><\/span>Primario<\/<\/span>button<\/span><\/a>><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-secondary btn-lg btn-block"<\/span>><\/span>Secundario<\/<\/span>button<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Para conseguir como resultado botones que ocupan todo el ancho del contenedor padre:<\/p>\n
\"Botones<\/p>\n
Botones deshabilitados<\/h2>\n
Para los botones deshabilitados o sin acci\u00f3n, con el atributo \u00abdisabled\u00bb, Bootstrap tambi\u00e9n tiene preparado un dise\u00f1o que los muestra con un aspecto m\u00e1s apagado.<\/p>\n
Por ejemplo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-primary"<\/span> disabled><\/span>Primario<\/<\/span>button<\/span><\/a>><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-secondary"<\/span> disabled><\/span>Secundario<\/<\/span>button<\/span><\/a>><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-success"<\/span> disabled><\/span>\u00c9xito<\/<\/span>button<\/span><\/a>><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-info"<\/span> disabled><\/span>Informaci\u00f3n<\/<\/span>button<\/span><\/a>><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-warning"<\/span> disabled><\/span>Advertencia<\/<\/span>button<\/span><\/a>><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-danger"<\/span> disabled><\/span>Peligro<\/<\/span>button<\/span><\/a>><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-link"<\/span> disabled><\/span>Enlace<\/<\/span>button<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Para obtener como resultado:<\/p>\n
\"Botones<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n
Ver m\u00e1s informaci\u00f3n sobre los botones en Bootstrap 4<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Descubre c\u00f3mo crear y usar botones r\u00e1pidamente usando Bootstrap 4. Colores, tama\u00f1os y distintos usos. Clases CSS que puedes utilizar para los botones.<\/p>\n","protected":false},"author":1,"featured_media":7576,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[163],"class_list":["post-7567","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-bootstrap"],"yoast_head":"\nBotones en Bootstrap 4 - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Descubre c\u00f3mo crear y usar botones r\u00e1pidamente usando Bootstrap 4. Colores, tama\u00f1os y distintos usos. Clases CSS que puedes utilizar para los botones.\" \/>\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=\"Botones en Bootstrap 4 - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Descubre c\u00f3mo crear y usar botones r\u00e1pidamente usando Bootstrap 4. Colores, tama\u00f1os y distintos usos. Clases CSS que puedes utilizar para los botones.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/botones-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=\"2020-05-05T17:31:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-18T17:24:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/05\/botones-en-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=\"5 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\/botones-en-bootstrap-4\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/botones-en-bootstrap-4\/\",\"name\":\"Botones en Bootstrap 4 - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/botones-en-bootstrap-4\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/botones-en-bootstrap-4\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/05\/botones-en-bootstrap-4.png\",\"datePublished\":\"2020-05-05T17:31:00+00:00\",\"dateModified\":\"2020-05-18T17:24:51+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Descubre c\u00f3mo crear y usar botones r\u00e1pidamente usando Bootstrap 4. Colores, tama\u00f1os y distintos usos. Clases CSS que puedes utilizar para los botones.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/botones-en-bootstrap-4\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/botones-en-bootstrap-4\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/botones-en-bootstrap-4\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/05\/botones-en-bootstrap-4.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/05\/botones-en-bootstrap-4.png\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/botones-en-bootstrap-4\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Botones 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":"Botones en Bootstrap 4 - Jose Aguilar Blog","description":"Descubre c\u00f3mo crear y usar botones r\u00e1pidamente usando Bootstrap 4. Colores, tama\u00f1os y distintos usos. Clases CSS que puedes utilizar para los botones.","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":"Botones en Bootstrap 4 - Jose Aguilar Blog","og_description":"Descubre c\u00f3mo crear y usar botones r\u00e1pidamente usando Bootstrap 4. Colores, tama\u00f1os y distintos usos. Clases CSS que puedes utilizar para los botones.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/botones-en-bootstrap-4\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2020-05-05T17:31:00+00:00","article_modified_time":"2020-05-18T17:24:51+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/05\/botones-en-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":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/botones-en-bootstrap-4\/","url":"https:\/\/www.jose-aguilar.com\/blog\/botones-en-bootstrap-4\/","name":"Botones en Bootstrap 4 - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/botones-en-bootstrap-4\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/botones-en-bootstrap-4\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/05\/botones-en-bootstrap-4.png","datePublished":"2020-05-05T17:31:00+00:00","dateModified":"2020-05-18T17:24:51+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Descubre c\u00f3mo crear y usar botones r\u00e1pidamente usando Bootstrap 4. Colores, tama\u00f1os y distintos usos. Clases CSS que puedes utilizar para los botones.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/botones-en-bootstrap-4\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/botones-en-bootstrap-4\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/botones-en-bootstrap-4\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/05\/botones-en-bootstrap-4.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/05\/botones-en-bootstrap-4.png","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/botones-en-bootstrap-4\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Botones 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\/7567","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=7567"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7567\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7576"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}