CODEWITHSUNDEEP
htmlcssbootstrap-4
Nielsi_
Nielsi_

Reputation: 47

How to stack content vertically in Bootstrap 4

What I want to achieve is that whenever I make the screen smaller to the mobile size that the two col-6's stack under each other vertically instead of staying horizontally. It's something simple but I tried a lot of different things but I just can't seem to do it for some reason.

It should look something like this where the buttons are below the content when in mobile:

Example

Example

I would be so grateful for your help!

<div class="container">
  <div class="row">
    <div class="col-6">
      <h2 class="my-5">Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus ex, vehicula hendrerit neque vitae, consequat tristique enim. Fusce vel odio sed mi commodo dapibus. Aenean porttitor vestibulum purus, id feugiat dolor dictum a. Morbi non ipsum gravida, gravida sapien eu, tristique orci. Nullam rhoncus ornare varius. Mauris eget hendrerit nulla. Vivamus tempor hendrerit justo sed faucibus.</p>
    </div>


    <div class="col-6">
      <div class="row">
        <div class="col-12">
          <a class="btn btn-lg btn-outline-danger mt-5 mb-2 ml-5">Lorem Ipsum</a>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <a class="btn btn-lg btn-outline-danger my-2 ml-5">Lorem Ipsum</a>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <a class="btn btn-lg btn-outline-danger my-2 ml-5">Lorem Ipsum</a>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <a class="btn btn-lg btn-outline-danger my-2 ml-5">Lorem Ipsum</a>
        </div>
      </div>
  </div>

Upvotes: 0

Views: 48

Answers (1)

topsoftwarepro
topsoftwarepro

Reputation: 822

This stacks vertically fine. It might have not worked for you because you have put a </div> to close the container <div>.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-6">
      <h2 class="my-5">Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus ex, vehicula hendrerit neque vitae, consequat tristique enim. Fusce vel odio sed mi commodo dapibus. Aenean porttitor vestibulum purus, id feugiat dolor dictum a. Morbi non ipsum
        gravida, gravida sapien eu, tristique orci. Nullam rhoncus ornare varius. Mauris eget hendrerit nulla. Vivamus tempor hendrerit justo sed faucibus.</p>
    </div>


    <div id="buttons">
      <div class="col-6">
        <div class="row">
          <div class="col-12">
            <a class="btn btn-lg btn-outline-danger mt-5 mb-2 ml-5">Lorem Ipsum</a>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <a class="btn btn-lg btn-outline-danger my-2 ml-5">Lorem Ipsum</a>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <a class="btn btn-lg btn-outline-danger my-2 ml-5">Lorem Ipsum</a>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <a class="btn btn-lg btn-outline-danger my-2 ml-5">Lorem Ipsum</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Upvotes: 1

Related Questions