Struggling with aligning form-group elements along with razor html helper buttons in Bootstrap's form-horizontal layout

I'm struggling with properly aligning buttons in my razor markup.

When using form-horizontal:

<div class="row">
  <div class="col-md-6">
    <div class="form-group">
      @html.labelfor
      @html.editorfor
      @html.validationmessagefor
    </div>
  </div>
  <div class="col-md-4">
     <button class="btn btn-default" type="button" id="buttonId">
         <span>Button Label</span>
     </button>
  </div>
</div>

The button lines up with the <label>, but I want it to line up with the <input>. I've tried adjusting margins and padding without success.

EDIT: Here is a link to the Fiddle

htmlcsstwitter-bootstraprazor

Answer №1

To create rows, you can combine the form-group class with row elements like this:

<div class="row">
    <div class="col-xs-12">
        <label class="control-label" for="whatItsFor">Enter Label Text:</label>
    </div>
</div>

<div class="form-group">
    <div class="col-xs-6">
        <input class="form-control text-box single-line" ... />
...

See Demo Here

In this example, I have used xs as breakpoints.

If you are using Bootstrap 3.2, consider utilizing column offsets instead of empty columns like this:

<div class="col-xs-4 col-xs-offset-2">
    <button id="buttonId" class="btn btn-default" ...>Click Me</button>
</div>

Second Demo Link

Answer №2

    <div class="form-horizontal">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="control-label" for="whatItsFor">Specify Purpose:</label>
                    <input class="form-control text-box single-line input-sm" id="rwhatItsFor" maxlength="200" name="mvcModelBinding" readonly="true" type="text" value=""> <span class="field-validation-valid text-danger" data-valmsg-for="whatItsFor" data-valmsg-replace="true"></span>
    
                </div>
            </div>
            <div class="col-md-2"></div>
            <div class="col-md-4 form-group">
                <button id="buttonId" class="btn btn-default" type="button" value="valueHere"> <span>
                Content
            </span>
    
                </button>
            </div>
        </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 HTML pattern [A-Za-z] specifies that the entered name must adhere to the required format, such as inputting "john"

<div class="title details"> <label for="idtitle" class="label">Title</label> <input type="text" placeholder="Title" id="idtitle" pattern="[A-Za-z]" required> </div> Link to Firefox screenshot ...

javascripthtmlcss

Unable to retrieve the value of an option element within a select tag using Selenium

I am having difficulty in choosing an option from a dropdown menu while using Selenium with Python. Displaying below is the HTML code snippet: <select class="hm-input hm-dropdown" type="text" id="HME-10-widget_calendar_1" ...

pythonhtmlselenium

Utilize the entire width for header elements

I have implemented four header elements: home, about, portfolio, and contact. I want these elements to stretch across the entire navigation bar with each taking up 25% of the space. How can I achieve this? Additionally, I specified that the home element sh ...

htmlcss

How can you verify a phone number input?

I have a phone number field in my form that needs validation. The conditions are that the numbers may be 8 digits or 10 digits long, otherwise an error message should be displayed. Is this code snippet correct? <input class="form-control" name="phone_n ...

htmlvalidation

Utilize Angular to organize data in a single-dimensional array

