In Bootstrap 4, the input field and submit button display varying widths

I've been working with Bootstrap 4 and I'm having trouble getting the submit button to match the size of the input field. I've tried a few different combinations, but the button always ends up wider than the input. Could this be due to some default CSS styles applied by Bootstrap for buttons that I'm not aware of? Any help is appreciated!

Here's the code snippet:

<div class="container-fluid">

    <div class="row justify-content-center"> 

        <div class="col-sm-6 bg-warning p-2 d-flex justify-content-center" >

            <form action="" method="POST" class="p-5 m-1 bg-danger col-8"> 

                <div class="form-group row justify-content-center">
                    <div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
                        <label for="InputEmail1">Email address</label>
                        <input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" name="userEmail" required>
                        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else</small>
                    </div> 
                </div> 

                <div class="form-group row justify-content-center"> 
                    <div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
                        <label for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" name="userPass" required>
                    </div> 
                </div> 

                <div class="row justify-content-center">
                       <button type="submit" class="btn btn-success col-sm-12 col-md-10 col-lg-9 col-xl-8" name="submit">Submit</button>
                </div>

        </form> <!-- end of form -->
    </div> <!-- end of column -->
</div>  <!-- end of row -->
</div> <!-- end of container -->

</html>
htmlcssformsbootstrap-4submit

Answer №1

Initially Suggested Fix

The issue stemmed from the fact that your input fields were contained within a col class, which automatically receives padding properties (specifically padding-right:15px and padding-left:15px) from the Bootstrap plugin.

To resolve this, consider adding a custom class to the column such as padding_0, as shown below:

<div class="col-sm-12 col-md-10 col-lg-9 col-xl-8 padding_0">

Additionally, define the following style for the added class: 

.padding_0{padding-right:0;padding-left:0;}

Alternative Resolution

Your mistake lies in applying the col-* classes directly to the button element.

<div class="row justify-content-center">
<button type="submit" class="btn btn-success col-sm-12 col-md-10 col-lg-9 col-xl-8" name="submit">Submit</button>
 </div>

A better approach would be to enclose the button within a parent div, apply the col-* class there, and set width:100% specifically to the button like so:

<div class="row justify-content-center form-group">
  <div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
  <button type="submit" name="submit" class="btn btn-success" style="width: 100%;">Submit</button>
     </div>
  </div>

Code Snippet demonstrating the second solution 

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body>
  <div class="container-fluid">

    <div class="row justify-content-center">

      <div class="col-sm-6 bg-warning p-2 d-flex justify-content-center">

        <form action="" method="POST" class="p-5 m-1 bg-danger col-8">

          <div class="form-group row justify-content-center">
            <div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
              <label for="InputEmail1">Email address</label>
              <input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" name="userEmail" required>
              <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else</small>
            </div>
          </div>

          <div class="form-group row justify-content-center">
            <div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" name="userPass" required>
            </div>
          </div>

          <div class="row justify-content-center form-group">
            <div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
              <button type="submit" name="submit" class="btn btn-success" style="width: 100%;">Submit</button>
            </div>
          </div>

        </form>
        <!-- end of form -->
      </div>
      <!-- end of column -->
    </div>
    <!-- end of row -->
  </div>
  <!-- end of container -->


</body>

</html>

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

Adjusting font size to perfectly fit within its confines

When using v-for to map out objects from an array into cards, it's important to keep the height consistent throughout the section. Manually adjusting text size with @media queries can be tedious and inelegant, requiring multiple rules for different sc ...

cssvue.js

Utilizing Bootstrap 5's table design to occupy the rest of the available vertical

In my .NET Core 7 MVC project, I am facing a challenge where I want to make a details table scroll and occupy the available vertical space on the screen dynamically. I have tried using h-25, h-50 classes to achieve the scrolling effect on the table. Howev ...

htmljquerycssbootstrap-5

Tips for utilizing ion view within an ionic 2 application

In my original use of Ionic 1, I placed the footer after the <ion-content> and before . However, in the new Ionic 2, I can't seem to find any reference to <ion-view>. My specific need is to have two buttons at the bottom of the screen fol ...

htmlcssangularjsionic2hybrid-mobile-app

The IE condition is failing to work properly with .js and .css files

I've been trying to use this code to load the ie.css file specifically for IE browsers, but for some reason it's not working. I'm feeling a bit confused here - can anyone help me figure this out? <html> <head> <titl ...

htmlcssinternet-explorer

What is the best way to position a button in the middle of a webpage?

