Different image and responsive text alignments

Asked

Viewed 57 times

0

I’m wearing bootstrap. After the image of the car, bugged all my mind.

How do I make this alignment of the images and texts under the cart and responsive? 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>

html css responsive-layout

  • The code snippet is partial and doesn’t help much, but basically the class text-xs-center is aligned to the right and the class line-text-2 to the left, with the divs side by side. I did not understand very well which doubt.

  • I didn’t even write CSS for that part of the code. I was able to make up the centralized image of the car. The rest don’t get into my head anymore.

  • Friend which version of Bootstrap you are using?? Because you are not using his Grid with the .row, and col- ?

1 answer

1

Your Grid guy had serious construction mistakes. I’ll give you a hint STUDY THE GRID Bootstrap is very easy to understand and won’t take you more than an hour! Understanding Grid will solve 90% of your layout problems https://getbootstrap.com/docs/4.0/layout/grid/

inserir a descrição da imagem aqui

Follow a template of your code, also display as "Whole Page" to see how it behaves on larger screens!

<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>

Browser other questions tagged html css responsive-layout

You are not signed in. Login or sign up in order to post.