The form-group nested within a form-horizontal is exceeding the boundaries of the preceding form-group

I am currently utilizing Bootstrap 3.3.6 and have a basic form enclosed in a panel:

https://i.stack.imgur.com/UOFI6.png

Although it is quite simple, the alignment of the "Post" button is not displaying properly.

Here is the HTML code for the form:

<div class="panel panel-primary">
  <div class="panel-heading">Say something...</div>
  <div class="panel-body">
    <form class="form-horizontal">
      <div class="form-group">
        <div class="col-md-12">
          <textarea class="form-control"
                    rows="5"
                    placeholder="What are you up to?"></textarea>
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-offset-11 col-md-1">
            <button type="submit" class="btn btn-primary">Post</button>
        </div>
      </div>
    </form>
  </div>
</div>

Based on the Bootstrap documentation, .form-group acts like .row when placed inside a .form-horizontal - therefore, offsetting the button (col-md-offset-11) should align the button vertically with the textarea.

This panel is inserted within a row on another page:

<div class="container">
  ...
  <div class="row">
    <div class="col-md-offset-2 col-md-8">
      <div ui-view="quickPost"></div>
    </div>
  </div>
  ...

Since .form-group mimics a .row, it should function correctly when inside a .row (nesting rows within rows is acceptable).

As I lack expertise in CSS and Bootstrap, I am certain that this issue stems from my oversight. Can anyone identify the mistake I have made?

htmlcsstwitter-bootstrap

Answer №1

The issue at hand does not lie within Bootstrap's grid system, but rather stems from the fact that the designated size for the Post button is too narrow. Placing it in a col-md-1 within a col-md-8 means it only occupies 5.5% of the maximum width of .container (1170px): ~65px, without even considering the 15px padding.

Consequently, the button overflows beyond the allotted space and causes an alignment discrepancy since it cannot break to a new line to remain within the confined column.

This dilemma can be resolved in a few ways: you can provide more room for the button by expanding the number of columns it spans, enabling the button to stretch to 100% width until reaching the right edge (Bootply example):

button {
    width: 100%;
}

<!-- [...] -->
    <div class="col-md-offset-10 col-md-2">
        <button type="submit" class="btn btn-primary">Post</button>
    </div>
<!-- [...] -->

Alternatively, you can utilize Bootstrap's pull-right class to ensure the button aligns flush against the right side (in which case, the specified number of columns becomes irrelevant as they no longer have any impact) (Bootply example):

<!-- [...] -->
    <div class="col-md-offset-11 col-md-1">
        <button type="submit" class="btn btn-primary pull-right">Post</button>
    </div>
<!-- [...] -->

Hopefully, this explanation sheds light on the issue. Feel free to reach out if you have any further inquiries.

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

Adjustable text size to accommodate different cultural changes

My team is working on an MVC web application, with CSS stylesheets utilized in views. We are trying to achieve the following scenario: Whenever the language culture changes from English to another language, we want the font size of a specific class to ...

c#htmlcssfonts

Steps to create a function in a .js file that uses ng-show conditions

I am in the process of validating a web page where the user inputs must be alphanumeric, have a maximum length of 45 characters, and be unique. Below is the code snippet I am working with. Is there a way to consolidate these three ng-show conditions into ...

javascripthtmlangularjs

Determine the height of a DIV element and its contents using JQuery

In this div, there are various elements present: <div class="menuItem designMenu" id="dMenu"> <ul class="menuList menu"> <li class="menuHeader">Design</li> <li class="projectHeader">Mother</li> <li clas ...

javascriptjqueryhtmlheight

Floating color problem

Do you know why the social icons turn black when hovered over? Could it be related to the navbar buttons? Is there a way to change the hover color to blue or red only? Link to code snippet <body> <nav class="navbar navbar-default navbar-fixed-t ...

htmlcsstwitter-bootstrap-3

The feature in Chrome that automatically reloads generated CSS is failing to refresh the page after SASS recompiles the CSS

I'm attempting to set up Chrome's DevTools to automatically reload a page when I save changes to a watched SCSS file that compiles and updates the CSS file. Although I have checked the Auto-reload generated CSS option, it is unfortunately not fu ...

