.col-xxl-*<\/strong><\/code> s\u00e3o as classes mais flex\u00edveis, pois permitem definir o tamanho e o espa\u00e7amento da coluna em todos os dispositivos. As outras classes s\u00e3o mais espec\u00edficas e definem o tamanho e o espa\u00e7amento da coluna apenas para dispositivos de um determinado tamanho.<\/p>\n\n\n\nAs classes ainda podem ser combinadas de forma a criar layouts mais din\u00e2micos e flex\u00edveis.<\/p>\n\n\n\n
Outras Classes \u00fateis s\u00e3o:<\/p>\n\n\n\nClasse<\/th> Descri\u00e7\u00e3o<\/th><\/tr> .col-*-offset<\/code><\/td>Coluna que define o espa\u00e7amento entre as colunas. O asterisco (*) pode ser substitu\u00eddo por um n\u00famero de 1 a 12, indicando o n\u00famero de colunas que o elemento deve ser deslocado para a direita.<\/td><\/tr> .justify-content-*<\/code><\/td>Classe que controla o alinhamento horizontal dos elementos da grade. As op\u00e7\u00f5es incluem start<\/code>, center<\/code>, end<\/code>, space-between<\/code>, space-around<\/code>, e stretch<\/code>.<\/td><\/tr>.align-items-*<\/code><\/td>Classe que controla o alinhamento vertical dos elementos da grade. As op\u00e7\u00f5es incluem start<\/code>, center<\/code>, end<\/code>, baseline<\/code>, stretch<\/code>, e stretch-center<\/code>.<\/td><\/tr><\/tbody><\/table>Classes grid do bootstrap<\/figcaption><\/figure>\n\n\n\nExemplos de grades do Bootstrap<\/h2>\n\n\n\n Lembre-se que as grades, ou grids, do Bootstrap servem para criar o layout, a apar\u00eancia da nossa p\u00e1gina. Os exemplos a seguir poder\u00e1 parecer que a grade serve para criarmos tabelas. N\u00e3o! Uso esses exemplos apenas como meio de aprendizagem de forma pr\u00e1tica.<\/p>\n\n\n\n
O sistema de grades do Bootstrap (ou grid) \u00e9 utilizado para criar layouts responsivos, dividindo a p\u00e1gina em colunas e linhas para posicionar os elementos. Para criar tabelas, o Bootstrap possui componentes espec\u00edficos, como a classe “table”.<\/p>\n\n\n\n
Esses s\u00e3o os passos b\u00e1sicos para usarmos grid ou grade:<\/p>\n\n\n\n
\nAntes de tudo, criamos a classe .container<\/strong><\/li>\n\n\n\ndentro do cont\u00eainer criamos uma linha(row<\/strong>)<\/li>\n\n\n\ndentro da row criamos as colunas(col<\/strong>) que desejarmos<\/li>\n<\/ol>\n\n\n\n<\/p>\n\n\n\n
Nas colunas, podemos usar um asterisco * para dizermos que a coluna serve para todos os tamanhos de telas, ou seja, o primeiro asterisco representa todas as responsividades(sm, md, lg, xl or xxl). <\/p>\n\n\n\n
O segundo asterisco quer dizer que essa coluna ocupar\u00e1 todos os 12 espa\u00e7os dispon\u00edveis. Podemos usar um n\u00famero de 1 a 12, tamb\u00e9m.<\/p>\n\n\n\n
div<\/font> <\/font>class<\/font>=<\/font>"col-*-*"<\/font>><\/font> Coluna 1 <\/<\/font>div<\/font>><\/font>\n<\/pre>\n\n\n\nAbaixo defino uma coluna m\u00e9dia(md) que ocupar\u00e1 um espa\u00e7o de 6 colunas. Lembra que podemos colocar um total de 12 colunas. <\/p>\n\n\n\n
<<\/font>div<\/font> <\/font>class<\/font>=<\/font>"col-md-6"<\/font>><\/font> Coluna 1 <\/<\/font>div<\/font>><\/font>\n<\/pre>\n\n\n\nMas, o modo mais flex\u00edvel \u00e9 usar apenas col <\/strong>e deixar o bootstrap gerenciar o tamanho e n\u00famero de colunas.<\/p>\n\n\n\n<<\/font>div<\/font> <\/font>class<\/font>=<\/font>"col"<\/font>><\/font> Coluna 1 <\/<\/font>div<\/font>><\/font><\/pre>\n\n\n\nUsamos<\/p>\n\n\n\n
#1 Duas Colunas<\/h3>\n\n\n\n Agora criei duas colunas dentro de um cont\u00eainer afastado 3 pontos do topo (mt-3) e com borda. O col-6 quer dizer que cada coluna ocupar\u00e1 a metade da largura da linha. Lembre-se que o valor vai de 1 a 12, nesse caso coloquei 6 (col-6):<\/p>\n\n\n\n
<<\/font>div<\/font> <\/font>class<\/font>=<\/font>"container mt-3"<\/font>><\/font>\n <<\/font>div<\/font> <\/font>class<\/font>=<\/font>"row"<\/font>><\/font>\n <<\/font>div<\/font> <\/font>class<\/font>=<\/font>"col-6 border"<\/font>><\/font>\n Coluna 1\n <\/<\/font>div<\/font>><\/font>\n <<\/font>div<\/font> <\/font>class<\/font>=<\/font>"col-6 border"<\/font>><\/font>\n Coluna 2\n <<\/font><\/span>\/<\/font>div<\/font>><\/font><\/span>\n <\/<\/font>div<\/font>><\/font>\n<\/<\/font>div<\/font>><\/font><\/pre>\n\n\n\nSe na coluna 1 tivesse colocado col-7 a coluna 2 desceria. <\/p>\n\n\n\n
Podemos usar offset-4 para deslocar 4 colunas para a direita<\/p>\n\n\n\n
<<\/font>div<\/font> <\/font>class<\/font>=<\/font>"container mt-3"<\/font>><\/font>\n<<\/font>div<\/font> <\/font>class<\/font>=<\/font>"row"<\/font>><\/font>\n <<\/font>div<\/font> <\/font>class<\/font>=<\/font>"col-6 offset-4 border"<\/font>><\/font>\n Coluna 1\n <\/<\/font>div<\/font>><\/font>\n <<\/font>div<\/font> <\/font>class<\/font>=<\/font>"col-6 border"<\/font>><\/font>\n Coluna 2\n <\/<\/font>div<\/font>><\/font>\n <\/<\/font>div<\/font>><\/font>\n<\/<\/font>div<\/font>><\/font>\n<\/pre>\n\n\n\nPodemos criar um layout com duas colunas para dispositivos pequenos (col-sm)<\/p>\n\n\n\n
<<\/font>div<\/font> <\/font>class<\/font>=<\/font>"container mt-3"<\/font>><\/font>\n<<\/font>div<\/font> <\/font>class<\/font>=<\/font>"row"<\/font>><\/font>\n <<\/font>div<\/font> <\/font>class<\/font>=<\/font>"col-sm-6 border"<\/font>><\/font>\n Coluna 1\n <\/<\/font>div<\/font>><\/font>\n <<\/font>div<\/font> <\/font>class<\/font>=<\/font>"col-sm-6 border"<\/font>><\/font>\n Coluna 2\n <\/<\/font>div<\/font>><\/font>\n <\/<\/font>div<\/font>><\/font>\n<\/<\/font>div<\/font>><\/font>\n<\/pre>\n\n\n\n#2 layout Bootstrap com coluna \u00e0 esquerda, cabe\u00e7alho, corpo e rodap\u00e9<\/h3>\n\n\n\n Aqui vai um exemplo mais complexo, um layout Bootstrap com coluna \u00e0 esquerda, cabe\u00e7alho, corpo e rodap\u00e9.<\/p>\n\n\n\n
<<\/font>div<\/font> <\/font>class<\/font>=<\/font>"container-fluid"<\/font>><\/font>\n <<\/font>div<\/font> <\/font>class<\/font>=<\/font>"row"<\/font>><\/font>\n\n <!-- Coluna \u00e0 Esquerda --><\/font>\n <<\/font>div<\/font> <\/font>class<\/font>=<\/font>"col-md-3 bg-info"<\/font>><\/font>\n <<\/font>h2<\/font>><\/font>Coluna \u00e0 Esquerda<\/font><\/<\/font>h2<\/font>><\/font>\n <!-- Adicione conte\u00fado adicional aqui --><\/font>\n <\/<\/font>div<\/font>
![\"Sistema](\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/11\/bootstrap-logo.png\"){kind=logo}