How can I adjust this button to match the size of the input field?

I'm in the process of creating a simple landing page and I've encountered an issue with the newsletter signup component. The button in the bootstrap input group template appears much larger than the input field.

Here is the current code snippet:

<!-- Newsletter -->
<section class="bg-primary text-light p-5">
  <div class="container">
    <div class="d-md-flex justify-content-between align-items-center">
      <h3 class="mb-3 mb-md-0">Sign up for our Newsletter</h3>

      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
        <div class="input-group-append">
          <button class="btn btn-dark btn-lg" type="button">Button</button>
        </div>
      </div>

    </div>
  </div>
</section>

Here is the specific input group code causing the issue:

<div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
        <div class="input-group-append">
          <button class="btn btn-dark btn-lg" type="button">Button</button>
        </div>
      </div>
htmlcssbootstrap-4

Answer №1

To adjust the input field, you can try adding a specific height to it as shown below:

input.form-control {height: 38px}
<!-- Newsletter -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="492b26262f2a2d2b2829097c6778677a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">

<section class="bg-primary text-light p-5">
  <div class="container">
    <div class="d-md-flex justify-content-between align-items-center">
      <h3 class="mb-3 mb-md-0">Sign up for our Newsletter</h3>

      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
        <div class="input-group-append">
          <button class="btn btn-dark " type="button">Button</button>
        </div>
      </div>

    </div>
  </div>
</section>

Answer №2

There was no mistake on your end. You can either remove the btn-lg class from the button or include input-group-lg along with the input-group class. Both approaches are correct.

Here are examples illustrating both solutions:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7959898838483859687b7c3d9c1d9c6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<h2>Large form input</h2>
<section class="bg-primary text-light p-5">
  <div class="container">
    <div class="d-md-flex justify-content-between align-items-center">
      <h3 class="mb-3 mb-md-0">Sign up for our Newsletter</h3>

      <div class="input-group input-group-lg mb-3">
        <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
        <div class="input-group-append">
          <button class="btn btn-dark btn-lg" type="button">Button</button>
        </div>
      </div>
    </div>
  </div>
</section>

<h2 class="mt-5">Small form input</h2>
<section class="bg-primary text-light p-5">
  <div class="container">
    <div class="d-md-flex justify-content-between align-items-center">
      <h3 class="mb-3 mb-md-0">Sign up for our Newsletter</h3>

      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
        <div class="input-group-append">
          <button class="btn btn-dark" type="button">Button</button>
        </div>
      </div>
    </div>
  </div>
</section>

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

Instructions for downloading a file using Front End technology in Java and HTML

I am looking to initiate a file download upon clicking a button on the front-end interface. Front End <td><a name="${flow.name}" data-toggle="tooltip" title="Report" class="generateReport"><span class="far fa-file-excel"></span>&l ...

javascriptjavajqueryhtmlspring

anticipates input

Having trouble with my join query, unsure if the issue lies within my query or somewhere else. The error message I'm receiving is: Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\pr ...

phpmysqlhtmlcss

I'm curious as to why styled components weren't working before

I'm attempting to utilize the before on styled components in React, but it doesn't seem to be functioning correctly. Prior to adding before, the background image was displayed, but after its inclusion, the image is no longer showing up; import st ...

javascripthtmlcssreactjs

The POST request did not yield an HttpResponse object; instead, it returned None

When I submit a selection from a dropdown form to views as a POST request, and then use this selection to query data from Django, I encounter an issue while trying to map Django models data to Highcharts following this approach. The error message "the view ...

pythonhtmlcssdjango

The concept of CSS sprites and managing background positions

I have been working on integrating a star-rating widget that requires the use of a sprite file. The sprite file I am using looks like this: https://i.stack.imgur.com/ZSMMj.png This is how my HTML is structured: HTML <span id="star-ratings" class="c ...

javascripthtmlcss

Incorporating HTML5 Video Using an AJAX Request