htmlcssgoogle-chromesass

Is it possible to implement browser-specific CSS in Next JS without affecting other browsers?

Will Next JS automatically add all necessary browser prefixes to CSS styles defined with style jsx, or do I need to write the browser supports manually in my styles when using Next JS? transform: translate(50%, 50%); -webkit-transform: translate(50%, 50%); ...

cssnext.jswebkit

What is the best way to ensure that text fields remain hidden upon page load until the appropriate drop down option is chosen?

Is it possible to initially hide text fields and only reveal them when a specific drop down option is selected? The current JavaScript code somewhat achieves this, but I would like the input fields to remain hidden by default. <script language=" ...

javascripthtmljquery

Highlighting of Vue directives in HTML within WebStorm

Can the Vue attributes and directives be highlighted? Including those in quotes. ...

htmlsyntaxvue.jswebstormsyntax-highlighting

"What is the best way to include additional fields within a popover in an AngularJS application

This is my code for implementing a popover using AngularJS. I am trying to figure out how to add custom styling to the popover HTML, but I am having trouble binding elements in that part of the code. <!DOCTYPE html> <html> <head> <l ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Implementing a customized mobile style sheet for Google Maps v3

Currently, I am attempting to enforce the Mobile stylesheet for Google Maps v3 JavaScript within a jQueryMobile application. Within the screen stylesheet, the zoom control consistently stays in the top left corner and my efforts to relocate it have proven ...

cssjquery-mobilegoogle-maps-api-3

Looking to slide a form on top of an image carousel in Bootstrap - any tips?

How can I move this form over the "carousel"? <html> <head> <title>test</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http ...

htmlcssformsbootstrap-4

Despite the presence of ngIf, the tab is still displayed

Even though ngIf is used, the FirstTab remains visible. How can I completely remove the tab? Here is the code snippet: <tabs style="min-height:auto"> <tab tabTitle="FirstTab" *ngIf="str=='dp'" > <first-tab> ...

htmlangulartabsangular-ng-if

Is there a way to position two <div> elements side by side so that they are the same width and height without causing any scrolling?

I am in the process of creating a basic HTML page with two sections, each containing content. However, the last content within the second .right div is extending to the bottom of the page, causing it to become scrollable. I attempted to create another div ...

htmlcss

How to use jQuery Animate to create a step-by-step animation with image sprites?

I'm working on creating an image sprite using jQuery and I'm curious if it's feasible to animate it in steps rather than a linear motion. I initially tried using CSS3 animations, but since IE9 is a requirement, the animations didn't wor ...

javascriptjqueryhtmlcssjquery-animate

The challenges of $location.search().name and base href in application URLs

I am working on an Angular app and my URL appears as http://localhost:8080/personal?name=xyz. To extract the 'xyz' value in JavaScript, I am using $location.search().name. Here is a snippet of my code: app.js app.config(function ($locationProv ...

javascriptangularjshtml

Placing a pair of labels onto a bootstrap form while ensuring column alignment

I'm trying to format a form according to my UI/UX specifications, where there is a parent label and two sub-labels. Can this be achieved using Bootstrap? https://i.stack.imgur.com/J8wJZ.png However, I'm struggling to align the columns and rows ...

htmlcsstwitter-bootstrapforms

Set a maximum character limit for HTML input forms

Is there a way I can limit user input to more than 5 characters for certain fields like name? Additionally, is it possible to restrict a text input field so that only numbers can be entered (for example, an ID)? <tr> <th>ID:</th> ...

phphtmlforms

Generate a table containing information organized by category

I am looking to create a component Table that groups countries together. Here is my mockup: enter image description here I am struggling to find a solution for this issue. Can someone please assist me? ...

javascripthtmlcssvue.js

CanJS utilizes mustache templates to escape HTML tags

I have a requirement to present a series of choices to the user. I am using a mustache template along with the CanJS JavaScript framework to showcase these options. The problem arises when attempting to display an option such as: Potato Rs. 12 The mustac ...

javascripthtmlmustachecanjscanjs-view

Access a local website path using JavaScript upon opening the browser

I need a Javascript function that can determine the day of the week when my html file is accessed, allowing me to automatically open a specific sub-page within my project. ...

html