position icon next to textbox in bootstrap

I need help aligning the icon with the text box and centering it within the container

I attempted a solution, but the icon ended up positioned above the text box

<div class="container d-flex justify-content-center" id="baseContainer">
    <div class="row">
        <input type="text" class="input-form col-sm-3 offset-sm-0" id="searchForm" placeholder="Search for a movie or series">
        <i class="fa-solid fa-magnifying-glass col-sm" onclick="foo()"></i>
    </div>
</div>

https://i.sstatic.net/eFzU0.png

If I remove the row and container div, the alignment is correct but not centered

https://i.sstatic.net/gGFfu.png

htmlcssbootstrap-4

Answer №1

Include the align-items-center class within the row

<div class="container d-flex justify-content-center" id="baseContainer">
    <div class="row align-items-center">
        <input type="text" class="input-form col-sm-3 offset-sm-0" id="searchForm" placeholder="Search for a movie or series">
        <i class="fa-solid fa-magnifying-glass col-sm" onclick="foo()"></i>
    </div>
</div>

Answer №2

To achieve vertical alignment of the search icon, you can utilize Flexbox techniques:

<div class="container d-flex justify-content-center" id="baseContainer">
  <div class="row">
    <input
      type="text"
      class="input-form col-sm-3 offset-sm-0"
      id="searchForm"
      placeholder="Busque um filme ou série"
    />
    <i
      class="fa-solid fa-magnifying-glass col-sm d-flex align-items-center"
      onclick="foo()"
    ></i>
  </div>
</div>

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

Container struggling to contain overflowing grid content items

While creating a grid in nextjs and CSS, I encountered an issue. Whenever I use the following code: display: grid; The items overflow beyond the container, even though I have set a maximum width. Instead of flowing over to the next row, the items just kee ...

javascriptcssreactjsnext.jscss-grid

After utilizing the function, the forward and back arrows are no longer visible

After setting up my slideshow, I encountered an issue where clicking the next or previous buttons caused them to shrink down and turn into small grey boxes. Has anyone experienced this before? This relates to PHP/HTML if ($_SERVER['REQUEST_METHOD&ap ...

javascriptphpjqueryhtmlcss

Unexpected issue with Ionic 4 subarray returning as undefined even though the index is accurate

When attempting to use console.log to view the value, I noticed that the value of noticeSet2[index] is undefined. However, when I print noticeSet, all the data in the array is displayed. Additionally, after printing the index using console.log, it correctl ...

javascripthtmltypescriptionic-frameworkionic4

The filter on the mobile version is not displaying correctly

When I select a category in the input filter, only items with the same category are displayed when clicked. However, when I click on "Others" on the desktop version, only rows with that category are shown, but on mobile after resizing and filtering, nothin ...

javascripthtmljquerycss

For my website's navigation bar, I utilized Bootstrap 4. Despite my efforts, I encountered difficulty in modifying the background color of the enclosing div element

After experimenting with a few different options such as setting the background-color to transparent, rgba(0,0,0,0), and background: none; I found that when I used background-color: red or any other color, the color changed as expected. Below is the HTML ...

htmlcssbootstrap-4

Update the header background color of an AG-Grid when the grid is ready using TypeScript

Currently working with Angular 6. I have integrated ag-grid into a component and I am looking to modify the background color of the grid header using component CSS or through gridready columnapi/rowapi. I want to avoid inheriting and creating a custom He ...

cssangulartypescriptag-grid

Can anyone figure out why this code is not functioning properly? It seems to be targeting the body element and all of

Currently, I am utilizing jqtouch to create a mobile website. In addition to this, I am incorporating a gallery image slider into the website. However, I have encountered an issue where the images do not display when placed between <div id="project_name ...

javascriptjquerycssgalleryjqtouch

Generating Unique CSS Class Names with Django

I am looking to have the background color change randomly each time on a Django website. For example, I want it to be bg-success, bg-primary, bg-light, bg-dark... etc. Is there a way to achieve this? <div class="bg-success"> </div> ...

pythondjangobootstrap-4

What could be causing the absence of the input elements on my webpage?

Finally Got It to Work! After troubleshooting, I managed to fix the code on the first page and successfully link it to this second page. Despite using the same CSS and similar HTML, I couldn't figure out why the buttons were not displaying at all. Im ...

htmlcss

RStudio Connect now automatically inserts CSS code into cells when updating

My current project involves creating an app for holiday requests. The main page of the app is displayed like this: https://i.sstatic.net/z2qma.png At the bottom right corner, you'll notice a column labeled "Accepted?" which displays either "OK" or " ...

cssrshinyrsconnect

customized multiselect dropdown with grouping options using Bootstrap

My dropdown menu looks like this: <select class="selectpicker" multiple> <optgroup label="option 1"> <option value="1">1</option> <option value="2">2</option& ...

jqueryeventsbootstrap-4bootstrap-multiselect

Form fields will not automatically populate with link parameters; the user must manually input the information

My form fetches data from the database using server-side code when the user inputs the "user_id" field. The User ID field is the primary field on the form, and when the user enters their user ID, all other fields retrieve the corresponding user data from t ...

javascripthtml

Are there any tools available to validate incomplete HTML source code?

When I include HTML source code from another party on my web page, I sometimes notice that the returned code is incomplete. For example: <table> <tr valign='top'> <td width=95> <img src='test.jpg ...

javascriptjqueryhtml

Shifting Objects within Bootstrap 5 Navigation Menu

Hey there! I'm having some trouble aligning the items in a Bootstrap 5 navigation bar to the side, just like in this screenshot: https://i.sstatic.net/nxh80.png I tried adjusting the alignment but nothing changed on the site (I was using Live Server ...

javascripthtmlcsstwitter-bootstrap

Troubleshooting problems with TranslateZ performance on mobile devices

While attempting to incorporate the code found at http://codepen.io/keithclark/pen/JycFw, I encountered significant flickering and delays in Chrome when using mobile devices. #slide1:before { background-image: url("http://lorempixel.com/output/abstract ...

htmlcssmobile

When the async attribute is added to the HTML code, Angular is no longer defined

Looking to optimize the performance of my website in Chrome Audit, I decided to add 'async' to my script tag like this: <body ng-cloak id="body"> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry ...

javascripthtmlangularjsseoaudit

Launching Stealthy Slider

I am currently having an issue with implementing Sly Slider on a free WordPress theme. I have properly enqueued the JS file, set up the HTML markup, and written a jQuery function following the documentation but it does not seem to work vertically. What cou ...

javascriptphpjquerycsswordpress

Creating a Consistent Look for Italic Font Formatting in Tailwind

In an effort to establish consistent typography on a website being developed by my team, we have devised custom utility classes in Tailwind. One of these classes, small-italicized, also requires the text to be italicized. However, it seems that the fontSiz ...

javascriptcssreactjsnext.jstailwind-css

JavaScript code for extracting the value of a specific table cell from the provided screenshot

Looking at the image below, as someone new to JavaScript development, I have two questions. First, how can I directly retrieve the value of the second td from $('#cart-subtotal-order.total.subtotal td') in JavaScript code? Secondly, I need to kno ...

javascripthtmljqueryhtml-tableelement

When the value in a required input field is empty, the border is activated and the color is styled

Can you please explain this to me? Try running this code in Firefox: http://jsfiddle.net/eMa8y/24/ Here is the HTML: <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> ...

htmlcssinputborderrequired