Setting a button next to an input field in Bootstrap 4: A step-by-step guide

I have a form group with a label and input field. My goal is to position the button next to the input field on the same line. Here's an example of my code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="form-row">
  <div class="form-group col-8"><label for="date">Date:</label>
    <div class="input-group date"><input class="form-control" type="text" name="date" id="date" value="" placeholder="Enter Date"><span class="input-group-append"><span class="input-group-text"><i class="fa fa-calendar"></i></span></span>
    </div>
  </div>
  <div class="col-4 pt-4 d-flex align-items-center"><button type="button" class="btn btn-secondary btn-sm ml-2">Reset Date</button></div>
</div>

In the current setup, you'll notice that the button does not align horizontally with the input field. Is there a way to place them on the same line at the same height? Thank you.

cssbootstrap-4

Answer №1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="form-row">
  <div class="form-group col-8"><label for="date">Date:</label>
    <div class="input-group date"><input class="form-control" type="text" name="date" id="date" value="" placeholder="Enter Date"><span class="input-group-append"><span class="input-group-text"><i class="fa fa-calendar"></i></span></span>
<button type="button" class="btn btn-secondary btn-sm" style="margin-left:5px">Reset Date</button>
    </div>
  </div>
 
</div>

Alternate Solution:

If you want to add some space above a button, you can use style="margin-top:10px"

Answer №2

You may want to adjust your markup slightly and utilize the .form-inline class for a cleaner layout.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="form-inline">
  <div class="form-group"><label class="mr-2" for="date">Date:</label>
    <div class="input-group date mr-2"><input class="form-control" type="text" name="date" id="date" value="" placeholder="Enter Date"><span class="input-group-append"><span class="input-group-text"><i class="fa fa-calendar"></i></span></span>
    </div>
  </div>
  <div class="form-group"><button type="button" class="btn btn-secondary btn-sm">Reset Date</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

The alignment of the Unicode character is off and is not centered within the button

Upon implementing a unicode character as a button, I've observed that the alignment of the character is not centered properly (both horizontally and vertically) within the button. It's puzzling why this misalignment occurs even after setting padd ...

htmlcssunicode

Why is the radio button getting bound to the error instead of the label?

I'm currently working on validating radio buttons in a GSP file using the jQuery validation plugin. The issue I'm facing is that the error message is being bound to the first radio button and appearing at the bottom of it. Instead of displaying ...

jquerycssgsp

CSS: selecting the adjacent siblings of a certain class, starting from the first and

I am working on achieving the following goal: Elements containing values should have a gray 'ribbon'. Elements with values are given a class selected, while elements without any value do not have this class. This is how my HTML code appears: & ...

csscss-selectors

Positioning borders in an Outlook table

While experimenting with Mjml, I encountered an issue where I struggled to place the border exactly where it needed to be in order for my table to function correctly. It was a bit of a do-it-yourself solution, but it was the only way I managed to make it w ...

htmlcssoutlookbordermjml

When a condition fails, the default style in the CSS media query does not apply

Whenever the user resizes the browser, my media query for max-width kicks in to make the design responsive. But I'm facing an issue where when the user returns back to the original browser size, the design is still a little messed up and doesn't ...

css

Excessive whitespace bordering the perimeter of the webpage

I've recently delved into the world of HTML/CSS and I'm working on creating a simple website. However, I'm encountering some white space-related issues above the header/body and around the sides. Despite trying various adjustments with margi ...

htmlcss

What are the placeholders for the "localIdentName" query tag in a custom CSS-loader for Webpack?

Just starting out with Webpack and experimenting with the css-loader. I came across the option to specify a localIdentName query tag on the Github page under "Local Scope". This tag allows us to define our own custom values for how classes should be named ...

javascriptcsswebpackloader

Looking for CSS templates for improving your business web apps?

