0

Olá!

Como posso fazer uma grid responsiva de imagens com a versão Bootstrap 3.5 que fique assim no Desktop:

GRID DESKTOP

E que no Mobile fique assim:

Mobile

Meu código é esse:

<div class="row bloco02">
        <div class="col-xs-12">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6 col-md-4"><img
src="imagem-02.jpg" alt=""
                            class="img02"></div>
                    <div class="col-xs-6 col-md-4"><img
src="imagem-01.jpg" alt=""
                            class="img01"></div>
                    <div class="col-xs-6 col-md-4"><img
src="imagem-03.jpg" alt=""
                            class="img03"></div>
                </div>
            </div>
        </div>
    </div>

Alguém pode me ajudar?

Agradeço!

1 Resposta 1

1

Cara primeiro, não existe a versão 3.5, a verão mais nova do Bootstrap 3 é a 3.4

Agora para fazer isso vc vai precisar de 3 classes extras que não são classes default do Bootstrap. O BS3 não tem uma classe de flex, nem de width como na versão 4, então eu recriei essas classes com o mesmo nome da versão 4, fiz as classes w-100 para width: 100% e d-flex para display:flex, Além disso usei os utilities do BS3 para mostrar e esconder as divs no breacking point, e pronto ficou como abaixo (veja a documentação https://getbootstrap.com/docs/3.4/css/#responsive-utilities-classes)

inserir a descrição da imagem aqui

Segue o código da imagem acima

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" /> -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
    .w-100 {
        width: 100%;
    }

    .d-flex {
        display: flex;
    }

    .align-itens-center {
        align-items: center;
    }

</style>
</head>

<body>

    <div class="container">
        <div class="row hidden-md hidden-lg">
            <div class="col-xs-12 d-flex align-itens-center">
                <img class="img-responsive w-100 center-block text-center" src="https://unsplash.it/300/150">
            </div>
        </div>
        <div class="row d-flex">
            <div class="col-xs-6 col-sm-6 col-md-4 d-flex align-itens-center">
                <img class="img-responsive w-100 center-block text-center" src="https://unsplash.it/300/100">
            </div>
            <div class="col-md-4 hidden-xs hidden-sm d-flex align-itens-center">
                <img class="img-responsive w-100 center-block text-center" src="https://unsplash.it/300/150">
            </div>
            <div class="col-xs-6 col-sm-6 col-md-4 d-flex align-itens-center">
                <img class="img-responsive w-100 center-block text-center" src="https://unsplash.it/300/100">
            </div>
        </div>
    </div>

</body>

</html>

4
  • Hugo, tu és o cara! Obrigado, me ajudasse muito!!!! Vou ler a documentação que me passasse!
    – Gabi M
    Commented 16/10/2019 às 14:08
  • @gaabmmelo cara se te ajudou de alguma forma e resolveu o problema, lembre-se de marcar essa resposta como aceita, clicando nesse ícone ✔ abaixo das setinhas ao lado da resposta.
    – hugocsl
    Commented 16/10/2019 às 14:53
  • Hugo, você poderia me ajudar nessa outra questão: pt.stackoverflow.com/questions/417580/carousel-bootstrap-3 Agradeço demais!
    – Gabi M
    Commented 22/10/2019 às 22:41
  • Se fosse com Bootstrap 4 tinha um pronto aqui pt.stackoverflow.com/questions/331103/…, com BS3 é mais complicado acredito, além disso tem o texto que vai estar dentro que eu não sei direito como fazer... acho que nessa não consigo te ajudar
    – hugocsl
    Commented 22/10/2019 às 23:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .