Utilize Bootstrap to position the button right next to the input field

I am having trouble aligning the button on the right next to the email textbox.

Unfortunately, my attempts have not been successful.

Fiddler: https://jsfiddle.net/Vimalan/mt30tfpv/4/

<div class="col-xs-3">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" class="form-control input-sm" id="RequestorNameTxtBox">
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" class="form-control input-sm" id="RequestorEmailTxtBox">
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="form-group">
                            <label></label>
                            <button type="button" class="btn btn-primary btn-sm" id="RequestorLookupBtn">Lookup</button>
                        </div>
                    </div>

Expectation:

https://i.sstatic.net/AruAn.png

Any advice or suggestion would be greatly appreciated.

Answer №1

give this a shot

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-xs-3">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" class="form-control input-sm" id="RequestorNameTxtBox">
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" class="form-control input-sm" id="RequestorEmailTxtBox">
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="form-group">
                            <label>&nbsp;</label>
                            <button type="button" class="form-control input-sm btn btn-primary btn-sm" id="RequestorLookupBtn">Lookup</button>
                        </div>
                    </div>

Answer №2

Include a CSS rule for the button with a margin-top

<button style="margin-top:25px;" type="button" class="btn btn-primary btn-sm" id="RequestorLookupBtn">Lookup</button>

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

Adjust the size of a div while maintaining its aspect ratio based on the width and height of its parent element using CSS

After exploring various methods to create div aspect ratios using CSS, I had success with a demo. However, I encountered an issue with setting the height of my container when the width-to-height ratio is larger (#1 scenario). I was able to achieve the #2 ...

Aligning an image vertically within a division

I am currently working on aligning images vertically within an image rotator (SlideDeck). At the moment, all the images are aligned at the top but I need them to be centered. The heights of the images vary. I have tried several methods, including absolute ...

What could be causing the HTML5 canvas not to show up on the screen?

<!doctype html> <html> <head> <title>Canvas test</title> </head> <body> <script type="text/javascript"> c = getElementById('canvas'); ctx = c.getContext("2d")' ctx.fillRect(10,10,10,10); </s ...

The website functions perfectly on a local server, but once it's uploaded, the images fail

My website is functioning properly on my computer, however, after uploading it to the server, I noticed that some of the links are not appearing. Upon inspecting these links through developer tools, it shows an image size of 'Natural 1 X 1' despi ...

What could be the reason for the CSS file not getting applied to the HTML in my project?

Having trouble applying an external CSS file to my HTML file. Currently working on a Cloud IDE (goormIDE, similar to C9) and trying to link an external CSS file to my HTML file on the web server using Node.js. However, the CSS file is not being applied to ...

What is the best way to eliminate unexplained spacing at the bottom of a webpage using CSS?

I am struggling to create a basic webpage using Bootstrap and D3, and I can't seem to figure out how to remove the excess whitespace at the bottom. Any tips on how to resolve this issue would be greatly appreciated. I attempted to set the min-height ...

CSS - selecting elements that are greater than a specific criteria N

I have multiple <p> tags in the body of my HTML. I want to display only the first two paragraphs and hide all the paragraphs that come after. However, the code I'm using doesn't seem to work as expected. <html> <head> < ...

Acquire a structured list of the focus order within the DOM elements

It intrigues me how the DOM is constantly changing. I'm curious if there's an easy way to retrieve a sorted list of focusable elements within the DOM at any moment. This would encompass nodes with a specified tabindex value that isn't -1, as ...

Concealing divisions on a website with CSS styling

In my div, I have some text that I want to hide. <div style='visibility:hidden;' id='emailid'>$email</div> Although the visibility attribute successfully hides the text, it leaves behind empty space on the webpage where th ...

The presence of floats in CSS influence the surrounding div elements

Currently experimenting with HTML/CSS utilizing Bootstrap v5.0 and encountering issues with the unusual interactions between floats and divs. Specifically, aiming to achieve the following: https://i.sstatic.net/4lpC2.png Successfully achieved the desired ...

When using HTML5 input type number with 16 or more digits, Chrome automatically replaces any extra digits with zeroes

Has anyone else encountered an issue with Chrome related to using the input type number when the number of digits exceeds 16? I've noticed that in my case, any numbers beyond the 16th digit are automatically replaced with a zero when the field loses f ...

Range slider in Bootstrap showing values as labels

After reviewing the Bootstrap 4 documentation and various responses on Stack Overflow, I am still unable to locate a method for the range slider to show the value as the track is adjusted. https://i.sstatic.net/Iu0ug.png I have come across open-source pr ...

Is it possible to modify the CSS styles for a specific portion of an input value?

Currently, I am in the process of developing a form using React.js where a specific input must match the label written above it. Here is an example: https://i.stack.imgur.com/S2wOV.png If there happens to be a typo, the text should turn red like this: h ...

Tips for incorporating a notification bar below the header

I'm fairly new to CSS and I'd like to create a black notification bar for free shipping right below the header, with white text. It needs to span the full width of the browser. I attempted to achieve this using CSS and `header::after`, but my te ...

On mobile devices, the alignment of text in Bootstrap doesn't appear as intended

I'm creating a portfolio website for showcasing my design projects from university. The text in the "my work" section is centered, but it seems misaligned with other elements like buttons when the window width is reduced. What could be the issue? Cod ...

In order to properly set up Require JS, you will need to configure the JS settings

Is there a way to specify the path from any property inside the require JS config section? We are trying to pass a property inside the config like so: The issue at hand: var SomePathFromPropertyFile = "CDN lib path"; require.config({ waitSeconds: 500 ...

What is the best way to create a gap between two Bootstrap buttons?

I'm attempting to create two buttons in the same line in this code, but it's not working as I want. Take a look below: <div class="w3-show-inline-block"> <div class="w3-bar"> <button class="btn btn-s ...

Troubles with showcasing icons on a website

I need some help with a minor issue that I'm stuck on. I'm trying to display an information icon that, when clicked, opens a pdf. The strange thing is that the icon doesn't show up on the page even though it exists on the server. However, wh ...

What is the best way to add padding to each line within a block of text containing multiple lines

My <span> tag has a background color and left and right padding applied to it. However, the padding is only visible at the beginning and end of the <span>, not on each line when the text wraps onto multiple lines. Is there a way to add padding ...

Well, it appears that I am having trouble establishing a connection between the users in this chatting application

I'm encountering a problem with establishing a connection between two users. I have already installed express and socket.io, but for some reason, the message is not getting through to the receiver's end. The code seems to be running fine as I can ...