Vertical alignment issue with icons in Bootstrap 5 HTML code

Just starting out with Css and I'm having trouble aligning the google icon vertically in the center with some padding from the bottom. You can see the issue in the attached file. The text is aligned in the center.

.g-icon{
background-image: url("../../assets/imgs/googles.png");
background-repeat: no-repeat;
height: 28px;
width:28px;}

for html

 <div class="text-center pl-3 pt-3 pb-3 shadow bg-white rounded reg-head">
   <i class="g-icon  d-flex align-items-center"></i>
     <div class="reg">
      <label class=" mx-0 my-0"> Register with Google</label>
     </div>
  </div>

Here is my screen shot Output for css code

javascripthtmlcssbootstrap-4figma

Answer №1

Here are two options for you to consider:

  1. To align your text and Google icon, you can utilize the "float" property in CSS. Check out: https://developer.mozilla.org/fr/docs/Web/CSS/float

  2. Alternatively, you can embed your Google icon within the same tag as your text. For example:

    <p><img src="link/to/google/img">Google text<p>

Answer №2

Apply some styling to the container using Css:

flex-display:flex;
align-items:center;
justify-content:flex-start;

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

Using a pipe filter to implement a search feature in an Ionic search bar

Hey everyone, I'm facing a little issue here. I created a pipe filter to sort through some data, but now I need to include two more filters and I'm not sure how to go about it within this pipe. Below is an example of the pipe I have created: ...

javascriptangulartypescriptionic-framework

Async/Await mishap

Could someone please explain why the code below is printing a blank result? I was expecting it to print "done" since I thought the await keyword would make the program wait for the promise to be resolved. Appreciate any help provided! let message = &apos ...

javascriptnode.jsasynchronousasync-await

I created a design for a subscription form that appears aesthetically pleasing in Firefox, however, it does not maintain the same appearance in Opera. Any suggestions on how I can resolve this issue?

Why does my code display differently in Firefox compared to Opera? In Firefox, the height of input/text and input/submit elements are similar. However, in Opera, the height of the input/submit is reduced. This is the HTML code: < ...

htmlcssfirefoxopera

What is the method for performing a spelling check on every property within an array of Objects?

I'm working on a program that takes a user input as an argument and then searches for a similar match in an array of objects. The array of objects is retrieved from a database. When the user inputs a name, the search criteria should find objects with ...

javascriptnode.js

Is there a way to modify the location of the datepicker/calendar icon within my bootstrap form?

When using react-bootstrap with the <Form.Control type="date"> element, I noticed that the calendar icon or date picker is automatically positioned to the right side/end of the form field. However, I am interested in moving the calendar ico ...

htmlcssinputdatepickerreact-bootstrap

Is there a way to trigger the opening of a new file or page when a CSS animation comes to an end?

Is there a way to delay the loading of a function or page until after an animation has finished running in JavaScript, HTML, and CSS only? For instance, I'd like to run an animation first and then have a different website or content load afterwards fo ...

javascripthtmlcss

How to make external links open in a new window within wagtail

Recently, I made a change to include target="_blank" in external links by implementing the following code: @hooks.register('after_edit_page') def do_after_page_edit(request, page): if hasattr(page, "body"): soup = BeautifulSoup(page. ...

pythonhtmldjangohookwagtail

Tips on fetching data from a different webpage via ajax

Hello, I am new to programming. I am looking for a way to update the content of the current PHP page with content from another PHP page using AJAX without needing to refresh the page. The content that needs to be replaced is located within div elements. ...

phpjqueryhtmlajax

An unexpected issue occurred during runtime, specifically a TypeError stating that the function posts.map is not

Currently, I am diving into the world of nextjs and decided to follow a tutorial on building a Reddit clone that I stumbled upon on Youtube. However, I encountered a persistent issue: posts.map is not a function I would appreciate any assistance you can o ...

javascriptnext.jsfrontendfeedsupabase

Error: Invariant Violation occurred with code 29 while using React Apollo and GraphQL

I encountered an error that says "Invariant Violation: 29." Could someone explain what this error means and if I missed something in my code that triggered it? The error occurred when I was trying to import the LocationSearch component into my index.js. im ...

javascriptreactjsmaterial-uiapolloapollo-client

What's the best method for uploading a file to AWS S3: POST or PUT requests?

Could you please provide insights on the advantages and disadvantages of utilizing POST versus PUT requests for uploading a file to Amazon Web Services S3? Although I have come across some relevant discussions on platforms like StackOverflow, such as this ...

javascriptajaxamazon-web-servicesamazon-s3

Disregard IDs when linting CSS in ATOM

Is there a way to configure csslint in Atom to exclude "ids" and prevent the warning "Don't use IDs in selectors" from appearing? Update: Despite my question being flagged as potentially duplicate, I delved deeper in my own research and ultimately fo ...

csshtmlatom-editorcsslint

How to process JSON data that includes a function

I'm trying to replicate a similar diagram using dynamic input data. Here is a basic example of how I'm attempting to achieve this: <script> var myYears = ', 1991, 1992, 1993, 1994, 1995, 1998'; //auto-generated var myValues = ...

javascriptjsond3.js

How can you trigger CSS transitions to happen multiple times?

Currently, I have a basic circular logo that rotates 360 degrees when certain ajax functions are triggered. While this works as intended, the rotation only occurs once after the function is triggered, and I need to reload the page for it to happen again. ...

jquerycsstransformcss-transitions

Creating a Form with HTML and CSS

I am currently working on setting up a banner that includes an overlay with a cutout. Beneath the overlay, there is an image. My goal is to create this design using HTML and CSS. I have been experimenting with pseudo-elements but I am having difficulty re ...

htmlcsspseudo-element

Loop through the input template using ng-repeat with various data types

I have been working on developing a user interface for adding and modifying information in a database. To manage the database, I am utilizing breeze, displaying data using angular grid, and incorporating a ui-bootstrap modal dialog for user interaction. ...

javascripthtmlangularjsangular-ui-bootstrap

What is the process of securing a directory with a password using Node.js and Express?

I am in the process of creating a basic web server using Node.js and Express. My aim is to host various static files, one of which includes a Unity WebGL game. In order for the game to function properly, numerous assets need to be loaded. I am interested ...

htmlnode.jsexpresswebstatic

Clicking anywhere outside a popup menu in JavaScript will deactivate a toggle and hide it

I have three different menu options: home,Clinic, and About. When I click on the Clinic option, a Megamenu appears, and if I click on it again, the Megamenu is hidden. I want the Megamenu to hide when clicking anywhere on the webpage. The issue is that cu ...

javascripthtmljquery

Struggles encountered while developing a JavaScript calendar

Hey guys, I'm encountering an issue with Uncaught TypeError: document.getElementById(...) is null. I believe the problem lies in the way types are being parsed for document.getElementById(dayOfWeek).appendChild(dayPTag);. This code is meant to display ...

javascripthtmlnullcalendartypeerror

Manipulating the visibility of a template with ng-show and ng-hide

Is it possible to use ng-show and ng-hide in order to display or hide an HTML template, particularly if that template is a separate HTML file? I am attempting to divide my HTML file into two sections and toggle their visibility based on an event. ...

htmlangularjs