Como alinhar colunas com alturas diferentes no Bootstrap

Veja neste vídeo como alinhar colunas com alturas diferentes no Bootstrap de uma maneira bem simples e rápida. Se ainda continuar com dúvidas depois de assistir o vídeo, basta ler o resto deste artigo.

Siga os passos abaixo

1. Faça o download do jquery.matchHeight.js no GitHub

2. Copie os arquivos “jquery-1.11.0.min.js” e “jquery.matchHeight.js” em seguida cole na pasta raiz de seu site (ou em outra pasta que desejar)

Como alinhar colunas com alturas diferentes no Bootstrap

3. Insira o código abaixo dentro da tag “<head>” de seu site (não se esqueça de conferir se o caminho dos Js estão corretos)

&lt;script type="text/javascript" src="jquery-1.11.0.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.matchHeight.js"&gt;&lt;/script&gt;

4. Adicione o código “data-mh=”nome”” nas colunas que deseja alinhar, como no exemplo abaixo.

&lt;div class="col-sm-4" data-mh="nome"&gt;&lt;/div&gt;

Com este Js você pode ter vários grupos de colunas alinhados de forma diferente. Para mais informações leia a documentação disponível na página do autor.


Publicado em 6 de outubro de 2016


4 comentários

  • Marcos disse:

    Parabéns muito boa a dica

  • Jhonatan Amorim disse:

    Ficou muito bacana, agora seguindo a lógica desse vídeo poderia aproveitar e mostrar uma forma dos divs terem o mesmo tamanho de forma dinâmica. A depender da situação também pode ser útil

  • Bruno Hilário disse:

    Porque não usou a classe row do Bootstrap?

    • Ricardo Sanches disse:

      Oi Bruno, as colunas estão dentro da linha. O que acontece é que muitas vezes você tem quantidades diferentes de colunas em cada resolução e isso faria o layout quebrar, mesmo dentro da linha.
      Por exemplo, você pode encontrar problemas na visualização em tablets se você tiver uma linha com quatro colunas de alturas diferentes e definir os seguintes tamanhos: col-lg-3 col-md-6 col-sm-6.
      Espero ter ajudado.


Dúvidas? Deixe seu comentário.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*
*