Alignment of Bootstrap input groups and buttons

I am looking to have the input group aligned on the left side and the "Add New" button aligned on the right side of the row.

<div class="row">
  <div class="input-group col-sm-6">        
    <input type="text" class="form-control" placeholder="Search by a substring in good's name.."></input>
    <span class="input-group-btn">
      <button class="btn btn-default" type="button" onclick="filter()">Search</button>
    </span>
  </div>

  <div class="col-sm-6">          
    <button class="btn btn-default text-right" type="button" onclick="addNew()">Add new</button>
  </div>
</div>

To see this in action, visit: Bootply

Despite being in the same row, the input group and the "Add New" button appear stacked vertically.

csstwitter-bootstrapbuttoninputalignment

Answer №1

<div class="row">
    <div class="col-lg-6">
        <div class="input-group">        
          <input type="text" class="form-control" placeholder="Search by a substring in good's name..">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button" onclick="filter()">Search</button> 
          </span>
        </div>
    </div>  

    <div class="col-lg-6">          
      <button class="btn btn-default" type="button" onclick="addNew()">Add new</button>
    </div>
  </div>

Separete the col-lg-6 and input-group from the div

Bootply: http://www.bootply.com/W8ao9A0a4r

Answer №2

Take a look below for the updated layout. I've repositioned the add new button code so that it now sits beside your search button. The input field is on the left, with the add new button placed directly to its right. If you prefer the add new button to be flush against the right side of the browser window, just give me a heads up.

<div class="actions row">
        <div class="input-group col-sm-6">        
          <input type="text" class="form-control" placeholder="Search by a substring in good's name..">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button" onclick="filter()">Search</button> 

          </span>
        </div>

        <div class="col-sm-6">          
          <button class="btn btn-default text-right" type="button" style="float:right; margin-right:-15px;" onclick="addNew()">Add new</button>
        </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

Circular CSS menu

What I'm Trying to Achieve: I am interested in developing a unique radial menu that includes interactive elements, such as the central image and the surrounding sections. It is imperative that the solution is compatible across all browsers. The examp ...

htmlcssnavigationcss-shapes

Modifying the font style within an ePub document can affect the page count displayed in a UIWebView

Currently in the development phase of my epubReader app. Utilizing CSS to customize the font style within UIWebView, however encountering a challenge with the fixed font size causing fluctuations in the number of pages when changing the font style. Seeki ...

javascripthtmlioscssxhtml

Learn how to use Bootstrap 4 to selectively filter through a list by their data attribute values

I am currently working with a PHP form that looks like this: <form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search"> <label class="assistive-text" for="s"> &l ...

twitter-bootstrapbootstrap-4

Unexpected Display Issue with Angular Select Option

My goal is to implement the Select-Option Input as depicted in the first image link here: https://i.sstatic.net/SVT8R.png However, my current output looks different and I suspect that there may be a conflict between two CSS libraries. It's worth noti ...

cssangularbootstrap-4angular-materialbootstrap-5

Steps to creating an elliptical border using CSS

Is there a way to apply CSS styles specifically to the left border of a div to achieve an elliptical shape, while keeping other borders normal? I've managed to create a semi-ellipse with the following code, but the rest of the border remains unchanged ...

javascripthtmlcss

Arrange elements within a division when the division splits into two rows

Currently in my setup: I have a navigation bar with a group of buttons located on the right-hand side. When the navbar is reduced to a smaller size, like on a smartphone, the two buttons get split across 2 rows within the div. In this state, I'm ai ...

htmlcssbootstrap-5

Feeling lost on the intricacies of threejs functionality

I have incorporated a sample code into this html/css document that utilizes a script to generate a 3D cube using three.js. Upon opening the HTML file, I am presented with a blank page in chrome displaying only, "canvas { width: 100%; height: 100% }" Belo ...

htmlcssthree.js3d

Is there a way to use JQuery to make one button trigger distinct actions in two different divs?

For instance: Press a button - one div flies off the screen while another div flies in. Press the button again - Same div flies out, other div returns. I'm completely new to Javascript/JQuery so any assistance would be highly appreciated! Thank you ...

javascriptjqueryhtmlcss

Achieving consistent sizing for React-Bootstrap cards: A guide

In my React app, I am utilizing React-bootstrap and specifically the Card & CardGroup components. I need assistance in ensuring that all the cards have the same height. JSX component: <Card style={{flex: 1}} className="card"> ...

cssreactjssingle-page-applicationreact-bootstrapportfolio

Incorporate a smooth infinite scroll feature in a CSS carousel that seamlessly loops without

Looking for a solution to the carousel jerk issue when it reaches the end of the loop? Is there a way to seamlessly loop start without any noticeable interruptions? Here is the code in question. Avoiding the use of JavaScript, is there a method to achieve ...

htmlcsscss-transitions

Adjust div height to match the dynamic height of an image using jQuery

I'm facing an issue with my image setup. It has a width set to 100% and a min-width of 1024px, but I can't seem to get the 'shadow' div to stay on top of it as the window size changes. The height of the shadow div also needs to match th ...

javascriptjqueryimagecss

Adjust the background to scroll to the bottom of the image first and then change it to be fixed

Here is the code I have written: body{ margin:0; padding:0; line-height: 1.5em; background-image: url(http://fehlbelichtet.stefanwensing.de/wp-content/uploads/sites/6/2016/04/alte-strasse-endlos.jpg); background-repeat:no-repeat; background-attachment: ...

htmlcss

Floating multiple block-level elements within an <li> tag in HTML allows for greater control over the layout and

I am facing a complex issue that requires attention. Let me explain the situation: There is an unordered list consisting of list items displayed vertically with alternating background colors, all having the same width within a fixed-width div. Some list i ...

htmlcssblockhtml-listsfixed-width

Is the text alignment off?

I've been immersed in creating a website, but I encountered an issue for which I can't seem to find the solution. Check out my text alignment here (test) - it's not aligned all the way to the left of the content Here is the HTML code: < ...

htmlcss

Shifting and positioning the card to the center in a React application

I am currently constructing a React page to display prices. To achieve this, I have created a Card element where all the data will be placed and reused. Here is how it appears at the moment: https://i.stack.imgur.com/iOroS.png Please disregard the red b ...

javascripthtmlcssreactjs

Find a solution to splitting the area in half, with one side designated for the icon and the other for text

I'm currently working on a code to assign tasks to employees, and I have created a login form with multiple text fields, each accompanied by an icon. However, there seems to be a layout issue as shown in the image. There is a distinct gap between the ...

cssreactjsmaterial-ui

Troubleshooting a Minimum Width Problem in HTML and CSS

Having trouble with setting a minimum width for a specific section. When the browser size is smaller than the set minimum width, the background color/image defined by CSS does not expand beyond the window size. Essentially, when scrolling horizontally to v ...

htmlcss

Switching icon images using JQuery based on state changes

I'm attempting to switch the background image of my webpage's "body" element when the user toggles between playing and pausing music icons. This is what the CSS for the "body" element looks like: body { background: url('https://s3-us-wes ...

javascriptjqueryhtmlcss

Combine less files in webpack to generate a single minified CSS output file

Can webpack be used to combine multiple less files into one minified CSS file? I'm having trouble setting different output paths for my files. How can I make my CSS file output to './assets/stylesheets/bundle/' instead of './assets/ja ...

javascriptcsswebpack

Building a stack of DIVs, some with fixed heights and others without, potentially using only CSS

Hello everyone! I am having trouble deciding on the best approach to achieve a layout like the one below: +------------------------------------------------------------+ | div 0 , varying height +---------------------------------------------------------- ...

csshtmllayoutfixed