How to align button on right in bootstrap

Question

How to align button to left inside of a div which is having justify-content-center class applied. Code -

<div class="card-header justify-content-center">
 <div>
 <div class="ml-5">
 Text in Center
 </div>
<div class="float-right"><button>Button on right</button></div>
 </div>
</div>

float-right is not working because of justify-content-center I tried placing justify-content-center on a separate div, but the text not getting center.

Code-

<div class="card-header">
  <div class="justify-content-center">
   <div class="ml-5">
    Text in Center
   </div>
  <div class="justify-content-end"><button>Button on right</button></div>
 </div>
</div>

This approach is not working. I am not sure why the text not getting in center if I put justify-content-center class on other div

Dennis .VN · Accepted Answer · 2022-03-16 12:17:14Z

1

The justify-content-end only works on the parent tag. Have you tried using ml-auto instead ?

More info : https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

answered Mar 16, 2022 at 12:17

Dennis .VN

4612 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yash porwal · Accepted Answer · 2022-03-16 12:27:16Z

1

Please try this code:

<div class="card-header justify-content-center">
 <div>
  <div class="ml-5 text-center">
   Text in Center
  </div>
  <div class="d-flex justify-content-end"><button>Button on right</button></div>
</div>

answered Mar 16, 2022 at 12:27

Yash porwal

3263 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to align button on right in bootstrap

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest