0

I am trying to create a webpage with a button in the middle and text underneath it. I am trying to use bootstrap to do so, but currently the text underneath is either too far below the button or the text is inconsistently spaced below the button across devices. Below is the code I am working with:

    <div class="container-fluid" style="height: 75vh;">
        <div class="h-100 d-flex justify-content-center align-items-center">
            <div class="grid">
                <div class="row">
                    <button type="button" class="btn btn-primary btn-xlarge btn-success"
                            id="button1">
                        Button!
                    </button>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-center" style="margin-top: -28%">
            <div class="grid">
                <div class="row" style="font-size: 24px">
                    <p id="p1">Lorem Ipsum</p>
                </div>
            </div>
        </div>
    </div>

Does anyone have any suggestions on how to fix this?

I am using HTML5 and Bootstrap 4

Ben Rei
  • 109
  • 1
  • 3
  • 12

1 Answers1

0

Use simple layout i.e. both button and div within flex container. And add flex-direction column.

<div class="container-fluid" style="height: 75vh;">
  <div class="h-100 d-flex justify-content-center align-items-center flex-column">
    <button type="button" class="btn btn-primary btn-xlarge btn-success"
              id="button1">
        Button!
    </button>
    <div style="font-size: 24px">
        <p id="p1">Lorem Ipsum</p>
     </div>
  </div>
</div>
Vaibhav Vijay
  • 59
  • 1
  • 6