I am attempting to fetch a video using an ajax query, but it seems that the video player control buttons are missing. Here is the code I am using: $.ajax({ context: document.body, url: "/?get=json&act=video", type: "get", success: fu ...

javascriptjqueryajaxhtmlhtml5-video

.mouseleave() triggers when exiting a designated boundary area

I'm attempting to implement a roll-up feature for a div when the mouse is over another div. The issue I'm facing is that the roll-up div closes even if the mouse just exits through the bottom border. Is there a way to achieve this using JavaScrip ...

javascriptjqueryhtmlcss

What steps can I take to enhance the responsiveness and overall performance of this code using bootstrap?

Struggling with making your website responsive? No worries, we've all been there. Whether you're a pro at coding in react.js and vue.js or a complete beginner, we all need to start somewhere. Any suggestions or tips on how to improve responsivene ...

htmlcssbootstrap-4

Highlighting rows using jQuery upon selecting checkboxes

I attempted to emphasize a row in a table using jQuery when the checkbox is checked. This is the jQuery code I used for this purpose: $(":checkbox").change(function() { $(this).closest("tr").toggleClass("highlight", this.checked); }); However, it see ...

jqueryhtmlcsscheckboxhtml-table

Ajax continues to operate even if an error is detected

Hello fellow programmers! I'm currently facing an issue with form submission and validation using jQuery with 2 ajax events. The problem lies in the fact that even if the first ajax event (timeconflict.php) returns an error, the second ajax event (res ...

javascriptphpjqueryhtmlajax

Steps for adding a border to kendo grid row hover

One of my tasks involved creating a grid using Kendo, and I wanted to display borders on a grid row when the cursor hovers over it. I attempted the following code snippet: .k-grid > table > tbody > tr:hover, .k-grid-content > table > tbody ...

javascripthtmlcsskendo-uikendo-grid

A glitch occurred while attempting to load content dynamically onto an HTML page using Ajax

Attempting to dynamically load content into an HTML div is causing issues for me. Whenever I try to do so, an error pops up: Syntax error HOME. (this is the expected visible content within the div). HTML: Navigation bar: <li><a href="#" onclick= ...

javascripthtmlajaxxmlhttprequestinnerhtml

Fading away backdrop images for the header

I've created a header class in my CSS with the following styling- header { background-image: url('../img/header-bg.jpg'); background-repeat: none; background-attachment: scroll; background-position: center center; .backg ...

javascriptjqueryhtmlcss

Inquiring about how to make the pieces move on the checker boards I created

I'm having trouble getting my SVG pieces to move on the checkerboard. Can someone please help me figure out how to make them move, even if it's not a valid move? I just want to see them in motion! The important thing is that the pieces stay withi ...

javascriptjqueryhtmlcssnode.js

Combine two columns into a single table column using HTML/CSS and JavaScript with the help of Datatables

I utilize the DataTables library from https://datatables.net/ to create sortable and searchable tables on my website. However, my table becomes too wide due to the numerous columns it contains. I am looking for a way to condense the width by merging relate ...

javascripthtmlcssdatatables

Display substitute text for the date input field

When using input types date and datetime-local, the placeholder attribute does not work directly. <input type="date" placeholder="Date" /> <input type="datetime-local" placeholder="Date" /> Instead, the ...

htmldateplaceholder

Can the placement of divs impact search engine optimization (SEO)?

My website is currently structured with div containers in the following order: Less important left side bar Less important right side bar The core center content at last I am concerned about the impact on SEO as the core content comes after the sidebars ...

htmlsearch-engineseogoogle-search

Angular Space-Friendly Table

After attempting to code the sample in Angular, I realized it wasn't what I was looking for. <table> <th >Number</th> <th >Merchant Name</th> ...

htmlcssangular

Utilizing Sass variables and customizing CSS styles within the main stylesheet

Hey there! I'm new to sass and I have a specific question about it. Do I need to link the scss file to a separate css file where I'm working, or can I write my styles directly in the same file? I tried using sass variables from Bootstrap 5.3.2, b ...

csssassbootstrap-5

"Troubleshooting: IE compatibility issue with jQuery's .each and .children functions

I have created an Instagram image slider feed that works well in Chrome, Safari, Firefox, and Opera. However, it fails to function in all versions of Internet Explorer without showing any error messages. To accurately determine the height of images for th ...

javascriptjqueryhtmljsoninternet-explorer