Tips for aligning a text box and button side by side in HTML

Can someone help me? I am trying to keep the text box and button in the same line, but they keep appearing on separate lines:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71131e1e05020503100131455f445f42">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
   <div>
<div style="float:left">
    <button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
    <button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
    <form asp-controller="Expense" asp-action="Index" class="form-group">
        <div class="col-sm-6">
            <input class="form-control" type="text" name="SearchString" placeholder="Search">
            <button type="submit" class="btn btn-default btn-info">Filter</button>
        </div>
       
    </form>
</div>
</div>

htmlcssbootstrap-4

Answer №1

To create a flexible layout for the parent element containing the input and button elements, I utilized flexbox with the help of Bootstrap utility classes. Furthermore, I applied a small margin to the input element using another convenient Bootstrap utility class.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1939e9e858285839081b1c5dfc4dfc2">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div>
  <div style="float:left">
    <button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
    <button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
  </div>
  <div style="float:right; width:40%;">
    <form asp-controller="Expense" asp-action="Index" class="form-group">
      <div class="col-sm-12 d-flex">
        <input class="form-control mr-1" type="text" name="SearchString" placeholder="Search">
        <button type="submit" class="btn btn-default btn-info">Filter</button>
      </div>
    </form>
  </div>
</div>

Answer №2

If you're looking to achieve your desired result, consider implementing the following code snippet:

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
      <button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
    </div>

    <form asp-controller="Expense" asp-action="Index" class="form-group col-sm-4 d-flex">
      <input class="form-control" type="text" name="SearchString" placeholder="Search">
      <button type="submit" class="btn btn-default btn-info">Filter</button>
    </form>
  </div>
</div>

Answer №3

The "Filter" button is positioned in the second line due to Bootstrap's form-control class having display: block and width: 100%. To modify this, the display: inline-block property should be altered and the width reduced to 50%.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8eece1e1fafdfafceffecebaa0bba0bd">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div>
  <div style="float:left">
    <button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
    <button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
  </div>
  <div style="float:right; width:40%;">
    <form asp-controller="Expense" asp-action="Index" class="form-group">
      <div class="col-sm-8">
        <input class="form-control" type="text" name="SearchString" placeholder="Search" style="display: inline-block; width: 50%;">
        <button type="submit" class="btn btn-default btn-info">Filter</button>
      </div>
    </form>
  </div>
</div>

Answer №4

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div>
   <div style="float:left">
     <button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
     <button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
   </div>
   <div style="float:right; width:40%;">
     <form asp-controller="Expense" asp-action="Index" class="form-group">
        <div class="col-sm-8">
           <div class="d-flex">
             <input class="form-control" type="text" name="SearchString" placeholder="Search">
             <button type="submit" class="btn btn-default btn-info ml-2">Filter</button>
           </div>
         </div>
     </form>
   </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

"Efficiently handle online submissions: Use Django to submit a form and instantly display the outcome

I have an urgent task to develop a web page where users can input data, and the backend will perform calculations and display the result below the input field on the same page (similar to checking online air ticket prices). I am new to Django and HTML. Be ...

htmljquerydjangoajaxforms

When props are used, the styles of styled components are overwritten

