22.04.2025

Esticando um Botão para a Largura Total de uma Coluna em HTML/CSS

Resposta Rápida

Para fazer um botão ocupar toda a largura disponível, você precisa definir a propriedade width em CSS como 100%.

button {
  width: 100%;
  display: block; /* Adoraríamos usar `display: supino`, mas por enquanto, `block` vai servir */
  box-sizing: border-box; /* Isso é prático, como quando tudo cabe em uma mala */
}

Exemplo de implementação deste código CSS:

<button>Botão de Largura Total</button>

Certifique-se de que o elemento pai não tenha restrições de tamanho ou margens que possam afetar a largura final do botão.

Bootstrap: Esticando o Botão de Forma Elegante

O Bootstrap oferece um método conveniente para fazer um botão se esticar pela largura total da coluna. Para Bootstrap v3 & v4, adicione a classe .btn-block:

<button class="btn btn-primary btn-block">Botão de Largura Total</button>

No Bootstrap v2, você deve usar .input-block-level:

<button class="input-block-level">Botão de Largura Total</button>

Para Bootstrap 5.1, onde a classe .btn-block foi removida, você pode usar .w-100:

<button class="btn btn-primary w-100">Botão de Largura Total</button>

E se você estiver trabalhando com formulários, a classe .form-control também pode ajudar a fazer os elementos terem a mesma largura:

<button class="form-control">Botão de Largura Total</button>

Layout em Grade e Responsividade: Lidando com Diferentes Tamanhos de Tela

Usando a classe .col-12, o botão ocupará toda a largura da coluna:

<div class="row">
  <div class="col-12">
    <button class="btn btn-primary w-100">Botão de Largura Total</button>
  </div>
</div>

Com .col-md-12, você pode adaptar o botão para dispositivos médios:

<div class="row">
  <div class="col-md-12">
    <button class="btn btn-primary w-100">Botão de Largura Total</button>
  </div>
</div>

Não esqueça de incluir Bootstrap CSS para que as classes de estilo funcionem corretamente.

Sem Bootstrap? Sem Problemas: CSS Puro

Na ausência do Bootstrap, você pode aplicar estilos inline para alcançar o mesmo efeito:

<button style="width: 100%;">Botão de Largura Total</button>

No entanto, é melhor usar classes para uma melhor legibilidade do código:

.full-width-button {
  width: 100%;
  display: block; /* O sonho de `display: tal` permanece não realizado */
  box-sizing: border-box; /* Controlamos as bordas e preenchimentos como gatos em uma coleira */
}

Basta adicionar uma nova classe ao botão:

<button class="full-width-button">Botão de Largura Total</button>

Para um design responsivo dentro da grade, você pode usar classes como .col-md-4 e .col-12.

Visualização

Você pode imaginar a tela como uma tela e o botão como um elástico:

Antes de Esticar:    | Botão |
                      |        |
Tela (tela):        |------------------|

Ao aplicar width: 100%, temos:

button {
    width: 100%; /* Agora o botão utiliza todo o seu potencial */
}

Como resultado, o botão ocupa a largura total:

Depois de Esticar:   |------------------|
                      |   Largura Total   |
Tela (tela):        |------------------|

Graças a um pequeno trecho de CSS, seu botão agora cobre uma tela ampla!

Recursos Úteis

1. Guia Completo para Flexbox | CSS-Tricks – Domine as capacidades do Flexbox para criar layouts flexíveis.
2. box-sizing - CSS: Folhas de Estilo em Cascata | MDN – Informações detalhadas sobre box-sizing e seus efeitos na largura do elemento.
3. Desenhando Gráficos de Pizza Responsivos com CSS e SVG — Smashing Magazine – Melhore a responsividade dos seus designs usando SVG e CSS.
4. Estratégias para Estilização de Janelas Modais | CSS-Tricks – Melhores práticas para estilizar janelas modais.
5. Usando Variáveis CSS — MDN – Vantagens de usar variáveis CSS para aumentar a escalabilidade e a manutenção.
6. A Propriedade width em CSS – Um guia sobre como usar width para criar elementos de largura total.

Video

Navigation