Discrepant alignment of form group among the other elements in Bootstrap CSS

Currently, I'm working on an HTML horizontal form that includes buttons and text inputs. I'm using Bootstrap 3 for this project.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form role="form" method="post" class="form-horizontal form" >
<div class="container-fluid">
<div class="row" >
<div class="col-md-12" >

<div class="form-group" >
    <label class="col-md-1 control-label" for="username" >User Name</label>
    <div class="col-md-6" >
        <input class="form-control" type="text" id="username"  name="username" />
    </div>
</div>

<div class="col-md-offset-1" >
    <div class="form-group" >
        <button class="btn-warning btn" type="button" id="add" name="add" >Add User</button>
    </div>
</div>

</div>
</div>
</div>
</form>

One issue I've encountered is that when I place the buttons inside a form-group, they appear misaligned compared to other components. This seems to be caused by the following CSS:

.form-horizontal .form-group {
  margin-right: -15px;
  margin-left: -15px;
}

(you can see it in full screen)

I'm looking for suggestions on how to resolve this alignment problem. Should I create a custom class for this purpose?

csstwitter-bootstrap-3

Answer №1

When examining Bootstrap's forms, it is clear that they only combine label and input elements within the form-group.

To resolve any issues, simply remove the wrapper from your button.

For example:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form role="form" method="post" class="form-horizontal form" >
<div class="container-fluid">
<div class="row" >
<div class="col-md-12" >

<div class="form-group" >
    <label class="col-md-1 control-label" for="username" >User Name</label>
    <div class="col-md-6" >
        <input class="form-control" type="text" id="username"  name="username" />
    </div>
</div>

<div class="col-md-offset-1" >
    <button class="btn-warning btn" type="button" id="add" name="add" >Add User</button>
</div>

</div>
</div>
</div>
</form>

EXAMPLE

Alternatively, you can make the form-group the wrapper of col-md-offset-1, rather than the other way around, and give your col-md-offset-1 a class of col-md-11

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form role="form" method="post" class="form-horizontal form" >
<div class="container-fluid">
<div class="row" >
<div class="col-md-12" >

<div class="form-group" >
    <label class="col-md-1 control-label" for="username" >User Name</label>
    <div class="col-md-6" >
        <input class="form-control" type="text" id="username"  name="username" />
    </div>
</div>

<div class="form-group" >
    <div class="col-md-offset-1 col-md-11" >
        <button class="btn-warning btn" type="button" id="add" name="add" >Add User</button>
    </div>
</div>

</div>
</div>
</div>
</form>

EXAMPLE

Answer №2

Remember to include a form tag

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form role="form" method="post" class="form-horizontal form" >
<div class="container-fluid">
<div class="row" >
<div class="col-md-12" >
<form role="form">
<div class="form-group" >
    <label class="col-md-1 control-label" for="username" >User Name</label>
    <div class="col-md-6" >
        <input class="form-control" type="text" id="username"  name="username" />
    </div>
</div>
<button class="btn-warning btn" type="button" id="add" name="add" >Add User</button>

</form>
</div>
</div>
</div>
</form>

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

Mastering the Art of Utilizing Box Component Spacing Props

Easy margin and spacing adjustments are possible with the help of Material-UI. They provide shortcuts that eliminate the need to individually style components with CSS. In the code snippet below, it's important to note that specifying the measuremen ...

cssreactjsmaterial-ui

Unable to load the Bootstrap CSS file from the specified import path: "bootstrap/dist/css/bootstrap.min.css"

I am currently working on a React application where I have a page that utilizes components from the react-bootstrap library. The issue I'm facing is related to styling, even though I have already imported the necessary bootstrap CSS file: import "boot ...

cssreactjscomputer-sciencereact-bootstrapvisual-web-developer

What is the best approach to transfer information from the client side to a node

I have an ejs page that looks like this: <%- include('../blocks/header', {bot, user, path}) %> <div class="row" style="min-width: 400px;"> <div class="col" style="min-width: 400px;"> <div class="card text-white mb-3" & ...

javascripthtmlcssnode.jsexpress

The navigation toggler seems to be malfunctioning in the browser, but it is functioning properly on Code

I'm having an issue with my navigation bar toggler. The code works fine in Codeply, but not in the browser. The hamburger button appears on mobile, but the lists are not showing up. Here is the code snippet I'm using: <html> <head> ...

htmlcssbootstrap-5

Styling a Fixed Header in CSS/HTML - Scroll Effect

Is it possible to hide only the upper part of the nav-bar, similar to the behavior in WhatsApp? I am using material-ui for this particular use-case. Currently, my implementation causes the app-bar to extend only when the scroll position is less than 48px, ...

