Why bootstrap float-right class not working for my button?

Question

The bootstrap float-right class did not work with my buttons.

This is my html code snippet:

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <button type="button" id="reset_button" class="btn btn-outline-secondary btn-lg float-right" disabled="disabled">Reset</button> <button type="button" id="convert_button" class="btn btn-primary btn-lg float-right" disabled="disabled">Submit</button> </div>

I want to make buttons align right but when I add the float-right class in both the buttons it doesn't work.

Can anyone please tell me what's wrong with my code and how can I fix this...

Answer 1

Instead of float there are probably better Bootstrap options.

Try removing the float-right and instead use d-flex with justify-content-end on the top line of your code like this....

<div class="container-fluid d-flex justify-content-end">
      <button type="button" id="reset_button" class="btn btn-outline-secondary btn-lg" disabled="disabled">Reset</button>
      <button type="button" id="convert_button" class="btn btn-primary btn-lg" 
       disabled="disabled">Submit</button>
</div>

Answer 2

The code is working for me. I just copied your snippet and buttons are on the right side.

Problem is meaby in parent DIRs with different CSS or something else is rewriting your style.

You can also see this, when you run your snippet here.

Answer 3

Like previous answers has stated, maybe there are some other styles in a parent div or element that aren't compatible with the float classes.

Try adding in a parent div the clearfix Bootstrap class, that should solve the issue in your code.