Many CSS templates out there are fixed-width, typically around 900 pixels wide... Right now, I'm in the process of creating an intranet Rails application and I'm seeking a good resource for CSS templates designed specifically for business applic ...

ruby-on-railscss

Troubleshooting EasyTabs: Localhost Issue with Ajax Tab Configurations

I've implemented EasyTabs for organizing my tabs on a webpage. I decided to use ajax-tabs functionality in order to fetch content from other pages when users click on the navigation menu buttons. However, I've encountered an issue where the conte ...

javascriptjquerycssajaxtabs

Converting Uniquely Designed Photoshop Shapes into HTML

I am working on a project to design an HTML page that features a profile picture with a heart frame. I have the PSD file with the heart frame included. The profile pictures will be rectangular in shape and should fit behind the heart frame without overlap ...

htmlcssphotoshoppsd

Tips for modifying the appearance of a text file within an iframe

Lately, I've been facing a dilemma on my website. I have an iframe code that looks like this: <iframe src ="http://hokuco.com/cde/user.txt" id ="myIframe"></iframe> However, the consolas font used in the iframe makes my website appear ...

htmlcssiframe

Revamping CSS for a Responsive Wordpress Tesseract Theme

I'm currently in the process of developing a website using the Tesseract theme at thevandreasproject.com. However, I have encountered an issue with responsiveness when integrating the SiteOrigins PageBuilder plugin. The compatibility between PageBuild ...

csswordpresstesseract

Unresponsive Hover Effect on iPad

I've implemented a hover effect on the menu for my one-page website. When a user hovers over a navigation link on desktop, the color changes to #ed1c28. .nf-navbar .navbar-collapse a:hover { color: #ed1c28; } Additionally, when a user clicks on a ...

htmlcssipaddevice-compatibility

Can you provide me with instructions on utilizing PNGs to create edge masks for an image?

After experimenting with border-image and PNGs to achieve textured borders, I'm curious if there is a method for masking in a similar fashion? I recently came across the Rumchata website which showcases what I have in mind. Their background has a blu ...

htmlcssimagepngmasking

I am having trouble getting the (:active) pseudo-class to function properly with the menu on my WordPress theme

Purchased a theme called HelpGuru and encountering issues with the CSS of the menu. Reached out to support but they were unable to assist, directing me to a company that specializes in customizing WordPress themes instead. The link to the demo can be found ...

csswordpressmenupseudo-class

Unique style pattern for parent links with both nested and non-nested elements

I am in the process of designing a website and I have a specific vision for how I want my links to appear, but I am unsure of how to achieve it. Here is the desired outcome: a red link a green link a red link a green link … Below is the HTM ...

javascriptjqueryhtmlcss

Customize Zurb Foundation: Applying styles to specific child elements based on current screen size (large, medium, small)

For wide displays, I aim to give a distinct border to each 7th element. However, on smaller screens, I wish to apply these styles to every 4th element instead. Is there a way for me to nest my styles within .small, .medium, and .large classes? ...

csszurb-foundationcss-selectorsdescendant

When attempting to print using React, inline styles may not be effective

<div styleName="item" key={index} style={{ backgroundColor: color[index] }}> The hex color code stored in color[index] displays correctly in web browsers, but fails to work in print preview mode. Substituting 'blue' for color[index] succe ...

javascripthtmlcssreactjs

"Dynamic navigation bar that remains in place even while scrolling past Adsense advertisements

Looking to implement a sticky menu for my blog using jQuery. The menu is functioning as desired, however, the issue arises when I scroll down on a page that contains adsense - the menu ends up going under the ad. What could be causing this problem? Below ...

jqueryhtmlcss

When using CSS to vertically align elements, it only works properly if a <span>

a { display: block; padding: 0 10px; /* background: rgba(0,0,0,0.5); */ height: 100%; border-left: 1px solid rgba(0,0,0,0.1); text-decoration: none; color: white; background-color:rgba(0,0,0,0.5); height:100px; } img { ...

htmlcss