Center text in form-control items on Bootstrap 3 grids

Can you provide guidance on achieving proper alignment of inputs and labels across bootstrap grids?

I am looking to ensure that the labels are positioned exactly the same as the first column. Please refer to my plunk:

http://plnkr.co/edit/jaMAp38Rr1g7BLW3R5AI

<div class="row">
  <div class="col-sm-6" style="border-style:solid;border-width:1px;">
    <form class="form-inline" role="form">
      <div class="form-group">
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" style="width:80px;">
        <label>OK</label>
      </div>
    </form>
  </div>
  <div class="col-sm-6" style="border-style:solid;border-width:1px;">
    <form class="form-inline" role="form">
      <div class="form-group">
        <label>NOK</label>how can I align this to match the positioning of 'OK'?
      </div>
    </form>
  </div>
</div>
csstwitter-bootstrap-3

Answer №1

Try using the .form-control-static class

View example on Plunkr: Click here

This is the HTML code snippet:

<div class="row">
  <div class="col-sm-6" style="border-style:solid;border-width:1px;">
    <form class="form-inline">
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" style="width:80px;"/>
      <label for="exampleInputEmail1">OK</label>
    </form>
  </div>
  <div class="col-sm-6" style="border-style:solid;border-width:1px;">
    <p class="form-control-static"><b>NOK</b></p>
  </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

Place information from an input field into a specific row within a table

Utilizing Angular 4, I am developing a frontend application for a specific project. The interface features a table with three rows that need to be filled with data from an external source. https://i.stack.imgur.com/Dg576.png Upon clicking the "aggiungi p ...

htmlcssangulartypescript

The CSS styles for a:link, a:active, and a:visited do not seem to work with

My page contains the following CSS rule: a:link,a:active,a:visited{text-decoration:none;} I have encountered an issue where this rule is not working as expected. To apply the rule within a div with the id="test", I had to modify the rule like this: #tes ...

csscss-selectorsanchor

`A dynamically captivating banner featuring animated visuals created with JQuery`

I am currently in the process of designing a banner for the top of my webpage, but I have yet to come across any code that meets all my requirements. To provide clarification, I have attached an illustration showcasing what I am aiming to achieve. 1) The ...

javascriptjquerycss

The image is exceeding the boundaries of its parent element, even though a height has been specified

I need assistance with aligning an image inside a div that should take the height of its parent div, specifically the .hero class. Despite setting the image's height to 100%, it still extends beyond the parent div and doesn't adhere to the specif ...

css

Modify the collapse orientation in Bootstrap

I would like the button to expand from the bottom when clicked and collapse back down, instead of behaving like a dropdown. <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_ ...

javascriptcssbootstrap-5

Teaching etiquette to the students of Li

I'm having trouble getting two lists to display correctly on my website. I want one main navigation list that is horizontal and another sub navigation list that is vertical. To achieve this, I need to have two different classes for the list items in m ...

htmlcsshtml-lists

In configuring the print settings, I specified margins to ensure proper formatting. However, I noticed that the margin adjustment only applies to the first page. I need

I have a method that retrieves margin top value from the backend. It works perfectly on the first page of print, but on the second page, the margin top space is missing. initializePrintingSettings() { this.printService.fetchPrintSettings().subscribe(respon ...

javascripthtmlcssangulartypescript

Creating a full-width input field with text aligned to the right:

.wrap { white-space: nowrap; } input { width: 100%; } body { /* just so you can see it overflowing */ border: 1px solid black; margin: 40px; padding: 10px; } <span class="wrap"><input type="text">.pdf</span> Observing the cod ...

htmlcss

My navigation menu has a nested ul, but on mobile devices, it doesn't display all the items in the list. What could be causing

When I click on "Products" in my main navigation, only the first 6 items are displayed from a nested ul. How can I make all of them display when the user clicks on "Products"? Is this a CSS issue or a problem with the script? Here's a screenshot for r ...

javascriptjqueryhtmlcssnavigationbar

Angular - when removing items from ngRepeat, the remaining elements do not transition smoothly; instead, they abruptly snap or jump into position

Currently using AngularJS v1.4.8 with ngAnimate injected into my controller. In the process of creating a dynamic list using ngRepeat, tied to an array. The addition and updating of items in the list function smoothly with animations working as intended. ...

cssangularjsanimationangularjs-ng-repeatng-animate

Implementing a horizontal scrollbar for an AJAX datatable

Is there a way to incorporate a horizontal scrollbar into an Ajax Datatable? I attempted to use "ScrollX" :true, however, this method did not prove successful. $(document).ready(function () { $('#myDataTable1').DataTable({ "aj ...

jquerycssajax

What is the best way to manipulate the canvas "camera" in HTML?

I am currently developing a 3D game that involves navigating through skyboxes. My goal is to have the camera respond to user input, specifically detecting key presses (using WASD controls) to move the camera accordingly. Do you have any suggestions on how ...

javascripthtmlcsshtml5-canvas

Update the content of an HTML element without having direct access to the HTML code

I am currently in the process of creating a website using a website builder, and I am interested in customizing the default message that is displayed when a required field in the website form is left empty. The form in question is an integral part of the w ...

javascripthtmlcss

Having trouble with CSS media queries not functioning properly on Internet Explorer version 9?

Incorporated media queries in my design to adjust the width of certain elements on the page according to the browser's width. These are the queries I am using: @media screen and (min-width:1024px) @media screen and (max-width:1024px) Chrome, Safari, ...

cssinternet-explorermedia-queries

What is the best way to create a layout for Flexbox project boxes with three boxes per row?

My project cards are displaying in a single horizontal line and expanding infinitely to the right, rather than appearing in rows of three as intended. This causes them to extend outside the visible area in a long horizontal strip. See the issue in action ...

htmlcssflexbox

How to use CSS and Jquery to show a child element right after its parent element

I'm attempting to develop tabbed navigation using my current HTML structure. My goal is to display book titles as tabs and book details BELOW the tabs. Check out this example: or view this: http://jsfiddle.net/syahrasi/Us8uc/ I cannot change the HTM ...

jqueryhtmlcsstabs

The color of the text changes from its default color when not in use

Hey there, let me break this down for you... I'm currently in the process of styling a contact form. I've managed to change the text color of my input focus to white. However, when I click away from the form, the inputted text color reverts ba ...

htmlcsscontact-form

Exploring the functionalities of jQuery and Local Storage: Understanding the Selector's various states

I am currently developing a new feature for font customization on a website. The drop-down menu offers several font options to choose from. When a user clicks on one of these options, the following code is executed: jQuery(function($) { if (localStorage.g ...

jquerycssfontslocal-storageprop

The jQuery script designed to verify the page height doesn't appear to be functioning as intended

Below is a snippet of jQuery code that I'm working with: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> hasVBar=""; hasHBar=""; $(docume ...

javascriptjqueryhtmlcssdom

Efficiently shrink column width in Material-UI's <TableRow/> using ReactJS and Material-UI

At the moment, I am utilizing ReactJS along with Material-UI. One issue I am encountering is that when using Material-UI's <Table>, the columns' width are automatically set based on content which results in all columns having equal width. H ...

javascripthtmlcssreactjsmaterial-ui