Ensure that the collapsing toggler and the textbox are aligned on the same line

As part of my project, I am developing a bootstrap5 website that features a search form. I am facing an issue where I am unable to align the form text box labeled "search by country" vertically on the same line as the collapsible hamburger toggler. I have tried various solutions like setting the display to inline and d-inline-flex, but they did not work. Currently, I am attempting to place the text box on the same line as the hamburger icon. Here is an example of what I am trying to achieve: https://i.sstatic.net/6JmPf.jpg 

<!Doctype html>
<html>
<head>

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa9895958e898e889b8abacfd4cad4c8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c3cfd2c5e0928e998e92">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d06010600130232475c425c40">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body>
<div class="container mt-5">
  <div class="row d-flex justify-content-center">
    <div class="col-md-10 bg-white search form">
    <form method="post" action="">

      <div class="col-md-2 p-3  py-4">                
        <a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="advanced">
Hamburger
      </a>

        </div>
          <div class="col-md-4">
           <input type="text" class="form-control" placeholder="Search by Country">  
    </div>     
        <div class="collapse p-3" id="collapseExample">
      
        <div class="row">
        <div class="col-md-4">
          <input type="text" placeholder="Property ID" class="form-control">  
        </div>
        <div class="col-md-4">
          <input type="text" class="form-control" placeholder="Search by MAP"> 
        </div>
         <div class="col-md-4">
           <input type="text" class="form-control" placeholder="Search by Country">  
        </div>        
      </div>
    </div>     
     
 </div>    

</form>
</div>          
</div>
</div>





<!-- Bootstrap5 JavaScript-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f89b978a9db8cad6c1d6ca">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
   
      
  </body>
</html>

htmlcssformsbootstrap-5

Answer №1

You can use display: flex on the form to position the textbox next to the hamburger icon (Try running the snippet below).

<!Doctype html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4d40405b5c5b5d4e5f6f1a011f011d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbfb3aeb99ceef2e5f2ee">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f5f8f8e3e4e3e5f6e7d7a2b9a7b9a5">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body>
<div class="container mt-5">
  <div class="row d-flex justify-content-center">
    <div class="col-md-10 bg-white search form">
    <form class="d-flex align-items-center" method="post" action="">
      <div class="col-md-2 p-3  py-4">                
        <a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="advanced">
Hamburger
      </a>
        </div>
          <div class="col-md-4">
           <input type="text" class="form-control" placeholder="Search by Country">  
    </div>     
        <div class="collapse p-3" id="collapseExample">
      
        <div class="row">
        <div class="col-md-4">
          <input type="text" placeholder="Property ID" class="form-control">  
        </div>
        <div class="col-md-4">
          <input type="text" class="form-control" placeholder="Search by MAP"> 
        </div>
         <div class="col-md-4">
           <input type="text" class="form-control" placeholder="Search by Country">  
        </div>        
      </div>
    </div>     
     
 </div>    
</form>
</div>          
</div>
</div>
<!-- Bootstrap5 JavaScript-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdaea2bfa88dffe3f4e3ff">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
   </body>
</html>

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

Uploaded images from mobile devices appear to be rotated when viewed on desktop browsers like Chrome and Firefox

I'm facing a strange issue where an image uploaded from a mobile device to my website appears rotated on Chrome and Firefox when viewed on a desktop. However, it displays correctly on mobile browsers like Chrome Mobile and Safari Mobile. It seems tha ...

javascripthtmlcssreactjs

Proper alignment of div elements using Bootstrap

I am attempting to align 2 div elements side by side using Bootstrap code: <div class='col-12'> <div class='row'> <div class='col-6'> </div> <div class='col-6&a ...

htmlcssbootstrap-4

The text consistently remains positioned to the right of my image

Photo Gallery Title Issue I'm working on a photo gallery project where I want to add titles underneath each image. However, I'm facing a problem where the title is appearing next to the image instead of below it. You can see the issue in this sc ...

htmlcssphoto-gallery

Strange outcomes observed with array created from HTML code

html : <input type="text" name="ps[part1['test']]" value="testing multiple array"> Current result : [ps] => Array ( [part1['test'] => testing multiple array ) Expecting result : [ps] => Array ( ...

phphtmlarrays

The synchronization issue between ng-class and animation

I'm experiencing a strange issue with ng-class and suspect that it may be related to a race condition. Here is the example on Plunker: example Below is the relevant JavaScript code: self.slideLeft = function() { if (self.end_index < se ...

javascripthtmlcssangularjs

Unable to implement a design on a button during its click event

I successfully implemented a dynamic button in HTML5 and Javascript. The button has a click event assigned to it, so when clicked, its content and background color are supposed to change. However, while the content changes correctly, the background color d ...

htmlcssdom

Is there a way to use ajax to dynamically monitor the presence of a file in real-time?

Is there a way to automatically observe the status of a file using ajax without having to manually refresh it with a button? ...

phpjavascripthtmlajax

Clicking on the image in an owl carousel slider does not trigger the onsen template page to load

I am experiencing an issue with my owl carousel slider while calling an API for page content on image click. I have implemented an onsen template page using ng-click on image, but it only works for the first image click. Subsequent images do not call the o ...

javascriptjqueryhtmlangularjsonsen-ui

creating an interactive table with the help of the useState hook

I'm new to JavaScipt and ReactJS, so I have a question that may seem obvious but I can't seem to figure it out. I am attempting to display my array in a table using useState, but currently I can only show the header. Additionally, if anyone know ...

javascripthtmlreactjs

Should buttons be wrapped based on the text of the link?

I'm struggling to include buttons in my design but I can't seem to achieve the desired outcome. The image below illustrates what I am attempting to create but have been unsuccessful in replicating: https://i.sstatic.net/CnYLV.png However, the ...

htmlcss

Looking for guidance on integrating Forms with VueX and script setup? Are you utilizing v-model in your implementation?

UPDATE: I'm contemplating whether or not to abandon VueX entirely due to its outdated status, with Pinia being the preferred choice nowadays. Can someone confirm this? https://stackblitz.com/edit/vue-script-setup-with-vuex-hmrk5d?file=src/store.ts ...

javascripthtmlvue.jsvuex

Launch Internet Explorer and input variable values (such as ScriptEngineMinorVersion)

I am looking to create a script that can open a file and inject values into it. Here is a basic example: Set WshShell = WScript.CreateObject("WScript.Shell") Return = WshShell.Run("iexplore.exe google.com", 1) However, I also need to modify some variab ...

javascripthtmlvbscriptinternet-explorer-9

Is it possible to nest Twig variables within other Twig variables?

While developing a website for a reggae backing band, I encountered an issue on the 'booking' page where I have a form. Upon submitting the form, I conduct checks to ensure all required fields are filled in and to verify if any errors occurred. ...

phphtmlsymfonytwig

Discovering the correct element and typing for an HTML attribute through JavaScript

We are currently working on test automation and I am looking for a way to identify the Element and Type associated with it within an html (Data-qa) attribute. For example, when looping through, the Element is identified as input and the type is radio. < ...

javascripthtmlselenium

JavaScript animation is not functioning as expected

I created a div with the id of "cen" and gave it a height and width of 50px. $(document).ready(function() { $("#cen").animate({ height: 500px, width: "500px", }, 5000, function() { // Animation complete. }); }); Unfort ...

javascriptjqueryhtmlcssjquery-animate

Tips for retrieving return values from an ajax form submission

When using ajax to submit a form, I encountered an issue where the process would halt at api.php and not return to the ajax success. Below is the code snippet: <form method="POST" id="form_1" action="../api.php" enctype="multipart/form-data" novalidate ...

javascriptphpjqueryajaxforms

Why is my navbar not functioning properly with Bootstrap 5 and HTML?

My navigation bar suddenly stopped working and now my background image, text on the background image, and navigation have all turned white after I added links to different hrefs. I'm also using bootstrap 5. The only thing I can see is from my id citat ...

htmlbootstrap-5

"Encountering a glitch with masterpage.cs in Aspx.net and C#

Currently facing a perplexing issue while developing a website using aspx.net and c#. The following code snippet is on my masterpage: protected void Page_Load(object sender, EventArgs e) { if (HttpContext.Current.Request.Url.AbsolutePath == "/ ...

c#cssasp.net

Unable to establish a connection to 'X' as it is not recognized as a valid property

Trying to implement a Tinder-like swiping feature in my Angular project, but encountering an error stating that the property parentSubject is not recognized within my card component. Despite using the @Input() annotation for the property, it still fails to ...

htmlangulartypescript

Generating forms dynamically using JSON data

Currently, I'm using three nested ng-repeat directives to display multiple questions and their corresponding answers. Everything is displaying correctly so far, but now I need to create a form to save the answers. What would be the best approach to ac ...

javascriptangularjsjsonforms