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

This is my html code snippet:

<link href="/[email protected]/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>

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

This is my html code snippet:

<link href="https://cdn.jsdelivr/npm/[email protected]/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...

• javascript
• bootstrap-4
• web-deployment

• I edited your question embedding your code in a snippet and it shows the button aligned to the right. Something sounds wrong in what you experienced but it's difficult to say. – Diego D Commented Apr 9, 2022 at 15:57

3 Answers 3

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>

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.

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

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