Achieving vertical alignment of button contents in Bootstrap 4

Incorporating bootstrap 4 and material icons into my app has presented a challenge. Specifically, the issue arises when I attempt to create a button that contains both text and an icon.

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

Adjusting the font size of the icon only results in inconsistency with other icons on the page.

My goal is to simply align the text and the icon at the center. Any assistance on this matter would be greatly appreciated. Thank you.

htmlcsstwitter-bootstrapbootstrap-4google-material-icons

Answer №1

To achieve this, you can utilize the Flexbox utility classes like .d-flex .align-items-center.

<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">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Making a form select element responsive within a bootstrap 4 card component

Check out the code snippet I have here: This is how I envisioned it to look, and it works perfectly at large resolutions. However, when I scale it down to tablet size, the resizing of the select element doesn't seem to work properly. Here's a s ...

htmltwitter-bootstrapbootstrap-4

Issue with offset calculation in bootstrap table occurs when the bootstrap-table is closed and the window is resized

In a recent project, I utilized the bootstrap table. However, upon closing the bootstrap table with the following script: $(document).ready(function () { $(".removetable").click(function (e) { $(".table-aria").remove(); ...

javascripthtmljquerybootstrap-5bootstrap-table

"Even when hidden, an HTML Div element still occupies space on the

I encountered an issue with my tabbedPage setup. Even though I have hidden content, it still occupies space on the page. Here is the code snippet that I am using: let tabHeader = document.getElementsByClassName("tabbedpage-header")[0]; let tabIndicator = d ...

javascripthtmlcss

Store the output of JavaScript in a PHP variable

My objective is to convert any image to base 64 and then store the converted string in a PHP variable before inserting it into my database. JavaScript Code: function uploadFile() { if (this.files && this.files[0]) { var FR= new FileReader ...

javascriptphphtmlajax

Create a boundary behind the title on a see-through backdrop

How can I create a design where there is a line to the left and right of a headline? Usually, I would use border-top on the surrounding element and style the headline with some CSS properties like this: h2 { margin-top: -10px; padding: 0 5px; b ...

cssbordertransparentmargin

Connect the front end files, including HTML, CSS, and JavaScript, to the Node.js backend

I'm a beginner in web development and recently completed an online course on node.js and express. However, the course didn't cover how to add HTML, CSS, and JS files when using Node. I attempted the following: var express = require('expres ...

javascripthtmlcssnode.jsexpress

Press the AngularJS button using just JavaScript and the element

I've been developing a browser extension that automatically clicks buttons on web pages, but I've run into an issue with sites using AngularJS. The code functions properly on most websites except for those built with AngularJS. Below is the snip ...

javascriptjqueryhtmlangularjsclick

Enhancing the appearance of dropdown menus for WooCommerce Variable products with custom CSS styling

I currently have a Wordpress website with WooCommerce and several variable products. Each product's variation has a dropdown menu that displays different options when clicked. My main concern is how to customize the appearance of these dropdown menus ...

javascriptcssajaxwordpresswoocommerce

Tips for showing a message in the modal after a user completes the registration process

This code snippet contains an HTML form for user registration. Upon clicking the register button, users are redirected to another page. However, the desired outcome is to display the message on the same modal form. <div class="popup"> ...

phpjqueryajaxhtml

Is it possible to embed a Microsoft Teams meeting within an Iframe?

Is it possible for MS Teams to provide a URL of a video meeting that can be embedded in external locations, such as an iframe on my website? I attempted to add it like this: <iframe src="https://teams.microsoft.com/l/meetup-join/19%3ameeting_N2E3M ...

javascripthtmliframemicrosoft-teamsx-frame-options

Issue with locating an item in a dropdown menu while using Selenium

I am currently attempting to locate an element within a dropdown list in my Selenium test. Despite identifying the xpath using Firebug, the Selenium code is unable to find it. My goal is to pinpoint option value number 2 in the following html snippet: < ...

htmlxpathseleniumfirebug

Troubles with HTML, CSS, and jQuery Double-Level Menu

After creating a simplified version of an HTML, CSS, jQuery navigation menu, I noticed that the submenu items were being considered part of the containing list item. This caused them to not function as intended when clicked because they were being treated ...

jqueryhtmlcssmenunav

What is the best way to utilize toggle("slide") in order to reveal a message letter by letter?

I am currently experimenting with the `.toggle("slide") function to create an effect where a piece of text appears as though each letter is sliding in. However, I've noticed that instead of a smooth slide, it looks more like the text is flying in abru ...

javascriptjqueryhtmlcss

Troubleshooting a WordPress Blog Homepage CSS Dilemma

My goal is to keep the featured image size consistent on the main blog page. I made adjustments to this code: HTML: <div class="featured-image-excerpt"> <img class="attachment-post-thumbnail size-post-thumbnail wp-post-image" src="http://mrod ...

htmlcsswordpress

Creating a thumbnail with a close button using an image

My code is available at the following link: https://codepen.io/manuchadha/pen/PBKYBJ In this form I have created, I am trying to implement an image upload feature using a file input. The goal is to display a thumbnail of the selected image below the file ...

javascripthtmlcss

How can I wrap content with the <li> element in a cross-browser compatible way?

I am encountering an issue with the dropdown menu on my website located at . When hovering over elements with a dropdown menu, you may notice that some of the items within the dropdown span more than one line and have varying widths. My goal is to adjust ...

csswidthhtml-lists

Unexpected behavior is being encountered with the else statement, and there are compatibility issues with IE and Mozilla Browser in the overall script

Script is functioning as expected in Google Chrome, but is not responsive in IE and Mozilla browsers JavaScript code: <script src="jquery.min.js"></script> <script> function Run() { if(jQuery('#inputtext').val() == '0 ...

javascriptjqueryhtml

Creating a unique JavaScript script that gradually adjusts the background color using the setTimeout() function

Is there a way to create a function that continuously changes the background color every 15 seconds by picking colors from an array that starts over once all colors have been used, without having the function run just one time? $(document).ready(() => ...

javascriptjquerycss

Achieving functionality for the searchbox in the Bootstrap navbar

I'm currently working on implementing a search function that functions properly when query parameters are directly inserted into the URL. However, I am struggling to make it work by entering the search query into the search box and executing it from t ...

angularjstwitter-bootstrap

Ways to show the existing value of a <select> in a label without altering the function

I currently have a label that changes to display the selected option from a dynamic select dropdown, but it only updates when the selection is changed. I would like it to also display the current value when the page first loads. I attempted to change &apos ...

javascriptjqueryhtmlcssselect