Como criar um carrossel com várias colunas com Bootstrap

Neste tutorial você irá aprender como criar um carrossel com várias colunas com Bootstrap, sendo 2 colunas para imagens e 2 para textos. Este formato de layout fica muito bom para apresentação da equipe na empresa ou até para dar destaque a produtos em ofertas. Assista ao tutorial no vídeo:


HTML

Veja como fica cada item do carrossel com as colunas.


<div class="item">

<div class="row">

<div class="col-lg-3 text-right">

<h4 class="name">Título</h4>
<p>Lorem ipsum...</p>
<p><strong>destaque</strong></p>

</div>

<div class="col-lg-3">

<img src="img/1.png" class="img-responsive">

</div>

<div class="col-lg-3">

<img src="img/2.png" class="img-responsive">

</div>

<div class="col-lg-3">

<h4 class="name">Título</h4>
<p>Lorem ipsum...</p>
<p><strong>destaque</strong></p>

</div>

</div>

</div>

CSS

Segue abaixo como ficou o código do meu arquivo CSS.


.team {
background-image: url(../img/bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 20px 0px;
}

.name {
color: #003366;
border-bottom: solid 1px #003366;
padding-bottom: 5px;
margin-top: 30px;
}

Para assistir 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.


Publicado em 28 de outubro de 2016


3 comentários

  • Milano disse:

    Muito interessante sua abordagem! Ontem mesmo eu subi um vídeo tutorial sobre o Bootstrap Carousel. Mas eu mostrei somente um carousel básico, como do exemplo do site deles. Você foi além e inovou! Parabéns!
    Um forte abraço

    • Ricardo Sanches disse:

      Obrigado pelo feedback. Deixe o link do seu vídeo para as pessoas assistirem também, afinal compartilhar conhecimento é o mais importante.
      Abraço.

  • Bruno Vieira disse:

    Muito bom e simples valeu mesmo


Dúvidas? Deixe seu comentário.

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

*
*