My biggest struggle right now is trying to center a button that I created. I've attempted using both HTML and CSS techniques, including the float:center; command in CSS and align="center" in HTML, but nothing seems to be working. It's strange bec ...

htmlcss

Create an alert box that covers the content

I have been struggling to get the alert boxes to overlap on my content without pushing it down. I have tried changing the position to absolute, relative, and fixed, but nothing seems to work. There was one time when it worked, but as soon as I saved, it ...

csssassbootstrap-5

The second drop-down choice should be connected to the option chosen in the first drop-down menu

I am planning to develop a signup form where user input values will be saved in a MySQL database. To ensure data accuracy and consistency (e.g., displaying "New York" instead of "NY" for City), I am considering implementing dropdown lists to limit options. ...

javascriptphpjqueryhtmlmysql

The <mat-radio-button> component does not have a value accessor specified

When working with HTML and Angular, I encountered the following issue: <mat-radio-group> <mat-radio-button [(ngModel)]="searchType"> And (Narrower search) </mat-radio-button> <mat-radio-button [(ngModel)]="searchType"&g ...

javascripthtmlangularangular-material2

Retrieving a PHP variable from HTML without using a form

Is there a way to pass a variable from HTML to PHP without using a form and the traditional post or get methods? I have tried using the code provided, but I am unable to access the value of the 'buy1' variable in PHP. Is there a way to achieve th ...

javascriptphphtml

My HTML code is not showing up after executing a PHP function in a separate file. What could be the reason

I am currently working on integrating an API with my website. The website is built using a combination of HTML and PHP, with bootstrap being used for layout purposes. The process involves 3 PHP files - one for creating a database link, another for querying ...

phphtmlmysqljson

Aligning text to the left center

I am looking to center left-aligned text in the yellow box (txtbox). The current look is like this: and I want it to appear like this: HTML: <div class="content container small"> <div class="txtbox"> ...

htmlcss

Struggling to make AngularJS routes function properly

After starting from scratch, I rebuilt it with freshly downloaded angularJS (version 1.5.8). I simply placed both angular.js and angular-route.js in the library folder following this setup: https://gyazo.com/311679bf07249109671d621bc89d2d52 Here is how in ...

javascripthtmlangularjs

Changing both image border and text at the same time when hovering- how can this be done

I have taken on the challenge of creating a Netflix Clone as a personal project. In my version, I want the border around the image and the user's name to both highlight when hovered over in the Netflix Profiles section. However, despite trying for o ...

javascripthtmlcsshover

Variations in CSS behavior for select and option elements

I have implemented the following HTML code snippet: <select ...> <option value=""></option> <option data-ng-repeat="type in xy" value="{{type.name}}" ng-style="{'border-left': '4px solid '+ type.color, &apos ...

htmlcssangularjs

IE is failing to display the textarea, but it is successfully getting submitted

I've written a function in jQuery and JavaScript that generates a form element: createEmail: function(title){ var $emailForm = $('<form>',{action: 'sendEmail.php', id: 'emailForm'}); var $table = $( ...

phpjavascriptjqueryformstextarea

Fashioning hyperlinked images using CSS

Looking for help with applying anchor tags to a styled image in CSS? I had already pushed the image to the right and resized it from 400px to 25px: CSS: .instagram-section { text-align: right; font-family: 'Life Savers', cursive; fo ...

htmlcss

What are some ways to make the parent div grow based on the width, padding, margin, or box of the child div

Is it possible to expand a parent div with a child div and how can I achieve this? I have created a JSFiddle with some code included. CSS body { background: gray; } div.page { color: white; background: black; max-width: 72em; margin: ...

htmlcss

The HTML/CSS authentication system is experiencing technical difficulties and is not functioning as intended

I came across this code on codepen.io and tried to implement it using the provided HTML and CSS. However, I encountered some errors during implementation. While the code works perfectly in the CodePen compiler, it doesn't seem to be error-free. One i ...

htmlcss

PHP code that removes a table row from a database

Can anyone help me troubleshoot my code? My PHP seems to be functioning, but for some reason the delete button is not working! if(isset($_POST['delete'])) { $ID = $_POST['value']; $delete = "DELETE FROM tbl_document WHERE ID = ...

phphtmlmysqlmysqli

Closing the modal by simply clicking outside of it's boundaries

Is there a way to close the modal by clicking outside of it using pure JS or AngularJS? I'm struggling to figure out how to implement this functionality. Any assistance would be greatly appreciated. View Fiddle .modalDialog { position: fixed; ...

javascriptcssangularjspopup