How to vertically center a button in table using bootstrap 4

To vertically center a button in table using bootstrap 4, one can use

class="align-middle"

Centrer verticalement un bouton dans un tableau avec bootstrap 4

example:

<!DOCTYPE html>
<html lang="en">

<head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body>

<div class="container">

<div class="row; mt-5">
<div class="col-md-8">


    <table class="table table-striped">
        <tbody>
        <tr>
            <td>
                <p>John Doe</p>
                <p style="color:grey;font-size:14px;text-align:justify">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
                </p>
            </td>
            <td class="align-middle" style="text-align: right">
                <a href='#'>
                    <button type="button" class="btn btn-outline-info btn-sm m-0 waves-effect">
                        View
                    </button>
                </a>        
            </td>
        </tr>
        <tr>
            <td>
                <p>John Doe</p>
                <p style="color:grey;font-size:14px;text-align:justify">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
                </p>
            </td>
            <td class="align-middle" style="text-align: right">
                <a href='#'>
                    <button type="button" class="btn btn-outline-info btn-sm m-0 waves-effect">
                        View
                    </button>
                </a>        
            </td>
        </tr>
        <tr>
            <td>
                <p>John Doe</p>
                <p style="color:grey;font-size:14px;text-align:justify">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
                </p>
            </td>
            <td class="align-middle" style="text-align: right">
                <a href='#'>
                    <button type="button" class="btn btn-outline-info btn-sm m-0 waves-effect">
                        View
                    </button>
                </a>        
            </td>
        </tr>
        <tr>
            <td>
                <p>John Doe</p>
                <p style="color:grey;font-size:14px;text-align:justify">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
                </p>
            </td>
            <td class="align-middle" style="text-align: right">
                <a href='#'>
                    <button type="button" class="btn btn-outline-info btn-sm m-0 waves-effect">
                        View
                    </button>
                </a>        
            </td>
        </tr>               
        </tbody>
    </table>

</div>
</div>
</div>

</body>

</html>

References

Links	Site
grid	getbootstrap
Vertical Align Center in Bootstrap 4	stackoverflow
getbootstrap	stackoverflow
Vertical alignment in Bootstrap 4	stackoverflow
Center Contents of Bootstrap row container	stackoverflow

Developer in my spare time, I’m interested in Earth observation and satellite-based fire detection. Passionate about Python, machine learning, and open science.

How to vertically center a button in table using bootstrap 4

References

Benjamin

Skills