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 ....
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 ...
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 ....
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/...
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/...
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...
...
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, ...
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 ...
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"><...
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 ...
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,
...
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 ...
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 >= ...
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 {
...
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 ...
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 ...
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 ...
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 ...
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:...
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 ...
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 ...
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, ...
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 ...
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....
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 ...
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 ...
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 ...
Only top scored, non community-wiki answers of a minimum length are eligible
Tags relacionadas
bootstrap-4 × 331css × 134
twitter-bootstrap × 115
html × 107
html5 × 77
javascript × 54
css3 × 44
jquery × 34
php × 21
angular × 18
bootstrap-3 × 14
layout-responsivo × 9
modal × 8
nav-bar × 8
front-end × 6
sass × 6
flexbox × 6
bootstrap × 5
typescript × 4
div × 4
menu × 4
dropdown × 4
grid × 4
responsivo × 4
scss × 4