如何使按钮水平全宽

Question

I am trying to create three buttons horizontal and equal in size. But what I managed to do so far is three buttons full width vertically as shown below.

<section class="section">
<div class="container-fluid">
...
<h2 class="display-5">User Management</h2>
   <br>
   <br>
   <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('create_user') }}">Create New User</a>
   <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
   <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('change_user_password') }}">Change User Password</a>
...
</div> 

and the output is:

How can I make them horizontal and taking the full width?

Answer 1

Bootstrap comes with a very powerful Grid system that you can use, utilizing the classes row (for rows) and col (for columns) respectively.

The col class utilizes a number system of 1-12, indicating the size of the column in width. One entire row holds a max possible value of 12. How you choose your layout is entirely up to you. You can even nest the row and col classes as you wish to get the grid that you desire. More about Bootstrap Grid here .

Example:

<div class="row">
    <div class="col-4">
        <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('create_user') }}">Create New User</a>
    </div>
    
    <div class="col-4">
        <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
    </div>
    
    <div class="col-4">
        <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('change_user_password') }}">Change User Password</a>
    </div>
</div>

Code snippet example:

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-4"> <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('create_user') }}">Create New User</a> </div> <div class="col-4"> <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a> </div> <div class="col-4"> <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('change_user_password') }}">Change User Password</a> </div> </div>

Answer 2

Wrap them inside a div, you can remove the btn-block and add col class to take columns automatically, something like below:

<div class="row">
    <a class="btn btn-info btn-lg col" role="button" href="{{ url_for('create_user') }}">Create New User</a>
    <a class="btn btn-info btn-lg col" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
    <a class="btn btn-info btn-lg col" role="button" href="{{ url_for('change_user_password') }}">Change User
        Password</a>
</div>