In my project, I am using Angular and Bootstrap to create a dynamic data grid where users can edit the data. The dataset consists of an array of objects, with each object containing a non-unique group property to categorize records. For example: [ { ...

javascriptangularjstwitter-bootstrap

How can I save or export an image file containing HTML content?

Currently, I am working on a project where I am generating dynamic HTML content. My goal is to be able to export or save this HTML content as an image file using PHP, jQuery, and JavaScript (or any other method if applicable). Can anyone help with the im ...

javascriptjqueryhtmlimage

Ways to format table using flex-wrap sans the use of flexbox

My HTML and CSS structure is as follows: .item { background: white; padding: 5px; display: inline-block; text-align: center; } .item > div { background: yellow; width: 60px; height: 60px; border-radius: 50%; display: table-cell; ...

htmlcss

Concealing axis lines within the initial circular grid or opting not to include them

Is there a way to incorporate some whitespace within the center circle of the radar chart? I'm aiming for the axis to commence at 1 radius (the initial circular line) or perhaps have the stoke set to 0 for the primary radius. Any assistance would be g ...

javascriptcssreactjsd3.js

Reorganizing the order of Bootstrap columns in a single row for mobile devices

I am struggling with changing the order of Bootstrap columns on smaller devices. I need them to remain in a single row on all screen sizes, but I want them to display in a different order on phones. Specifically, I want the layout to look like this on desk ...

htmlcssbootstrap-4

Tips for incorporating Javascript in an innerHTML inline css situation

I'm just starting to learn about html5 and php. I'm curious about how to incorporate javascript into my existing code. Currently, I have data from a database displayed in an HTML table. My goal is to align the output of the last cell more toward ...

javascriptphphtmlcss

Setting the default selected option in Vue for an object

Can the v-model data be different from the default option in this scenario? data: function() { return { user: { usertype: {}, } } <select v-model="user.usertype" class="btn btn-secondary d-flex header-input"> <option v-for= ...

javascripthtmlcssvue.js

What is the reason for the Client Height value not affecting other elements?

I'm trying to set the spacing of my sidebar from the top equal to the height of the header. However, when I use clientHeight in JavaScript to get the height and then try to apply it to other elements using marginTop or top values (with position includ ...

javascripthtmlcssweb

Using a DIV to contain a FileUpload Control in an ASPX page

Scenario: I have an ASPX page (Page A) without a form element, which contains a DIV displaying another ASPX page (Page B) with a FileUpload Control inside a form element. Requirement: Submit the form to upload the file without refreshing or navigating awa ...

htmlasp.net

Encountering an unexplained JSON error while working with JavaScript

I'm trying to retrieve data from a JSON API server using JavaScript AJAX and display it in an HTML table. However, I keep encountering an undefined error with the data displaying like this: Name id undefined undefined This is my code snippe ...

javascripthtmljsonajax

The method window.getComputedStyle retrieves the CSS max-height property containing an unresolved calc() function

Has anyone encountered a challenge with a function related to Angular in their project? Here is a snippet of the code causing issues: console.log(window.getComputedStyle(this.frontLayer.nativeElement).maxHeight); And within the component template: <di ...

javascriptcssangular

Form tag abruptly disappears in Chrome inspector

As I delved into someone's .asp code, I stumbled upon a concerning discovery - an unclosed HTML tag. To unravel this mystery, I turned to Chrome and its inspector tool only to find the missing tag right there in front of me! Puzzled, I returned to th ...

phphtmlgoogle-chrome-devtools

Issue with DIV height in Internet Explorer occurs only when application is accessed using server name

Encountering a unique issue specific to IE (confirmed in v8 and v9). When utilizing jquery to determine the height of a div: $('#sys_MainPage').height() In Chrome, Firefox, and when accessing using the IP address, this code returns around 26 ...

javascriptjqueryasp.nethtml

Using jQuery in Rails 3 to display the id of a td element

I am working with a 3x3 table that contains td elements with unique id's (id='a1'...id='c3'). I want to enable the user to click on any of these 9 td elements and receive an alert displaying the id of the clicked td. Below is my C ...

javascripthtmlruby-on-rails-3jquery-uicoffeescript

What is the process for creating a List Grid View utilizing this particular code?

I attempted to modify the stylesheet extensively and also created a small function in JavaScript, but unfortunately it did not yield the desired results. <div class="row featured portfolio-items"> <div class="item col-lg-5 col-md-12 col-xs ...

htmlcss

Ways to implement a personalized button in place of jquery ui buttons

Is there a way to replace the standard jQuery dialog buttons with custom images? I have created new buttons in Photoshop with a .png extension and would like to use them instead of the default dialog buttons. I think this can be done through CSS, but if y ...

jquerycssjquery-dialog