0

Estou usando bootstrap. Depois da imagem do carro, bugou tudo minha mente.

Como faço esse alinhamento das imagens e dos textos embaixo do carrinho e responsivo? inserir a descrição da imagem aqui

<html>

<body>
  <div class="container-fluid">
    <div class="text-center">
      <img src="images/car.jpg" alt="image-car">
    </div>
    <div class="text-xs-center">
      <p>Para quem está em uma road trip!</p>
    </div>
    <div class="line-text-2">
      <p>Músicas perfeitas para aquela viagem de carro com os amigos, em que o destino não é lá o mais importante.</p>
    </div>
    <div class="line-text-3">
      <p>Let's go get lost!</p>
    </div>
    <div>
      <div class="col-md-4 red-hot">
        <img src="images/red_hot.jpg" alt="Red Hot Chili Peppers">
      </div>
      <div>
        <img src="images/peter_bjorn.jpg" alt="Peter, Bjorn and John">
      </div>
    </div>
    <div class="col-sm-12">
      <img src="images/Jonas_blue.jpg" alt="Jonas Blue ft. Dakota">
    </div>
    <div class="float-left paragraph-left text-center">
      <p>Red Hot Chili Peppers</p>
    </div>
    <div class="float-right paragraph-right text-center">
      <p>Jonas Blue ft. Dakota</p>
    </div>
    <div class="mx-auto d-block paragraph-center text-center">Peter, Bjorn and John</div>
  </div>
  <script src="js/main.js"></script>
</body>

</html>

3
  • O trecho do código é parcial e não ajuda muito, mas basicamente a classe text-xs-center está alinhada à direita e a classe line-text-2 à esquerda, com os divs lado a lado. Não entendi muito bem qual a dúvida.
    – gcpdev
    Commented 18/12/2018 às 15:19
  • Nem escrevi CSS para essa parte do código. Eu consegui fazer até a imagem centralizada do carro. O resto não entre mais na minha cabeça.
    – maffraluan
    Commented 18/12/2018 às 15:22
  • Amigo qual versão do Bootstrap vc está usando?? Pq não está usando o Grid dele com as .row, e col- ?
    – hugocsl
    Commented 18/12/2018 às 16:11

1 Resposta 1

1

Cara seu Grid tinha sérios erros de construção. Te dou uma dica ESTUDE o Grid do Bootstrap, é bem fácil de entender e não vai te tomar mais que uma hora! Entendendo o Grid vc vai resolver 90% dos seus problemas de layout https://getbootstrap.com/docs/4.0/layout/grid/

inserir a descrição da imagem aqui

Segue um modelo do seu código, exiba também como "Página toda" para ver como ele se comporta em telas maiores!

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div class="container-fluid">
    <div class="row">
        <div class="text-center col-12 col-sm-6">
            <img src="https://placecage.com/100/100" alt="image-car">
        </div>
        <div class="col-12 col-sm-6 text-center text-sm-left">
            <p>Para quem está em uma road trip!</p>
            <p>Músicas perfeitas para aquela viagem de carro com os amigos, em que o destino não é lá o mais
                importante.</p>
            <p>Let's go get lost!</p>
        </div>
        <div class="col-12 col-sm-4 text-center red-hot">
            <img src="https://placecage.com/100/100" alt="Red Hot Chili Peppers">
            <p>Red Hot Chili Peppers</p>
        </div>
        <div class="col-12 col-sm-4 text-center">
            <img src="https://placecage.com/100/100" alt="Peter, Bjorn and John">
            <p>Peter, Bjorn and John</p>
        </div>
        <div class="col-12 col-sm-4 text-center">
            <img src="https://placecage.com/100/100" alt="Jonas Blue ft. Dakota">
            <p>Jonas Blue ft. Dakota</p>
        </div>
    </div>
</div>

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 .