Here are some styled components that I have: const Box1 = styled.div` // some styles `; const Box2 = styled.div` background-color: ${({ someProp }) => someProp ? "cyan" : "magenta"}; ${Box1} > & { color: ${({ someP ...

javascripthtmlcssreactjsstyled-components

Embedding an Inline Frame on Chrome while preserving Internet Explorer preferences

I am currently facing a situation where my webpage looks different on Internet Explorer compared to Chrome. I am considering loading the webpage within an iframe, but I want it to render as it does in Internet Explorer regardless of the browser being use ...

javascriptjqueryhtmliframe

Is there a way to expand the navbar to full width?

I am currently designing a layout that includes a side menu and a top navbar using Bootstrap 4. My goal is to have the side menu extend from top to bottom and the top navbar stretch from the side menu to the right edge of the screen. How can I achieve th ...

htmlcsstwitter-bootstrap

What is the use of static width in col-xl-* (Bootstrap 4)?

Is there a way to prevent my col-xl-* from growing too large on larger monitors? I've noticed that when I view it on my laptop (1280 width) and desktop (1920), the col-xl setting is either too big on the desktop or too small on the laptop. <div c ...

htmlcsstwitter-bootstrapbootstrap-4grid-system

Rendering basic HTML in a React component

As I experiment with the react-draft-wysiwyg editor, my progress has been steady. However, I have hit a roadblock when it comes to displaying the output of the editor. For instance, let's say the body is the output of the wysiwyg editor: function Sh ...

javascripthtmlreactjs

How do I implement a dynamic input field in Angular 9 to retrieve data from a list or array?

I'm looking to extract all the strings from the Assignes array, which is a property of the Atm object, and populate dynamic input fields with each string. Users should be able to update or delete these strings individually. What approach can I take us ...

htmlangulartypescript

Leveraging HTML5 Semantic Tags in Harmony with the BEM Approach

Would it be beneficial to utilize HTML5 semantic elements alongside BEM? For example, is <header class="header header--full"> <nav class="header__nav">...</nav> </header> Acceptable or should I opt for divs instead? ...

htmlcssbem

Trouble with Selecting an un-ordered list menu item in Selenium Java's side bar navigation

Exploring a different approach to selecting a menu item in the sidebar navigation within an iframe. After switching to the iframe, I am attempting to choose a specific item from the side menu to display its respective navigational items for selection. Thes ...

javahtmlselenium

What is the best way to dynamically center text within a circle shape?

My dilemma lies in the design of a circular div that contains random text. While I am able to manually align the text inside the circle for static content, I seek a dynamic solution. Is there an automated way to adjust the size of the circle based on the t ...

javascriptjqueryhtmlcss

Can you explain the process for moving a div to align with another div?

Having just started with HTML and jQuery, I am looking to create three draggable divs stacked one below the other - div1, div2, and so on. I want to drag div1 into the position of div3, changing the order to div3, div1, div2. How can this be achieved? Ple ...

javascriptjqueryhtmlcss

overflow with a height of 100%

I want to add vertical scroll bars to my left and right columns without setting the height to 100%. How can I achieve this scrolling effect without specifying height: 100%? html,body{height:100%;} .row > .sidebar-fixed { position: relative; to ...

htmlcss

disable full page scrolling on iOS devices

Can you achieve elastic scrolling for a single absolutely positioned div in Mobile Safari without causing the entire page to move up and down? Check out this basic example that illustrates the problem: <!doctype html> <html> <head> ...

javascripthtmlioscssmobile-safari

Tips for showcasing the button label on a different page upon clicking the button

I need help with a functionality where the name of a button clicked on one page is displayed on another page. Here's an example: <a href="#" class="btn btn-danger btn-lg btn-block"> <?php echo $sql->name; ?></a> Currently, echo ...

javascriptphphtmlmysql

Unlocking the power of HTML tags in Selenium WebDriver: accessing elements like a pro

I'm working with this HTML snippet. <span class="ng-binding" ng-bind="::result.display">All Sector ETFs</span> <span class="ng-binding" ng-bind="::result.display">China Macro Assets</span> <span class="ng-binding" ng-bind ...

htmlseleniumselenium-webdriver

JavaScript - Relocating the DIV Scrollbar to the Top Upon iFrame SRC Modification

re: I have created a user-friendly website for comparing different potential "expat" cities. Each city has links (target=iframe) for cost of living data, Wikipedia, expat blogs, climate information, and Google Maps. In the left column, there are control ...

javascripthtmliframescrollscrolltop

I'm trying to create a horizontal list using ng-repeat but something isn't quite right. Can anyone help me figure out

Feeling a bit lost after staring at this code for what seems like an eternity. I'm trying to create a horizontal list of 2 image thumbnails within a modal using Angular's ng-repeat. Here's the HTML snippet: <div class="modal-body"> ...

javascripthtmlcssangularjsangularjs-ng-repeat

Implementing various style guidelines for distinct elements

Currently, I am struggling with organizing my unordered list elements to be stacked side by side. The style rule I have been using is as follows: #slide ul,li{ float:left; list-style-type:none; } Now, I am attempting to introduce another unordered list t ...

htmlcsscss-selectorshtml-lists

How can JavaScript Regular Expressions be used for Form Validation?

For my registration form, I am including fields such as userid, name, email, password, confirm password, and affiliation. Using regular expressions in JavaScript, I am validating these fields. I am attempting to display any validation errors within the for ...

javascripthtmlbootstrap-4

Having trouble with the functionality of Angular 2 filter and toggle features?

I recently developed a hamburger menu with a toggle function to display subcategories. Everything was working smoothly until I applied a filter. Once I search for a category using the filter, the toggle function stops working. Here is a snippet of my HTML ...

javascripthtmlcssangular