cssreactjsmaterial-ui

What are the steps to include media queries?

My website looks good on big monitors, but not on smaller ones or on mobile phones. I need help with adding media queries to my CSS Reset so it works across all devices. Here's the website link and the CSS Reset code: html, body, div, span, applet, o ...

htmlcssmedia-queries

What is the reason behind a stationary lightbox sticking to the top of the webpage rather than the top of the viewport?

When you visit this page and scroll down a little before clicking on one of the art pieces, have you noticed that the "fixed" lightbox seems to be attaching itself to the top of the page instead of the viewport? I'm looking for ways to make it attach ...

htmlcss

Images that dynamically adjust within the confines of a single div

My issue involves a simple script that includes two responsive images. When the window is minimized, the images adjust accordingly. However, when I place both images within the same div like this: <div class="wrapper"> <div class="block"&g ...

htmlcssresponsive-images

Duplicating a concealed div and transferring it to a new div

I'm encountering an issue while trying to copy one div to another. The div I'm attempting to copy has a hidden parent div. The problem is that the destination div does not appear after copying, even though I changed its style display to block. ...

javascriptjqueryhtmlcsscopy

How can you transfer data from a jQuery function to a designated div element?

I'm struggling to transfer data from a function to a specific div, but I can't seem to make it work. I'm in the process of creating a gallery viewer and all I want is to pass the counter variable, which I use to display images, and the total ...

javascriptjqueryhtmlcss

The spacing in MUI Grid results in the grid having extra left padding

I'm having trouble creating a grid with a group of elements, specifically when I try to add spacing between them. Take a look at the image below with spacing={0} set on the Grid container: No spacing in Grid container Now, here's what happens wh ...

cssreactjsmaterial-ui

Here is a guide on how to ensure that the div elements automatically fill the available space

Looking at this html page: Check out the jsFidlle Demo here I am aiming to have the boxes fill up the space effortlessly, each with equal width but varying heights. This is similar to the layout in Google Keep notes ...

jqueryhtmlcsstwitter-bootstrap

Conquering challenges arising from organizing subdirectories for js/css/xml files

During the process of developing a website with html, css, js and xml files stored on my computer (not yet online), I initially kept all the files in one folder along with an images folder. However, as the project progressed and things started to get mes ...

javascripthtmlcssxml

A centered Bootstrap navigation bar on a WordPress site

My Bootstrap navbar is floating in the center on WordPress and I'm not sure why. Can anyone help me with this issue? Could it be related to WordPress or my stylesheet problems? (Will update my code here if you need) https://i.sstatic.net/vxVv4.jpg ST ...

phphtmlcsswordpresstwitter-bootstrap

Dealing with Sideways Overflow Using slideDown() and slideUp()

Attempting to use slideUp() and slideDown() for an animated reveal of page elements, I encountered difficulty when dealing with a relatively positioned icon placed outside the element. During these animations, overflow is set to hidden, resulting in my ico ...

javascriptjqueryhtmlcss

jQuery smoothly sliding downward from the top to the bottom

http://jsfiddle.net/Hx65Q/3/ Is there a way to make the slider open from the top instead of the left side? $("button" ).click(function() { $('.login').toggle('slide', { duration: 1000, easing: 'easeOutBounce', }); ...

javascriptjquerycss

Animating Jquery to smoothly change opacity until it reaches 100% visibility

The script I have does several things, but the main issue lies in the last line where the opacity of the class doesn't seem to reach 100%.... $('.fa-briefcase').parent().on('click', function () { $("#colorscreen").remove(); ...

javascriptjqueryhtmlcss

How can I extract information from an HTML table using AngleSharp?

Seeking a way to extract song data from a playlist on a music streaming website This table contains song information: <tr class="song-row " data-id="ef713e30-ea6c-377d-a1a6-bc55ef61169c" data-song-type="7" data-subscription-links="true" data-index="0" ...

c#htmlcssanglesharp

Use Javascript to deactivate the mouse cursor and rely solely on the keyboard cursor for navigation

I am facing an issue with a div that contains a textarea. The cursor is automatically positioned at the beginning of the text within the textarea. I would like to disable the mouse cursor when hovering over the textarea but still be able to navigate within ...

javascriptcss

The scrollbar style mixin in Sass is successfully applied to textareas, but fails to work in other types

I found an example on css-tricks.com that demonstrates a convenient mixin for custom scrollbars: @mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) { // For Google Chrome &::-webkit-scrollbar { w ...

htmlcsssass