Como criar um menu Dropdown com múltiplas colunas no Bootstrap

Neste tutorial você vai aprender como criar um menu Dropdown com múltiplas colunas no Bootstrap sem precisar utilizar nenhum javascript. A única coisa que tem que fazer é alterar a classe .dropdown-menu no arquivo bootstrap.css. Veja o tutorial no vídeo abaixo:

Abaixo estão os códigos que adicionei ao meu site de exemplo. Personalize o tamanho do menu e quantidade de colunas de acordo com sua necessidade.

HTML

<ul class="dropdown-menu row">

<li class="col-sm-4">

<h4>Categoria</h4>
<a href="#">Teste 01</a>
<a href="#">Teste 02</a>
<a href="#">Teste 03</a>

</li>

<li class="col-sm-4">

<h4>Categoria</h4>
<a href="#">Teste 01</a>
<a href="#">Teste 02</a>
<a href="#">Teste 03</a>

</li>

<li class="col-sm-4">

<h4>Categoria</h4>
<a href="#">Teste 01</a>
<a href="#">Teste 02</a>
<a href="#">Teste 03</a>

</li>

</ul> 

CSS

 @media (min-width:768px){
.dropdown-menu {
min-width: 460px;
}
} 

Para ver mais vídeos inscreva-se em meu canal no YouTube.


Aproveite e veja como criar um carrossel com barra de progresso usando Bootstrap e jQuery. O processo de criação é simples e rápido de fazer.


Publicado em 8 de outubro de 2016


Dúvidas? Deixe seu comentário.

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

*
*