Having problems aligning a button inside a form (Bootstrap)-CodePudding

I´ve been doing a school project and I'm having problems making a button align to the right.

I'm using bootstrap for this HTML project.

Image of the current aspect of the button: (https://i.stack.imgur.com/I9I28.jpg)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div >
  
  <button
    
    type="button"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false">Dropdown button</button>
    
  <div  aria-labelledby="dropdownMenuButton">
    <div >
      <input  type="checkbox" value="" id="defaultCheck1">
      <label  for="defaultCheck1">Option 1</label>
    </div>
    <div >
      <input  type="checkbox" value="" id="defaultCheck2">
      <label  for="defaultCheck2">Option 2</label>
    </div>
    <div >
      <input  type="checkbox" value="" id="defaultCheck3">
      <label  for="defaultCheck3">Option 3</label>
    </div>
  </div>
  
  <button  type="submit">Login</button>
  
  </form> <!-- this is closing a form that wasn't opened anywhere -->
  
</div>

CodePudding user response：

try with this code i added "d-flex justify-content-between" class main div that has class "dropdown"

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div >
  
  <button
    
    type="button"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false">Dropdown button</button>
    
  <div  aria-labelledby="dropdownMenuButton">
    <div >
      <input  type="checkbox" value="" id="defaultCheck1">
      <label  for="defaultCheck1">Option 1</label>
    </div>
    <div >
      <input  type="checkbox" value="" id="defaultCheck2">
      <label  for="defaultCheck2">Option 2</label>
    </div>
    <div >
      <input  type="checkbox" value="" id="defaultCheck3">
      <label  for="defaultCheck3">Option 3</label>
    </div>
  </div>
  
  <button  type="submit">Login</button>
  
  </form> <!-- this is closing a form that wasn't opened anywhere -->
  
</div>

CodePudding user response：

To align the "Login" button to the right, you can add the Bootstrap class "ml-auto" to the button element. This will align the button to the right side of the parent container.

<button  type="submit">Login</button>