Achieving uniform alignment of multiple field labels in Bootstrap and Simple Form

Here is the current layout of my form: https://i.sstatic.net/2vZjl.jpg

You may notice that the labels are not properly aligned. I would like them to appear like this: https://i.sstatic.net/gm39D.jpg

Below is the code for all the input fields:

<%= simple_form_for [@company], html: { class: 'form-horizontal' }, wrapper: :horizontal_form do |f| %>
  <div class="form-group">
    <label class="col-md-1 control-label"></label>
    <div class="col-md-9">
      <%= f.input :name,  :label => "Name of Company" %>
    </div>
  </div>
  <% end %>

Answer №1

Since you've implemented the bootstrap form-horizontal class, this issue arises. The solution is to override the existing bootstrap css.

Add the following css code snippet into your personalized css file (Make sure to utilize your parent class):

.parent-class .form-horizontal .control-label {
    text-align: left;
}

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

What should we name this particular style of navigation tab menu?

What is the name of this tab menu that includes options for next and previous buttons? Additionally, is there a material-ui component available for it? https://i.sstatic.net/0m9rH.png ...

Resizing Images with 'fitin' Attribute in HTML

When I upload images to my shop's site on Rakuten, the platform requires them to be 128px in size. However, my shop uses 255px for every image. The uploaded images are named like this: "xxx.jpg?fitin=128:128". I changed the size to 255px, but now the ...

How is it possible that I am still receiving spam emails even though I have already implemented reCaptcha

I recently integrated Google reCAPTCHA v3 into my HTML form to combat spam emails, but I'm still receiving unwanted messages. What steps can I take to further prevent spam without relying on PHP code and using only JavaScript scripts? Currently, my c ...

"Using Bootstrap's toast feature repositions every element on the

I am working on a website project and encountering an issue with a bootstrap toast. The toast currently appears in the top right corner, but I would like it to display above the carousel without affecting the layout. Instead, when the toast appears, it shi ...

Issue encountered when sending information to asmx web service via ajax and displaying the result on an HTML page with a javascript function

I have developed an ASMX web service that looks like this: [ScriptService] public class CurrencyData : System.Web.Services.WebService { [WebMethod] public string DisplayCurrency(double amount, string sign ,string style) { swi ...

What is the best method to exclude the <a> tag when displaying content in HTML?

Is there a way to hide the link within an a tag when printing? .p { display: none; } @media print { .p { display: initial; } .np { display: none; } } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css ...

Unexpected Issues with the Ant Design Sidebar Layout Demo

My React webapp is utilizing the Ant design component framework version 4. I attempted to integrate this example from the Antd documentation into my webapp: https://codesandbox.io/s/ymspt However, when I implemented the code in my webapp, the result didn ...

Having two owl carousels on one page is causing some issues

Struggling to implement two owl carousels on my page. Gif: View Gif Here The first carousel (shown at the top in the gif) is functioning perfectly. However, the second one (beneath the first in the gif) is not behaving as expected. Instead of displaying ...

What steps can I take to ensure that the v-main element occupies at least 70% of the viewport height in Vuetify?

As a newcomer to Vuetify, I am still learning the ropes. One thing I've noticed is that <v-main> automatically expands to fill the space between <v-app-bar> and <v-footer>, taking up the entire viewport height. My concern arises wh ...

Unlock the Power of Vue Draggable in Vue.js 3 with These Simple Steps

When attempting to implement Draggable in Vue.js 3, I encountered an error message: VueCompilerError: v-slot can only be used on components or <template> tags. Below is a snippet of my code: <draggable tag="transiton-group" name="s ...

Encountering issues parsing JSON in Rails containing the u0022 character

Decoding a json string that contains the \u0022 character has been challenging for me. I have successfully decoded: >> ActiveSupport::JSON.decode("{\"json\":{\"difficulty\":1}}") => {"json"=>{"difficulty"=>1}} Ho ...

Properly aligning sub-divs within a parent div using CSS

I'm facing a problem with my CSS styling that I need help with. Here is the screenshot of the issue I am trying to center align the inputs, each placed in its own div, within my form. Below is the HTML markup for the form: HTML Markup Code CSS st ...

Top Choice for Customizable Location Bar Dragging

I'm currently working on an app that features a draggable location bar. This feature will allow users to navigate through chapters in a book and will be displayed at the bottom of the screen, similar to Kindle or other mobile reading applications. I ...

The absence of image input was evident in the POST request

Within my Django template, I have an input field linked to a Django ImageField. Once rendered, the HTML code appears as follows: <form action="/accounts/username/" method="post" id="profile_form" enctype="multipart/form-data"> &l ...

Is there a way to dynamically expand and collapse all table rows, with the latest row always remaining visible, using pure JavaScript?

I have a form input field where I enter data. The entered data is then displayed in a table as a new row, with the most recent entry at the top. What I want to achieve is to show only the newest row in the table and hide all other rows. When I hover over ...

The "Read more" feature is not functional on mobile devices

I am encountering issues with my Wordpress blog on mobile screens. The "read more" button is not functioning, and the screen size does not fit properly on mobile devices. Visit abood250.com for more information. CSS Styling: /* =Global ----------------- ...

What is the correct way to superimpose an image with a transparent background?

I am currently working on a mini game that involves overlaying images on camera views. The goal is to have the gun displayed without the background rectangle, as shown in this image: https://i.stack.imgur.com/yU4A2.jpg The code snippet below is relevant ...

Struggling to create a SVG Line with DOM Manipulation in Typescript

I'm having trouble adding an SVG element to my div using the appendChild function in TypeScript. I want to add a line inside the SVG, but for some reason, I can't see the line output on my browser. There are no errors showing up either. Please he ...

Automatically adjust column sizes using Bootstrap's responsive width feature

While I have a feeling this question might have been asked before, my search has turned up no similar issues. I am currently working on styling a menu bar using a standard bootstrap row and columns setup (flexbox). The menu is dynamically generated by Wor ...

Develop a program in Python using Selenium to automate web scraping in a loop

I am looking to create a loop that will allow me to extract the individual time figures for each horse in all eight races from the at the races website. Here is an example of the first race (17:15) out of the eight: from selenium import webdriver from s ...