29
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 ....
23
votos
Aceito
O que é e como funciona o Bootstrap?
Bootstrap é um framework front-end, explicando a grosso modo, ele te provê componentes front-end (css, sass, less e js) prontos pra você utilizar na sua aplicação.
O Bootstrap depende, basicamente, ...
17
votos
Aceito
Como inserir um recuo de primeira linha com css?
Em CSS puro basta usar o text-indent:
.recuo { text-indent:4em }
<p class="text-info recuo">
Suspendisse nec tincidunt nulla. Aliquam et urna magna.
Suspendisse et tortor libero. ...
15
votos
Ocultar campo no HTML com Bootstrap
Utilize as classes de responsividade do Bootstrap
http://getbootstrap.com/css/#responsive-utilities-classes
No seu caso, utilizar as classes hidden-xs para ocultar algo na resolução mobile e visible-...
13
votos
O que é e como funciona o Bootstrap?
...é tipo um template né?
É um pouco mais do que isso. É um template que te força a trabalhar num determinado nível de disciplina, de forma a exibir seu site em praticamente qualquer dispositivo com ...
12
votos
O que é e como funciona o Bootstrap?
Bom, vamos por partes.
É apenas uma reunião de modelos CSS e Javascript?
Sim e não. Conforme descrição do site, o Bootstrap é voltado para prover a base para aplicações com design responsivo, ...
11
votos
Aceito
Tag <p> renderizando Quebra de Linha (sem uso de <br />)
A saída está correta do seguinte ponto de vista: o browser está pondo a quebra apenas onde há espaço entre as palavras.
Para contornar este comportamento, você precisa especificar word-wrap: break-...
11
votos
Aceito
Como exibir asterisco em campos com required com css?
Para fazer com css pode adicionar uma classe (neste caso escolhi required) aos elementos que desejas que fiquem com o asterisco, e configurar essa classe com o pseudo elemento after, exemplos:
Antes ...
10
votos
Aceito
Menu e submenu com bootstrap
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-...
10
votos
Aceito
Centralizar uma tabela (HTML)
O text-align serve somente para alinhar o texto de um elemento, por isso ele não é capaz de alinhar a tabela.
A propriedade margin te permite definir as margens em torno do elemento (um espaço em ...
9
votos
O que é e como funciona o Bootstrap?
O bootstrap é uma coleção de arquivos js, css/less/sass entre outros, que tem como objetivo te dar um ponto de partida pro seu layout.
Não é um template, a ideia do bootstrap não é adicionar um ...
8
votos
O que é e como funciona o Bootstrap?
O Bootstrap é, como qualquer framework de front-end, uma biblioteca que minimiza o trabalho de codificação na criação de páginas, com elementos estilizados e melhorados, assim como componentes ...
8
votos
Como colocar duas divs ao lado de um container?
Creio que a resposta da sua pergunta está na utilização de 'fluid containers' ou seja, containers que ocuparão 100% da largura disponível no layout.
<div class="container-fluid">
<div ...
8
votos
Aceito
Chamar Modal e Tooltip no mesmo data-toggle
Deixe a mesma estrutura da modal, inclua apenas um novo data-type que será o seu data-toogle, no meu exemplo, usei data-tt="tooltip" agora é só adicionar o title e chamar no js.
Exemplo:
$("[...
8
votos
Aceito
Como fazer nested tables com bootstrap?
Assumindo o uso de jQuery pode fazer o seguinte:
function esconderLinha(idDaLinha) {
// procura o elemento com o ID passado para a função e coloca o estado para o contrario do estado ...
8
votos
Aceito
Como desabilitar clique fora do modal?
Você pode setar a propriedade data-backdrop="static" ao seu modal:
<div class="modal hide" data-backdrop="static">
E se desejar desabilitar o ESC também use data-keyboard="false":
<div ...
7
votos
Aceito
Avançar aba ao clicar no botão
A forma mais simples que vejo é acionar o evento click na aba. Basta adicionar um trigger("click") na linha que habilita a mesma:
$('button').click(function(){
/*enable next tab*/
$('.nav li....
7
votos
Aceito
Largura do input Bootstrap usando form-inline
Simples, podes fazer isto utilizando a propriedade min-width no teu CSS:
.form-control{min-width:300px;}
ou implementando-o directamente no HTML:
<input type="email" class="form-control" id="...
7
votos
Aceito
Como fazer uma pesquisa em um campo combo a medida que for digitando o texto?
Apenas com Bootstrap você nao consegue realizar essa tarefa. Nesse link você encontra 30 exemplos em jQuery que fazem esse trabalho. Procure o que mais se adeque às suas necessidades.
Alguns dos ...
7
votos
Aceito
Modal do bootstrap não abre
Você não fez os imports corretamente.
<html>
<head>
<!-- Importando o css do bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/...
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
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 ....
6
votos
O que é e como funciona o Bootstrap?
Pergunta 1:
O Bootstrap é um framework de CSS que utiliza HTML5, CSS3 e JavaScript.
O que deve estar acontecendo com o seu formulário é a sobreposição de CSS.
Utilize o Bootstrap.css como CSS ...
6
votos
Aceito
Alinhamento de imagem responsiva com Bootstrap
Isso acontece porque a class .img-responsive adiciona a propriedade - display:block; à imagem.
Para resolver isso e fazer com que um elemento com display:block; seja alinhado ao centro terás que ...
6
votos
Menu e submenu com bootstrap
Não sei se é o que você quer, mas aqui deu certo assim:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<...
6
votos
Aceito
Como alterar a classe de um botão de acordo com seu id e o valor?
Você pode usar seletor [value=X]:
var value = (Math.floor(Math.random() * 4) + 1); // << Para explicar gera um número qualquer, clique em "Executar" para selecionar um diferente.
$("#...
6
votos
Aceito
Fechar o modal Bootstrap após efetuar o cadastro
subtitua:
$("#myModal").hide();
por:
$("#myModal").modal('hide');
Se não me engano é isso
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
Aceito
Media Queries do CSS não funciona e esta conflitando
Faça assim:
@media (max-width:767px) {
/* de 0px até 767px */
}
@media (min-width:768px) and (max-width: 992px) {
/* de 768px até 992px*/
}
@media (min-width:992px) {
/* acima de 992px */
...
Only top scored, non community-wiki answers of a minimum length are eligible
Tags relacionadas
bootstrap-3 × 537css × 161
twitter-bootstrap × 158
html × 138
html5 × 108
javascript × 101
jquery × 82
css3 × 72
php × 50
modal × 24
bootstrap × 21
asp.net-mvc × 17
bootstrap-4 × 14
layout-responsivo × 10
datepicker × 10
angularjs × 9
c# × 8
mysql × 8
menu × 8
grid × 8
asp.net × 7
asp.net-mvc-5 × 7
carousel × 7
wordpress × 6
codeigniter × 6