max-width<\/td> 100%<\/td> 540px<\/td> 720px<\/td> 960px<\/td> 1140px<\/td> 1320px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n.container-fluid<\/h3>\n\n\n\n .container-fluid<\/strong> sempre pegar\u00e1 toda a largura da tela. A largura \u00e9 sempre 100%.<\/p>\n\n\n\nExemplos de cont\u00eaineres <\/h3>\n\n\n\n Veja alguns c\u00f3digos HTML com Bootstrap e cont\u00eaineres<\/p>\n\n\n\n
<!DOCTYPE html><\/font>\n<<\/font>html<\/font> <\/font>lang<\/font>=<\/font>"en"<\/font>><\/font>\n<<\/font>head<\/font>><\/font>\n <\/font><<\/font>title<\/font>><\/font>Exemplo com Bootstrap<\/font><\/<\/font>title<\/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"<\/font>><\/font>\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>head<\/font>><\/font>\n<<\/font>body<\/font>><\/font>\n\n<<\/font>div<\/font> <\/font>class<\/font>=<\/font>"container"<\/font>><\/font>\n <<\/font>h1<\/font>><\/font>Minha primeira p\u00e1gina Bootstrap com .container<\/font><\/<\/font>h1<\/font>><\/font>\n <<\/font>p<\/font>><\/font>esta parte est\u00e1 dentro de uma classe .container<\/<\/font>p<\/font>><\/font>\n <<\/font>p<\/font>><\/font> A classe .container fornece um cont\u00eainer responsivo de largura fixa.<\/<\/font>p<\/font>><\/font>\n<\/<\/font>div<\/font>><\/font>\n\n<<\/font>div<\/font> <\/font>class<\/font>=<\/font>"container-fluid"<\/font>><\/font>\n <<\/font>h1<\/font>><\/font>Minha primeira p\u00e1gina Bootstrap com .container-fluid <\/font><\/<\/font>h1<\/font>><\/font>\n <<\/font>p<\/font>><\/font>Esta parte est\u00e1 dentro de uma classe .container-fluid.<\/<\/font>p<\/font>><\/font>\n <<\/font>p<\/font>><\/font>A classe .container-fluid fornece um cont\u00eainer de largura total, abrangendo toda a largura do viewport.<\/<\/font>p<\/font>><\/font>\n<\/<\/font>div<\/font>><\/font>\n\n\n<\/<\/font>body<\/font>><\/font>\n<<\/font><\/span>\/<\/font>html<\/font>><\/font><\/span><\/pre>\n\n\n\nDetalhes sobre os Cont\u00eaineres em Bootstrap<\/h2>\n\n\n\n Vimos acima que o Bootstrap traz dois tipos de cont\u00eaineres: .container<\/strong> e .container-fluid<\/strong><\/p>\n\n\n\nAlguns detalhes \u00e0 mais que devemos saber sobre cont\u00eaineres nesse momento \u00e9 padding, borda e responsividade.<\/p>\n\n\n\n
\npadding: <\/strong>\u00e9 um espa\u00e7amento interno aplicado ao redor do conte\u00fado dentro do cont\u00eainer, fornecendo um espa\u00e7o em branco entre o conte\u00fado e as bordas do cont\u00eainer.<\/li>\n\n\n\nborda<\/strong>: \u00e9 a borda (extremidade) do cont\u00eainer. Podemos colocar cores ou escolher qual a espessura da borda.<\/li>\n\n\n\nresponsividade<\/strong>: \u00e9 uma das caracter\u00edsticas principais do framework. Os cont\u00eaineres do Bootstrap s\u00e3o projetados para se adaptarem automaticamente a diferentes tamanhos de tela e dispositivos, como desktops, tablets e smartphones.<\/li>\n<\/ul>\n\n\n\nPadding<\/strong> nos cont\u00eaineres do Bootstrap<\/h3>\n\n\n\nPor padr\u00e3o, os cont\u00eaineres t\u00eam preenchimento esquerdo e direito, sem preenchimento superior ou inferior.<\/p>\n\n\n\n
Exemplo,<\/p>\n\n\n\n
<div class=\"container pt-5\"<\/mark>><\/div><\/code><\/pre>\n\n\n\nAcima, adicionamos um grande padding\/preenchimento na margem superior<\/p>\n\n\n\n
Margem no Bootstrap<\/h3>\n\n\n\n Em Bootstrap, os elementos de margem s\u00e3o definidos usando classes com prefixo “m-” ou “my-“, “mx-“, “mt-“, “mb-“, “ml-“, “mr-“.<\/p>\n\n\n\n
\nm-<\/strong> define a margem em todas as dire\u00e7\u00f5es.<\/li>\n\n\n\nmy-<\/strong> define a margem verticalmente (margem superior e inferior).<\/li>\n\n\n\nmx-<\/strong> define a margem horizontalmente (margem esquerda e direita).<\/li>\n\n\n\nmt-<\/strong> define a margem superior.<\/li>\n\n\n\nmb-<\/strong> define a margem inferior.<\/li>\n\n\n\nml-<\/strong> define a margem esquerda.<\/li>\n\n\n\nmr-<\/strong> define a margem direita.<\/li>\n<\/ul>\n\n\n\nEssas classes podem ser combinadas com valores num\u00e9ricos de 0 a 5 (por exemplo, m-2 para uma margem de tamanho 2) ou com palavras-chave como “auto” para centralizar o elemento horizontalmente.<\/p>\n\n\n\n
Exemplo, um valor de 5 colocar margens em todos os lados(dire\u00e7\u00f5es)<\/p>\n\n\n\n
<div class=\"container m-5<\/strong>\"<\/mark>><\/div><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
Borda do cont\u00eainer no bootstrap<\/h3>\n\n\n\n voc\u00ea pode adicionar bordas a elementos usando classes com prefixo “border” ou “border-0” para remover a borda completamente.<\/p>\n\n\n\n
<div class=\"container m-5 border<\/strong>\"<\/mark>><\/div><\/code><\/pre>\n\n\n\nEm rela\u00e7\u00e3o \u00e0 cores, para definir a cor da borda, voc\u00ea pode usar classes com prefixo “border-“, seguido pelo nome da cor. Por exemplo, “border-primary” define a cor da borda como a cor prim\u00e1ria definida no tema do Bootstrap. Outras op\u00e7\u00f5es de cores incluem “secondary”, “success”, “danger”, “warning”, “info”, “light” e “dark”.<\/p>\n\n\n\n
\nborde-primary<\/li>\n\n\n\n borde-secondary<\/li>\n\n\n\n borde-success<\/li>\n\n\n\n borde-danger<\/li>\n\n\n\n borde-warning<\/li>\n\n\n\n borde-info<\/li>\n\n\n\n borde-light<\/li>\n\n\n\n borde-dark<\/li>\n<\/ul>\n\n\n\nCor de fundo (background ou bg) do cont\u00eainer<\/h3>\n\n\n\n No Bootstrap, a cor de fundo de um cont\u00eainer pode ser definida usando as classes de cor dispon\u00edveis, como “bg-primary”, “bg-secondary”, etc. Al\u00e9m disso, voc\u00ea pode usar classes personalizadas para definir uma cor de fundo espec\u00edfica.<\/p>\n\n\n\n
\nbg-primary: Cor prim\u00e1ria.<\/li>\n\n\n\n bg-secondary: Cor secund\u00e1ria.<\/li>\n\n\n\n bg-success: Cor de sucesso.<\/li>\n\n\n\n bg-danger: Cor de perigo.<\/li>\n\n\n\n bg-warning: Cor de aviso.<\/li>\n\n\n\n bg-info: Cor informativa.<\/li>\n\n\n\n bg-light: Cor clara.<\/li>\n\n\n\n bg-dark: Cor escura.<\/li>\n\n\n\n bg-white: Cor branca.<\/li>\n\n\n\n bg-transparent: Fundo transparente.<\/li>\n<\/ul>\n\n\n\nCor de texto em bootstrap<\/h3>\n\n\n\n Podemos definir a cor do texto usando classes com prefixo “text-” seguido pelo nome da cor desejada.<\/p>\n\n\n\n
<div class=\"container m-5 border<\/strong>-danger text-green\"<\/mark>><\/div><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
Por exemplo, “text-primary” define a cor do texto como a cor prim\u00e1ria definida no tema do Bootstrap. Outras op\u00e7\u00f5es de cores incluem “secondary”, “success”, “danger”, “warning”, “info”, “light” e “dark”. Al\u00e9m disso, voc\u00ea tamb\u00e9m pode usar classes como “text-muted” para definir o texto como uma cor de texto mais suave ou “text-white” para definir o texto como branco.<\/p>\n\n\n\n
\ntext-primary<\/strong>: Define a cor do texto como a cor prim\u00e1ria.<\/li>\n\n\n\ntext-secondary<\/strong>: Define a cor do texto como a cor secund\u00e1ria.<\/li>\n\n\n\ntext-success<\/strong>: Define a cor do texto como verde, indicando sucesso.<\/li>\n\n\n\ntext-danger<\/strong>: Define a cor do texto como vermelho, indicando perigo.<\/li>\n\n\n\ntext-warning<\/strong>: Define a cor do texto como amarelo, indicando aviso.<\/li>\n\n\n\ntext-info<\/strong>: Define a cor do texto como azul claro, para informa\u00e7\u00f5es adicionais.<\/li>\n\n\n\ntext-light<\/strong>: Define a cor do texto como uma tonalidade clara ou branca.<\/li>\n\n\n\ntext-dark<\/strong>: Define a cor do texto como uma tonalidade escura ou preta.<\/li>\n\n\n\ntext-muted<\/strong>: Define o texto com uma cor suave, geralmente um tom de cinza.<\/li>\n\n\n\ntext-white<\/strong>: Define o texto como branco.<\/li>\n<\/ul>\n\n\n\nTamb\u00e9m podemos adicionar opacidade, por exemplo, para adicionar 50% de opacidade para texto em preto ou branco usamos .text-black-50 <\/kbd>ou .text-white-50<\/kbd><\/p>\n\n\n\nResponsividade dos Cont\u00eaineres<\/h2>\n\n\n\n Podemos usar as classes .container-sm|md|lg|xl<\/mark> para configurar como o cont\u00eainer deve responder aos variados tamanhos de telas.<\/p>\n\n\n\nO par\u00e2metro max-width<\/strong> do cont\u00eainer mudar\u00e1 em diferentes tamanhos de tela. Veja:<\/p>\n\n\n\n
![\"Coisas](\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/11\/bootstrap-logo.png\"){kind=logo}
![\"cont\u00eainer](\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/11\/image_2023-11-24_175127082.png\")