Achieving alignment between a button and input field using Bootstrap CSS

Struggling to align my buttons next to the inputs in my project, particularly due to my inexperience with bootstrap CSS and CSS in general. Could someone please point me in the right direction?

Link to the issue

Unfortunately, my Search and New buttons are not aligning as intended. Any assistance will be highly appreciated.

What I've tried so far: https://i.sstatic.net/QvaxH.png

Desired outcome: https://i.sstatic.net/vXKkJ.png

Here's the HTML code:

<div class="row">
    <div class="col-md-1"></div>

    <div class="col-xs-2">
        <label for="ItemID">ITEM ID</label>
        <input class="form-control" type="text" name="ItemID" id="ItemID" /> 
    </div>

    <div class="col-xs-1">
        <input class="btn btn-default" type="button" name="Search" id="Search" value="Search">
    </div>

    <div class="col-xs-2">
        <label for="Qty">QTY</label>
        <select name="Qty" id="Qty" class="form-control">
            <option value="1" selected>1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
        </select>

    </div>
</div>

<div class="row">
    <div class="col-md-1"></div>

    <div class="col-xs-4">
        <label for="Dealers"></label>
        <select name="Dealers" id="Dealers" class="form-control">
            <option value="" selected></option>
            <option value="1">1</option>
        </select>
    </div>

    <input class="btn btn-default" type="button" name="New" value="NEW">

</div>

<div class="row">
    <div class="col-md-1"></div>

    <input class="btn btn-default" type="button" name="Report" value="REPORT">

    <input class="btn btn-default" type="button" name="PrintLabels" value="PRINT LABELS">

    <input class="btn btn-default" type="button" name="LogItIn" value="LOG IT IN">

    <input class="btn btn-default" type="button" name="CompleteIt" value="COMPLETE IT">

    <input class="btn btn-default" type="button" name="Exit" value="EXIT">

</div>

CSS snippet:

#ItemID, #Search { display: inline-block; }
htmlcsstwitter-bootstrap

Answer №1

Consider exploring the Input Groups feature for integrating a button into an input field.

#btn-inputs {
  text-align: center;
  margin-top: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <label for="ItemID">ITEM ID</label>
      <div class="input-group">
        <input type="text" class="form-control" name="ItemID" id="ItemID"> <span class="input-group-btn">
        <input class="btn btn-default" type="button" name="Search" id="Search" value="Search"/>
      </span>

      </div>
      <!-- /input-group -->
    </div>
    <!-- /.col-lg-6 -->
    <div class="col-xs-6">
      <label for="Qty">QTY</label>
      <select name="Qty" id="Qty" class="form-control">
        <option value="1" selected>1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <label for="Dealers"></label>
      <div class="input-group">
        <select name="Dealers" id="Dealers" class="form-control">
          <option value="" selected></option>
          <option value="1">1</option>
        </select> <span class="input-group-btn">
        <input class="btn btn-default" type="button"  name="New" value="NEW" />
      </span>

      </div>
      <!-- /input-group -->
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12" id="btn-inputs">
      <div class="btn-group" role="group" aria-label="...">
        <input class="btn btn-default" type="button" name="Report" value="REPORT">
        <input class="btn btn-default" type="button" name="PrintLabels" value="PRINT LABELS">
        <input class="btn btn-default" type="button" name="LogItIn" value="LOG IT IN">
        <input class="btn btn-default" type="button" name="CompleteIt" value="COMPLETE IT">
        <input class="btn btn-default" type="button" name="Exit" value="EXIT">
      </div>
    </div>
  </div>
</div>

Answer №2

All form elements should be enclosed within a col-* class for proper alignment.

For instance, make sure the section containing your 'New' button looks like this:

<div class="row">
  <div class="col-md-1"></div>

    <div class="col-xs-4">
      <label for="Dealers">Dealers</label>
        <select name="Dealers" id="Dealers" class="form-control">
            <option value="" selected></option>
            <option value="1">1</option>
        </select>
    </div>
    <div class="col-xs-4">
      <label></label>
      <input class="btn btn-default" type="button" name="New" value="NEW">
    </div>

</div>

It's important to note that you should avoid using the form-inline class on your form tag as it may cause labels to align inline with input fields.

Answer №3

Check out this example >> http://jsfiddle.net/kwxm3n9n/

To position columns like col--(s), you can use col-heading and col-bottom.

<div class="container">
  <div class="col-sm-9"></div> <<-- on the left 
  <div class="col-sm-3"></div> <<-- on the right
</div>

Now, let's create the other forms.

<div class="col-sm-9">
  <div class="row"></div> <<-- first row (item, search, qty)
  <div class="row"></div> <<-- for select
  <div class="row"></div> <<-- for tables
  <div class="row"></div> <<-- for buttons
</div>

Use rows to build the right side in the same way.

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

Issue: The system does not recognize 'cleancss' as an internal or external command

After successfully installing clean-css via npm command line, I was eager to start using it to concatenate and minify some css files. However, my excitement quickly turned to frustration when I encountered this error: 'cleancss' is not recognize ...

cssnode.jscommand-linenpm

PHP and MySQL combination for efficient removal of multiple dropdown choices

I'm struggling to figure this out. Essentially, it's a form with multiple dropdown menus where users can select one or more items to filter MySQL data results. I want to dynamically update the other dropdown menus as the user makes selections. Fo ...

