'Content breaking when screen gets smaller bootstrap

This is not breaking as i want it to, i'd like for the image to be above the button but below the words when the screens size gets smaller, like phone size. Im new to bootstrap you i haven't tried much besides look in the docs but haven't found my solution. Could sonmeone please help me and point out where this issue is and why its occuring? Thanks!

        <div class="row">
          <div class="col-sm-6 text-center h-80 text-center">
              <p style="display: flex;
              padding-inline-start: 140px;
              justify-content: center;
              margin: 0;
              align-items: center;
              text-align: center;
              font-family: Dancing Script, 'sans serif';
              width: 80%;
              height: 50%;
              color: white;
              font-size: 80px">So you want to travel the world</p>
              <p style=" display: flex;
              color: white;
              padding-inline-start: 60px;
              width: 100%;
              height: 20%;
              font-size: 30px;">I do not have millions in the bank but I am making it happen without stress or worry.</p>
              <button style="border: none;
              color: white;
              font-size: 30px;
              background-color: rgba(201,115,116,255);
              border-radius: 5px;
              height: 60px;
              cursor: pointer;
              width: 400px;">Download!</button>
          </div>
          <div class="col-md-6  text-center">
            <img src="images/Digital Download! (1).png" id="img-fluid" class="img-fluid" style="height: 700px; width: 1300px;" alt="">
          </div>
        </div>
      </div>
htmlcssbootstrap-5


Solution 1:[1]

The image can never be above the button as they are in separate columns.

<div class="container">
<div class="row">
          <div class="col-sm">
              <p>So you want to travel the world</p>
              <p>I do not have millions in the bank but I am making it happen without stress or worry.</p>
          </div>
          <div class="col-sm">
            <img src="images/Digital Download! (1).png" id="img-fluid" class="img-fluid" style="height:   700px; width: 700px;" alt="">
          </div>
          
          <div class="col-sm-12">
              <button> Download!</button>
          </div>
        </div>
</div>

This is basically what you want right? The download button is below the text and image except on a small screen where they all stack? I would also follow the advice given above to move all your CSS into an external file and use the bootstrap utility classes.

I would also avoid using characters other than A-z/0-9 in your filenames if possible.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions