Arranging an image next to a text input in Bootstrap 5: A step-by-step guide

I want to align a magnifying glass image next to a text input on the left side. However, it is currently displaying above the text input. How can I make sure they are positioned side-by-side using Bootstrap 5?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3e3333282f282e3d2c1c69726f726e">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="container-fluid mt-3" style="background-color: white;">
  <form method="GET" class="override-navbar-form col-sm-12" action="#">

    <div class="row">
      <div class="col">
      </div>
      <div class="col-sm-5 mx-auto">
        <div class="text-black text-center">
          <label for="query_text"></label>
          <img style="max-height: 15px" src="/static/images/mag_glass.png" alt="">
          <input type="text" id="query_text" name="query_text" value="{{ query_text }}" class="form-control" placeholder="Search...">
          <br>
          <br>
          <button type="submit" class="search-button" style="margin-right: 5px" name="submit_type" value="search">Search</button>
        </div>
      </div>
      <div class="col">
      </div>
    </div>
  </form>
</div>

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

There are multiple ways to achieve this:

Below is an example showcasing each method:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7fafae1e6e1e7f4e5d5a0bba6bba6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">


<div class="container-fluid mt-3" style="background-color: white;">
  <form method="GET" class="override-navbar-form col-sm-12" action="#">

    <div class="row">
      <div class="col">
      </div>
      <div class="col-sm-5 mx-auto">
        <div class="text-black text-center">
          <label for="query_text"></label>

          <div class="d-flex align-items-center">
            <img style="max-height: 15px" src="https://placehold.co/15" alt="">
            <input type="text" id="query_text" name="query_text" value="I'm in a .d-flex" class="form-control ms-1" placeholder="Search...">
          </div>

          <div class="row gx-1 align-items-center">
            <div class="col-auto">
              <img style="max-height: 15px" src="https://placehold.co/15" alt="">
            </div>
            <div class="col">
              <input type="text" id="query_text" name="query_text" value="I'm in a .col in a .row" class="form-control" placeholder="Search...">
            </div>
          </div>

          <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1"><img style="max-height: 15px" src="https://placehold.co/15" alt=""></span>
            <input type="text" id="query_text" name="query_text" value="I'm in an .input-group" class="form-control" placeholder="Search...">
          </div>

          <br>
          <br>
          <button type="submit" class="search-button" style="margin-right: 5px" name="submit_type" value="search">Search</button>
        </div>
      </div>
      <div class="col">
      </div>
    </div>
  </form>
</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

Discover the step-by-step guide to creating a dynamic and adaptable gallery layout using

I have encountered an issue with my gallery where the images stack once the window is resized. Is there a way to ensure that the layout remains consistent across all screen sizes? <div class="container"> <div class="gallery"> &l ...

javascriptjqueryhtmlcssbootstrap-4

CSS selector targeting an element based on the value of its table border

Is there a way to target a table on a webpage using a CSS selector? The table structure looks like this: <table border="1" width="560" cellspacing="0"> <tr> <td height="28" colspan="3" bgcolor="#FFFFF...> </tr> </table ...

jquerycsscss-selectorsjquery-selectors

Is it possible to use personalized fonts alongside Google web fonts?

I'm looking to incorporate my customized font into a website using Google's font loader. Any recommendations on how to achieve this? ...

cssfontswebfontscustom-font

The spacing problem arises from the interaction between two HTML tags containing a Bootstrap file

view image details hereUsing Bootstrap 5, I have a screenshot with an h5 element in a black border and an em tag in a red border. I specified margin 0 to the h5 element but it still does not touch the em tag (in red border). I have tried adjusting line spa ...

htmlcssbootstrap-5

Why won't the sound play on the button with the picture?

I am currently working on a website project that requires buttons with pictures and sound. Despite my efforts, the sound feature is not functioning properly in Chrome and Firefox. I am still learning and would like to know how to toggle the sound on and of ...

htmltypescriptbuttonaudiopug

Guide on setting a session variable upon clicking an <a> hyperlink

Having this issue where I need to set a session variable when clicking on a regular link like: <a href="home" name="home">home</a> From my research, it seems PHP cannot capture the click event in order to set a session variable. I've he ...

phphtmlajaxsession

