'How to align button on right in bootstrap

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

cssangularjsbootstrap-4


Solution 1:[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

Solution 2:[2]

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>

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 Dennis .VN
Solution 2 Yash porwal

Related Questions