Respostas interessantes marcadas com a tag

28 votos
Aceito

Qual a diferença entre col-lg-* , col-md-* e col-sm-* no Bootstrap?

Na própria documentação do Bootstrap há uma tabela comparativa entre as classes de grid. Ou seja, a classe .col-xs-* definem o grid para dispositivos com largura de tela inferior à 768px. A classe ....
Woss's user avatar
  • 76,5mil
20 votos
Aceito

Por que o Bootstrap 4 usa "rem" e "em" no lugar de pixels?

Basicamente é devida a acessibilidade e controle do layout do design system. Usando medidas em REM / EM se o usuário mudar o tamanho da font root ele vai ter uma aumento homogêneo de todo o texto na ...
hugocsl's user avatar
  • 66,7mil
8 votos
Aceito

Por que as classes pull-left e pull-right não estão funcionando mais no Bootstrap 4?

As classes pull-right e pull-left não funcionam mais no Bootstrap v4 porque foram removidas. Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and ....
UzumakiArtanis's user avatar
7 votos

Qual a diferença entre col-lg-* , col-md-* e col-sm-* no Bootstrap?

Agora com a versão oficial do Bootstrap sendo a versão 4, acredito que a resposta mereça um update. Segue o link da documentação oficial do grid da verão 4: https://getbootstrap.com/docs/4.0/layout/...
hugocsl's user avatar
  • 66,7mil
7 votos
Aceito

Como colocar um Icone/Botao de pesquisa dentro de um input com o Bootstrap?

Essa seria uma opção, mas terá que fazer na "marra" o estilo, para que o ícone de pesquisa fique na cor do <input>: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/...
Gabriel Gonçalves's user avatar
6 votos
Aceito

Para atualizar um projeto de Bootstrap v3 para Bootstrap v4 é só alterar os arquivos?

Não, não é só trocar os arquivos, até porque existe uma série de classes novas na versão 4 e outras na versão 3 que foram descontinuadas, além do CSS e o JavaScript que também sofreram alterações... ...
hugocsl's user avatar
  • 66,7mil
6 votos
Aceito

Pra que serve o padding do container do Bootstrap?

Veja que: (independente se é Bootstrap 3 ou Bootstrap 4) Container: O contêiner funciona dessa maneira para que as bordas do contêiner possam ter esse padding virtual de 15px ao redor do conteúdo, ...
hugocsl's user avatar
  • 66,7mil
6 votos

Como deixar colunas bootstrap embaixo da outra coladinhas

Está na documentação. A row é um container flex por natureza, ou seja, o Bootstrap já coloca por padrão a row com display:flex; então para alinhar o conteúdo de uma row no topo vc tem que usar a ...
hugocsl's user avatar
  • 66,7mil
5 votos
Aceito

Fixar barra de tabs abaixo de barra de navegação (navs x navbar)

Não é só colocar os dois elementos dentro de uma mesma <div> e adicionar a classe .sticky-top nela? <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"><...
Woss's user avatar
  • 76,5mil
5 votos
Aceito

Como alinhar o conteúdo de uma Nav Bar para que ele fique no centro da tela?

Veja que vc está colocando a classe justify-content-center na navbar, porém vc colocou como filho direto dessa navabar uma div com a classe container, isso impede o alinhamento centralizado. Para ...
hugocsl's user avatar
  • 66,7mil
5 votos

Remover sombra do estado :focus de um botão do Bootstrap

Tem que tirar o box-shadow da pseudo :focus. Só que ai o usuário vai ficar sem um feedback visual de que clicou no botão, isso não é recomendado do ponto de vista da acessibilidade .btn:focus, ...
hugocsl's user avatar
  • 66,7mil
5 votos

como deixa o fundo branco do dropdown

O problema é que a tag header está com opacidade definida para "0.6". Como você está mexendo na opacidade do elemento "pai" (header), a propriedade "opacity" afeta todos os elementos que estiverem ...
Ricardo Pereira Dias's user avatar
4 votos

Qual a diferença entre col-lg-* , col-md-* e col-sm-* no Bootstrap?

São atributos do bootstrap que definirão o tamanho do grid, em relação ao tamanho do dispositivo, são breakpoints : col-xs-* extrasmall < 768 px col-sm-* small >= 768 px col-md-* medium >= ...
MagicHat's user avatar
  • 12,5mil
4 votos
Aceito

Modificar configuração de carrosel em bootstrap 4

Eu fiz esse modelo que vc pode controlar a altura do slider, no exemplo coloquei com 30% da altura da tela. Veja na parte do CSS que eu deixei comentado como ajustar. .carousel-item { ...
hugocsl's user avatar
  • 66,7mil
4 votos
Aceito

Navbar Bootstrap

Cara seu problema é que vc está usando a estrutura do menu do Bootstrap 4, mas está indexando os arquivos CSS e JS do Bootstrap 3. Vc tem que se atentar a qual versão está usando e a qual documentação ...
hugocsl's user avatar
  • 66,7mil
4 votos
Aceito

Cards com conteúdo menor quebrando

Cara já existe nativamente no Bootstrap 4 uma forma de "alinhar" a altura dos cards, e é com um Card Group como vc pode ver aqui: https://getbootstrap.com/docs/4.0/components/card/#card-groups Depois ...
hugocsl's user avatar
  • 66,7mil
4 votos
Aceito

col-md-6 ocupando todo o espaço

Ao invés de colocar as duas colunas col-md-6 dentro de uma coluna col-md-12, por que não coloca dentro de uma row? A linha ocupa as 12 colunas e não possui os espaçamentos que uma coluna possui, que ...
Woss's user avatar
  • 76,5mil
4 votos

Fixar barra de tabs abaixo de barra de navegação (navs x navbar)

Para o position:sticky ele precisa de um top: definido, mesmo que seja 0. Então no seu caso o top tem que ser a altura da nav, 56px... Ai vc cria uma classe com a altura da nav e coloca na aba como ...
hugocsl's user avatar
  • 66,7mil
4 votos

Alinhamento de campos no bootstrap

O que acontece é que por padrão a label do Bootstrap tem um margin-bottom: .5rem;. Vc tem que remover esse margin-bottom para o label alinhar com o input corretamente como vc pode ver na imagem abaixo:...
hugocsl's user avatar
  • 66,7mil
4 votos
Aceito

Criação de botões com bootstrap

Basta usar as classes flex originais do Bootstrap, nem precisa de CSS extra pra isso. https://getbootstrap.com/docs/4.0/utilities/flex/ OBS: use as classes do grid do Bootstrap tb para não ter ...
hugocsl's user avatar
  • 66,7mil
4 votos

Alinhamento de forms

Já que vc está usando Bootstrap use o Grid dele. Eu dividi em duas colunas uma de 9 e uma de 3 com os inputs. Dentro da col dos inputs eu coloquei o texto na direita com a classe text-right, porém ...
hugocsl's user avatar
  • 66,7mil
4 votos
Aceito

Imagem sobrepor div navbar do Bootstrap

Cara basicamente é só vc fazer uma regra de media querie que bata com o mesmo tamanho do breacking point da navbar. No caso em @media (min-width:992px), ou seja, apenas para telas maiores que 992px, ...
hugocsl's user avatar
  • 66,7mil
4 votos

CSS, Bootstrap4 Cards Lado a Lado

Para você trabalhar com Bootstrap, o correto é utilizar o sistema de grids do mesmo. Então para resolver seu problema, basta colocar cada card dentro de uma coluna, a estrutura correta seria mais ou ...
Mateus Daniel's user avatar
3 votos
Aceito

Bootstrap selectpicker no bootstrap 4

Não existe incompatibilidade entre o bootstrap-select e o bootstrap 4. O problema é que se não incluir a versão UMD do popper.js antes do bootstrap.min.js não funciona! Também pode usar bootstrap....
Tiago NET's user avatar
  • 347
3 votos

Grid do Bootstrap não funciona!

Lucas acho que vc está se confundindo um pouco entre as Classes do Bootstrap3 e Bootstrap4, a culpa não é sua, pq as vezes pesquisamos no Google e clicamos no link sem percebemos na Documentação de ...
hugocsl's user avatar
  • 66,7mil
3 votos
Aceito

Grid do Bootstrap não funciona!

Poderá adicionar a classe col-lg-* para ecrãs com largura superior a 1200px. Se for o XS que não funciona, o problema poderá estar relacionado com a dimensão das imagens. Se a largura da imagem for ...
Paulo Ramos's user avatar
3 votos

Grid do Bootstrap não funciona!

Você deve utilizar o Bootstrap 4 pra usar os sufixos classes -xl . Ainda, você deve observar se as outras classes adicionadas ao elemento (wow e bounceInLeft) não possuem atributos CSS como float e ...
Matteus Barbosa's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible