Different alignments of images and responsive texts

Navigation
0

I'm using bootstrap. After the car image, it bugged my mind.

How do I make the alignment of images and texts under the cart and responsive? 

<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>
    
asked by anonymous 18.12.2018 / 16:13

1 answer

1

Dude your Grid had serious construction mistakes. I give you a STUDY Grid tip of Bootstrap, it's very easy to understand and it will not take you more than an hour! Understanding Grid will solve 90% of your layout problems link

Followatemplateofyourcode,alsodisplayas"Page entire" 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>
    
18.12.2018 / 19:22
Save Json dictionary in txt How do I limit the extensions that can be saved? (PHP)