CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4google-material-icons
user9281313
user9281313

Reputation:

How to vertical align button contents with bootstrap 4

I am using bootstrap 4 and material icons in my app. The problem is when I have a button with both text and an icon.

.button-icon {
  vertical-align: middle;
}
<button class="button-icon">
    <i class="material-icons">account_box</i>
    My Account
</button>

I've tried changing the font size for the icon but that throws off the size of other icons throughout the page.

I am just trying to get the text to line center with the icon. Thank you for any help.

Upvotes: 3

Views: 9707

Answers (1)

dferenc
dferenc

Reputation: 8126

One way to do it is with the Flexbox utility classes, .d-flex .align-items-center in this case.

<button class="btn button-icon d-flex align-items-center">
    <i class="material-icons">account_box</i>
    My Account
</button>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Upvotes: 17

Related Questions