What is the best way to effectively personalize my Bootstrap variables using SASS?

After creating a web page and adding Bootstrap styling, I attempted to customize the Bootstrap variables, but encountered an issue where it did not seem to work despite no errors being displayed. I followed a tutorial on YouTube meticulously, but to no av ...

reactjstypescriptbootstrap-5

Ways to display a div based on the value quantity

Is it possible to display a div based on the value provided? Check out my code on Fiddle! jQuery(function () { jQuery('#btn_test').click(function () { $(this).parent().children('#test_inner').slideToggle('500' ...

jqueryhtmlcss

Displaying error or success messages within the same webpage

This is my first time reaching out here because I couldn't resolve the issue on my own. Please keep in mind that I am relatively new to Spring and not very experienced in Java and coding in general. I am working on creating a Server application using ...

htmlspringparametersthymeleaf

What is the best way to display a segment of an SVG on a Canvas element?

Main Issue: The main objective here is to display a specific part of an SVG image on a fixed size Canvas element within a web page. Approach I Tried: After considering various options, such as using CanVG, I thought about utilizing the viewBox attribute ...

javascripthtmlcanvassvg

Conceal the Material UI Grid element and allow the following Grid Item to smoothly transition into its place

I need to create a form where certain Textfields must be hidden. However, when I attempt to hide a Grid item within a Grid container using display: none, the next grid item does not move to take its place. Instead, it creates whitespace. Is there a soluti ...

cssreactjsmaterial-ui

Encourage the user to download and install the ActiveX/.Net Class Library directly from their browser

When I developed a .NET Class Library project that interacts with mshtml.HTMLDocument from JavaScript, everything functioned correctly on my local machine after adjusting permissions in .NET Configuration for Trusted Sites to grant Full access. However, I ...

.nethtmlpermissionsactivexprompt

What is the best way to customize the color of the border and icon in an outlined MaterialUI input field

I'm a newcomer to materialUI and I have a question regarding customizing an outlined input field with an icon. Due to my dark background, I need the icon, border, and text color to be lighter, such as grey. Can someone please advise on the materialUI ...

cssreactjsmaterial-ui

Artwork - Circular design disappears without warning

While working on a clock project purely for enjoyment, I noticed that the minute arc disappears from the canvas as soon as a new minute begins. Any idea why this is happening? Check out the clock in action: https://jsfiddle.net/y0bson6f/ HTML <canvas ...

javascriptcsshtmlcanvas

Issue with different domains causes GET requests to be changed to OPTIONS requests

In my recent request and response interaction, I encountered an issue with the Access Allow Control Origin being set to *. Remote Address:xx.xxx.xxx.xxx:xx Request URL:http://api-test.example.com/api/v1/sample Request Method:OPTIONS Status Code:405 Method ...

jqueryajaxhtmljquery-mobilecors

Showing identification on the drop-down list

Within my dropdown menu setup, I am aiming to achieve a specific functionality. When the user clicks on sub menu, I want the title of sub menu to display in the Menu space as illustrated below. What steps can be taken to accomplish this? UPDATE: After fu ...

jquerycss

Use JavaScript to switch the h1 title when selecting an option from the dropdown menu

As a beginner in coding, I am struggling to find a solution using an if statement for this particular problem. Although I can achieve the desired result with HTML code and options, this time I need to use arrays and an if function. My goal is to create a ...

javascripthtml

What is the best way to make a scrollable `div` that is the same height as my `iframe` with Material-UI?

I am developing a responsive Video Player with an accompanying playlist designed for Desktop and larger screens. The playlist has the potential to contain a large number of items, possibly in the hundreds. To view my progress so far, please visit https:// ...

htmlcssreactjsresponsive-designmaterial-ui

Toggle the selection of a div by clicking a button in AngularJS with a toggle function

I have several div elements on a webpage. Each div contains a button! When the button is clicked for the first time: The border color of the div will change to blue (indicating the div is now selected). The "ok" button will be hidden (leaving only t ...

javascripthtmlcssangularjs

Different position of navigation list-style visible in Chrome browser

Currently, I am working on a website where the main menu navigation is designed using the list-style property to separate each menu item. In Firefox, everything appears as intended with small circles between each menu item. However, when viewed in Chrome, ...

cssmenu