![\"O](\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/11\/bootstrap-logo.png\"){kind=logo}
Quando li tutoriais de como criar cards no Bootstrap e vi exemplos simples, n\u00e3o fiquei muito impressionado ou empolgado; nem dei muita bola. Mas, continue lendo e veja os exemplos que postei abaixo, ver\u00e1 que s\u00e3o fascinantes e belos.<\/p>\n\n\n\n
O que s\u00e3o esses tais de cards ou cart\u00f5es? O que \u00e9 Bootstrap? <\/p>\n\n\n\n
Se voc\u00ea \u00e9 novato em desenvolvimento Web, essas d\u00favidas podem surgir. Mas, irei explicar de forma simples e resumida.<\/p>\n\n\n\n
- \n
- Bootstrap<\/strong> \u00e9 um framework para CSS, um conjunto de coisas prontas. Ao inv\u00e9s de usarmos CSS passo a passo, podemos usar seu framework e pegar coisas que j\u00e1 est\u00e3o prontinhas para estilizar nossa p\u00e1gina.<\/li>\n\n\n\n
- Cards <\/strong>ou cart\u00f5es<\/strong> no Bootstrap s\u00e3o quadradinhos ou ret\u00e2ngulos dentro da nossa p\u00e1gina que podemos usar para exibir informa\u00e7\u00f5es ou conte\u00fado de forma organizada e visualmente atraente. Pode ser usado para mostrar textos, imagens, bot\u00f5es e outros elementos em um formato flex\u00edvel e responsivo.<\/li>\n<\/ul>\n\n\n\n
Dica:<\/strong> veja mais posts sobre bootstrap clicando aqui.<\/a><\/p>\n\n\n\n
Os cart\u00f5es (cards) s\u00e3o flex\u00edveis e responsivos.<\/p>\n\n\n\n
A flexibilidade dos cards <\/strong>possibilita que ele se adapte automaticamente ao tamanho do conte\u00fado dentro dele. Isso permite que o card se ajusta e reorganiza seu layout com base no tamanho da tela ou dispositivo em que est\u00e1 sendo visualizado, garantindo uma experi\u00eancia consistente em diferentes dispositivos e tamanhos de tela.<\/p>\n\n\n\n
Falando da responsividade dos cards<\/strong>, \u00e9 a capacidade de se adaptarem a diferentes tamanhos de tela e dispositivos, garantindo uma boa experi\u00eancia de visualiza\u00e7\u00e3o e intera\u00e7\u00e3o em smartphones, tablets e computadores.<\/p>\n\n\n\n
Exemplos de Cards (cart\u00f5es) no Bootstrap<\/h2>\n\n\n\n
Para termos uma no\u00e7\u00e3o do quanto fascinante cards podem ser, deixando o layout da p\u00e1gina impressionante, veja esses exemplos:<\/p>\n\n\n
\n![\"](\"https:\/\/mdbcdn.b-cdn.net\/docs\/standard\/extended\/card-deck\/assets\/featured.jpg\")
Exemplo 01: Cards (cart\u00f5es) no Bootstrap<\/figcaption><\/figure><\/div>\n\n \n![\"](\"https:\/\/i.ytimg.com\/vi\/oH6xPFytf2E\/maxresdefault.jpg\")
Exemplo 02: Cards (cart\u00f5es) no Bootstrap<\/figcaption><\/figure><\/div>\n\n \n![\"Exemplo](\"https:\/\/cdn.educba.com\/academy\/wp-content\/uploads\/2020\/08\/Bootstrap-4-Cards.jpg\")
Exemplo 03: Cards (cart\u00f5es) no Bootstrap<\/figcaption><\/figure><\/div>\n\n\n Olha esse outro, que \u00f3timo que ficou:<\/p>\n\n\n
\n![\"](\"https:\/\/miro.medium.com\/v2\/resize:fit:1358\/1*X99hnrjGeZtmheWLEqE8eA.png\")
Exemplo 04: Cards (cart\u00f5es) no Bootstrap<\/figcaption><\/figure><\/div>\n\n\n Criando Cards Passo a Passo<\/h2>\n\n\n\n
Antes de tudo, insira os links CNDs do Bootstrap e JQuery entre as tags <head> e <\/head> do seu site.<\/p>\n\n\n\n
<<\/font>head<\/font>><\/font>\n <\/font><<\/font>meta<\/font> <\/font>charset<\/font>=<\/font>"UTF-8"<\/font>><\/font>\n <\/font><<\/font>meta<\/font> <\/font>name<\/font>=<\/font>"viewport"<\/font> <\/font>content<\/font>=<\/font>"width=device-width, initial-scale=1.0"<\/font>><\/font>\n <\/font><<\/font>title<\/font>><\/font>Exemplo<\/font><\/<\/font>title<\/font>><\/font>\n\n <\/font><<\/font>link<\/font> <\/font>href<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/css\/bootstrap.min.css"<\/font> <\/font>rel<\/font>=<\/font>"stylesheet"<\/font>><\/font>\n <\/font><<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/js\/bootstrap.bundle.min.js"<\/font>><\/<\/font>script<\/font>><\/font>\n <\/font><<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.7.1\/jquery.min.js"<\/font>><\/<\/font>script<\/font>><\/font>\n\n\n<\/<\/font>head<\/font>><\/font><\/pre>\n\n\n\n
- Cards <\/strong>ou cart\u00f5es<\/strong> no Bootstrap s\u00e3o quadradinhos ou ret\u00e2ngulos dentro da nossa p\u00e1gina que podemos usar para exibir informa\u00e7\u00f5es ou conte\u00fado de forma organizada e visualmente atraente. Pode ser usado para mostrar textos, imagens, bot\u00f5es e outros elementos em um formato flex\u00edvel e responsivo.<\/li>\n<\/ul>\n\n\n\n
![\"\"\/](\"https:\/\/i.pinimg.com\/736x\/58\/40\/49\/5840496f916fd7e4c6bf4d2c006dceca.jpg\")
<\/figure><\/div>\n\n\n