CODEWITHSUNDEEP
bootstrap-4
Santhosh
Santhosh

Reputation: 11834

bootstrap4: Correct way to use row and col in this scenario

I am using bootstrap4. I want to have a h3 heading and a button below. I can see there are few ways of doing it. I have listed them below

Method1

<div class="row">
  <div class="col-12">
    <h3>Some Text</h3>
  </div>
  <div class="col-12">
    <button type="button">Some button</button>
  </div>
</div>

Method2 (looks to use too many row col)

<div class="row">
  <div class="col">
    <div class="row">
        <div class="col">
            <h3>Some Text</h3>
        </div>
    </div>
  </div>
  <div class="col">
    <div class="row">
        <div class="col">
            <button type="button">Some button</button>
        </div>
    </div>
  </div>
</div>

Method3

<div>
    <div class="row">
        <div class="col">
            <h3>Some Text</h3>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <button type="button">Some button</button>
        </div>
    </div>
</div>

Can someone guide which is the right way to do this using row and col.

Upvotes: 0

Views: 42

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362780

"I want to have a h3 heading and a button below"

If you have no other requirements and it doesn't need to change responsively the "correct" method is simply..

<div class="row">
    <div class="col-12">
        <h3>Some Text</h3>
        <button type="button" class="btn btn-dark">Some button</button>
    </div>
</div>

Headings are display:block so that will automatically force the button to a new line. If you want to use separate columns then Method 1 is again the best choice because it's the simplest.

Upvotes: 1

Related Questions