HTML buttons are not aligned in center. either it moving to left side or right side-CodePudding

<div >
        <div  style="height:750px;font-size:18px;overflow: auto;">
            <div >
                <a href="#"><i ></i></a>
                Add New CLI Commands                                            
            </div>
            <div  style="font-size:12px !important;">
                <form action="#">
                    <div >
                        <label for="command_name">Command Name:</label>
                        <input type="text"  id="command_name" placeholder="Enter Command" name="command_name">
                    </div>
                    <div >
                        <label for="command_description">Command Description:</label>
                        <input type="text"  id="command_description" placeholder="Enter Command Description" name="command_description">                        
                    </div>                  
                    <div >                                         
                        <button type="submit"  style="margin-left:3px" ng-click="addCommandsData()">Add</button>
                        <button type="button"  style="margin-left:3px" ng-click="updateCommandsData()">Update</button>                      
                        <button type="button"  style="margin-left:3px" ng-click="deleteCommandsData()">Delete</button>                                                
                    </div>                  
                </form>
            </div>
        </div>
    </div>

Buttons such as Add, Update and Delete are not aligned properly. However I have given pull-center for Update. Given code for reference. Any suggestions please.

CodePudding user response：

https://getbootstrap.com/docs/5.0/utilities/flex/

You can take reference for justifying content here. I don't have a bootstrap development setup ready right now so I won't be able to demonstrate.

But according to my experience using between justification is a better approach

<div >...</div>

for this purpose and it will be responsive too on all platforms.

CodePudding user response：

As suggested by @Officer Erik K, you can archive this using bootstrap 3 classes text-center, pull-left and pull-right :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div >
  <button type="submit"  style="margin-left:3px">
    Add
  </button>
  <button type="button"  style="margin-left:3px">
    Update
  </button>                      
  <button type="button"  style="margin-left:3px">
    Delete
  </button>     
</div>

Or you can use flex :

.space-between {
  display: flex;
  justify-content: space-between;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div >
  <button type="submit"  style="margin-left:3px">
    Add
  </button>
  <button type="button"  style="margin-left:3px">
    Update
  </button>                      
  <button type="button"  style="margin-left:3px">
    Delete
  </button>     
</div>