javascriptphpjqueryhtmlmysql

What are some strategies to prevent a fixed sidebar from obscuring content while zooming in?

I've been working on adding a fixed sidebar for a table of contents (TOC) to a website, where the sidebar stays in place as the user scrolls up and down. My implementation includes the following HTML code: https://i.sstatic.net/jAY8l.png and CSS co ...

htmlcss

Dynamic value for href in div using Angular

Implementing a dynamic submenu using Angular is my current project. At the moment, I have set the href attribute with hardcoding as shown below: <ng-template #preSelectionMenuItem let-preSelections="preSelections"> <div class=' ...

htmlangular

Ways to modify the text of an HTML element when hovering over it

One of my elements contains the text &times; within a <span>. Is there a way to change this symbol to something else, like &infin;, when hovered over? <span class="change-text">&times;</span> When the mouse hovers over it, I ...

javascripthtmlcss

"Drag and drop elements that automatically snap to a grid and move with

I'm trying to create a small, square div that follows the mouse cursor, but I want it to snap to a 3x3 pixel grid. Here is what I have so far: $(document).mousemove(function(e) { window.x = e.pageX; window.y = e.pageY; if(window.x % 9 === 0 ){ ...

javascriptjquerycss

What is the best way to incorporate a minimum width and maximum width in CSS that add up to 100% when necessary?

Can anyone help me find CSS rules that can set a fixed width for an element (width: 500px) but also allow it to be responsive with max-width: 100% if the container is narrower than the element? I saw this example and it works perfectly: .elem { width: 60 ...

javascripthtmlcsswidth

Utilizing JavaScript to trigger a series of click events on a single button in order to

I am working on implementing a click event for a checkbox that will add and remove CSS classes using the "classList.toggle" method. Specifically, I want the checkbox to toggle between adding the "xyz" class on the first click, and then adding the "abc" cla ...

javascripthtmlcss

Div refuses to clear floats

Working on an app at and encountering an issue with the main container not clearing floats, causing overflow on the content. Attempted to use this CSS: .clearfix:after { content:""; display: table; clear: both; } Added the class to the main ...

htmlcss

Having trouble getting Google to show breadcrumbs in search results

I've been trying to implement schema.org's breadcrumb microdata in order to have Google display my breadcrumbs in search results. However, when I check with Google's structured data testing tool, the breadcrumb is not showing in the search r ...

htmlbreadcrumbsschema.orggoogle-rich-snippets

Bring your images to life with a captivating 3D hover effect

I am looking to achieve a similar effect using JavaScript instead of just pure CSS like the example provided. I'd prefer not to use SCSS either, just sticking to CSS would be great. Please check out this CodePen for reference. .picture-container ...

javascripthtmlcssvue.jshover

The evolving impact of the HTML5 <video> element

I've been attempting to find information on this topic, but unfortunately my search has not been very successful. I vaguely recall coming across a tutorial that covered something like this. Does anyone happen to know how to alter the perspective of a ...

jqueryflashhtmlcsscanvas

Mastering the Material-UI Grid in SPAs: Conquering the Negative Margin Dilemma

While attempting to build a single page application (SPA), I've encountered an issue with using the Grid component from material-ui. Normally, I rely heavily on the Grid, but in this new project, something seems amiss. The current problem is evident ...

javascriptcssreactjsmaterial-ui

Is there a way to prevent Javascript from modifying styles when printing?

Is there a way to prevent JavaScript from affecting styling during printing? For example, if I'm using JavaScript to hide certain content but want that content to be visible when printed. I have hidden a div using JavaScript and now I'm trying ...

javascriptcssxhtmlprinting

Ways to make text within a container smoothly slide down

Hello, I have a question about jQuery as I am relatively new to it. I am currently working on creating a team members section where clicking on a team member will slide down information about that person underneath. I have managed to set up the parent co ...

jquerycss

Enhance your content with stylish text additions

Can anyone help me with merging 2 pieces of text in React JS, where one part of the text has unique styling? Below is an example of the code: <div> <div> {'If you haven\'t received an email, please check your spam filte ...

cssreactjs

"Enhance your audio experience across all browsers with the revolutionary

I am looking for a way to play an mp3 file endlessly when the user opens my website. I need a lightweight crossbrowser solution that works in all browsers, including IE. Any suggestions? ...

javascriptjqueryhtmlcssmp3

What is the best way to transform data from a single form into a JSON array?

explore (handlebars) {{!< main}} <form class="ui form" action="/design/add" method="POST"> <div class="order_list"&yt; <h1>Add Product</h1> <br> {{!-- <input type="f ...

javascripthtmlnode.jsexpress

Adjust font size using jQuery to its maximum and minimum limits

My jQuery script enables me to adjust the font-size and line-height of my website's CSS. However, I want to restrict the increase size to three clicks and allow the decrease size only after the increase size link has been clicked - ensuring that the d ...

javascriptjquerycssfontsfont-size

The Impreza theme is experiencing difficulty displaying Font Awesome icons

Recently, I had a client who needed a WordPress website. After working on the project on my own server, I finally completed it and transferred the entire site to the client's main domain at gulugalmarketing.com. Everything was functioning perfectly o ...

htmlcsswordpressfont-awesome