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

Issues with Iframe { height:70%;} in Internet Explorer 8 and Firefox causing display problems

In my website's design, I have a div structure with an iframe to load pages. The header remains at the top seamlessly The footer stays at the bottom perfectly The content is positioned in the middle flawlessly However, the iframe does not stret ...

htmlasp.netcssiframe

Traversing JSON Data using Vanilla JavaScript to dynamically fill a specified amount of articles in an HTML page

Here is the code along with my explanation and questions: I'm utilizing myjson.com to create 12 'results'. These results represent 12 clients, each with different sets of data. For instance, Client 1: First Name - James, Address - 1234 Ma ...

javascripthtmlcssajaxapi

Decrease the font size of text using intervals in CSS

I'm facing a challenge where I need to decrease the font size by 10% every 2 seconds. <div class="shrink"> text </div> .shrink{ transition: 2s linear all; font-size : 20px; } Is there a way to achieve this using only CSS? ...

css

If the iframe's CSS source is updated, the parent's CSS source will also change

I'm currently working on a unique school project that involves creating multiple CSS styles for different views. <link rel="stylesheet" type="text/css" href="css/main.css" title="main" media="screen"> <link rel="stylesheet" type="text/css" h ...

javascriptjqueryhtmlcssiframe

Enhance your textbox with more detailed descriptions than just displaying NaN

I am working on a form that includes select boxes. If a user selects an option from "Convert From" and another option from "Convert To" but does not enter a number in the input field, instead of displaying NaN in the result text box, I would like to show ...

javascriptjquerycss

Clarification: Javascript to Toggle Visibility of Divs

There was a similar question that partially solved my issue, but I'm wondering if using class or id NAMES instead of ul li - such as .menu, #menu, etc. would work in this scenario. CSS: div { display:none; background:red; width:200px; height:200px; } ...

javascriptcsshtml

Bootbox Dialog Form

Looking to implement a functionality where a Bootbox dialog pops up with an "OK" button. Upon clicking the "OK" button, it should initiate a POST request, sending back the ID of the message to acknowledge that the user has read it. The Bootbox dialog fun ...

javascripttwitter-bootstrapbootbox

Activating a tab using a JS call in Bootstrap with the data-toggle attribute

My JSP page is using bootstrap's data-toggle="tab" functionality to display tabs. When the page loads, one tab is made active by default. <ul class="nav st-nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">First Ta ...

javascriptjquerytwitter-bootstraphighcharts

Securing containers with CSS styling

I'm currently working on a website and I've encountered an issue with positioning. Within the content section, I have two main text boxes - one in the top left corner and one in the bottom right corner. However, when the browser window is resized ...

csspositioncss-position

PHP - designate a separate folder for script and style resources

There seems to have been some discussion about this issue before, but I am struggling to find a solution. I want to add css, js, and asset files to my php framework. However, when calling these files, the path must always match the folder structure like t ...

javaphpcssassets

Generating an HTML hyperlink to trigger a button click event on another page

After implementing the code snippet below, I successfully managed to create a stylish Link with parameters that directs users to a specific page: <style> .fancy-link{ color: #FFFFFF; text-decoration: none; transition: ...

htmlcss

In order to showcase an image ahead of another (stay tuned),

Help! I'm facing a dilemma here. I have an abundance of adorable animal images with unique facial expressions, but there's one problem - the eyes are hidden! I desperately want to showcase those captivating eyes. This is what my code looks like. ...

htmlcss

"Is an Ionic Top Navigation Bar the best choice for your

Creating an Ionic Top Navigation Bar Greetings! I am facing some challenges while trying to implement a Top Navigation Bar in my Ionic Project. Despite the lack of documentation on this specific topic, I am struggling to make it work properly. Your as ...

htmlcssionic-framework

Issue with bootstrap modal new line character not functioning properly

Is there a correct way to insert a new line for content in a modal? I have this simple string: 'Please check the Apple and/or \nOrange Folder checkbox to start program.' I placed the '\n' newline character before "Orange," e ...

twitter-bootstrapangulartypescriptmodal-dialogbootstrap-modal

Tips for keeping the main section from scrolling while scrolling through the side navigation

Within my Angular application, I have implemented a sidenav and a main section. My desired behavior is to prevent any scrolling in the main section while I am scrolling in the sidenav, similar to the functionality seen on the Angular Material Design docume ...

javascriptcssangularjs

The Safari browser restricts interaction with password inputs but allows interaction with other types of input fields

My password input field is styled like this: <input class="genericButton" id="login-password" type="password" name ="password" placeholder="Password"> While everything functions correctly in Chrome, I encounter an issue with Safari. When I try to i ...

javascripthtmlcsssafaripasswords

What is the best way to make background SVGs tile seamlessly within the cells of a table?

I am currently dealing with a series of table cells that are filled with various colors and styles. The issue I'm facing is getting the styles to tile properly, as they are not seamlessly continuing from one cell to the next even if they share the sam ...

htmlcsssvg

In order to achieve a sliding effect for the second div, it can be programmed to

Currently, I am working on implementing hide and show functionality in my project. However, I have come across a bug in my code that I need assistance with. When clicking on the first div element, the content opens from bottom to top instead of the desired ...

javascripthtmljquerycssjquery-events

Does jQuery's click event not successfully hide an element on Internet Explorer?

In my dropdown menu, I have the following options: <div class="my_div"> <select name="selection" id="select_id"> <option value="0">A</option> <option value="5">B</option> ...

jqueryhtmlcss

When scrolling back to the top of the page, the data-spy feature does not re-highlight the "Home" anchor

After experimenting with Data-spy to change the active anchor while scrolling, I encountered an issue. Upon scrolling back up to the top of the page from the about section, the "Home" anchor failed to re-activate. How can this be fixed? I attempted to rem ...

javascripthtmlcsstwitter-bootstrapscroll