Ensure that Bootstrap rows and columns are properly lined up with their respective fields

Currently, I am experimenting with Bootstrap's responsive columns and rows. In order to understand how it functions, I have set up labels and fields. My main challenge now is aligning the text-fields with their respective labels. Despite referring to Bootstrap's documentation for guidance, I am struggling to find a solution to ensure proper alignment.

The issue I am facing is that my fields seem to be shifting towards the bottom rather than staying in line with the labels. I am seeking assistance on how to correctly align the text-fields with the corresponding labels.

Reference: https://getbootstrap.com/docs/4.0/layout/grid/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>

<div class="container">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-4">
        One
      </div>
      <div class="col-sm-4">
        two
      </div>
      <div class="col-sm-4">
        three
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <input id="Text1" type="text" placeholder="one" />
      </div>
      <div class="col-sm-4">
        <input id="Text2" type="text" placeholder="two" />
      </div>
      <div class="col-sm-4">
        <input id="Text3" type="text" placeholder="three" />
      </div>
    </div>
  </div>
</div>

https://i.sstatic.net/aWzfu.png

javascripthtmlcsstwitter-bootstrap

Answer №1

Instead of arranging 1, 2, and 3 in a row, you should consolidate the two 1s in a column. Here is an example:

<div class="col-md-4>
  <p>One</p>
  <input id="Text1" type="text" placeholder="one" />
</div>
<!--add other columns below-->

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

Is it possible to make an image gradually appear and disappear?

Is there a way to create a continuous fade in and out effect for an image, transitioning between 40% and 100% opacity? I attempted using a CSS3 opacity property, but it only allows for 0% and 100%, causing the fade effect to be ineffective. Does anyone h ...

jqueryhtmlcss

I'm looking to replicate the testimonial slider from the link provided. How can I achieve this?

I'm looking to replicate the testimonial section layout seen on Kanbanize, which features both vertical and horizontal sliders. I'm unsure of how to link the two sliders so they move in sync. I typically use Swiper for carousel/slider functionali ...

javascripthtmlcssswiper.js

Utilize buttons and Moment.js to efficiently filter an array of objects by date within a specific range in React

My task involves working with an array of objects containing dates and scores. I want to implement an onclick handler that updates the data whenever one of the 4 buttons is clicked. These buttons represent 3 months, 6 months, 12 months, and a reset option. ...

javascriptreactjsarraysfiltermomentjs

Capturing the action phase in Liferay to change the cursor to 'waiting' mode

I'm currently working on a large Liferay project and have encountered a specific issue: Whenever something in the system is loading or processing, I need to change the cursor to a waiting GIF. While this is simple when using Ajax, there are many inst ...

javajavascriptjquerycssliferay

The function of cookieParser() is causing confusion

Having an issue that I've been searching for answers to without success. When using app.use(express.cookieParser('Secret'));, how can we ensure that the 'Secret' is truly kept secret? I'm feeling a bit lost on this topic. Is ...

javascriptnode.jscookiesexpress

Seeking the "onChange" functionality while implementing the "addEventListener" method

I've been busy with a React project lately. Instead of adding 'onChange' to each button within the html object like this: <input type='text' onChange={myFunction} /> I'd prefer to include it in the JS code like so: doc ...

javascripthtmlreactjs

Bulk database upserts with promises

Currently, I am working on parsing a list of JavaScript objects and upserting them to the database one by one using Node.js. The process typically looks like this: return promise.map(list, return parseItem(item) .then(upsertSingleItemToDB) ...

javascriptmongodbmongoosepromisewhen-js

Personalize the way UIkit tooltips appear

I've been working on customizing a uikit tooltip for my checkbox. I managed to change the font and background color, but for some reason, I can't adjust the font size. I even tried adding a custom class without success. Do you think it's pos ...

cssuikit

Interactive menu dropdown failing to function properly

I am working on dynamically creating a dropdown javascript menu using javascript. After fetching menu items from a MySQL database in PHP and storing them in a JavaScript array, I aim to generate the menu dynamically through a JavaScript function. This way ...

phpjavascriptjquerydrop-down-menu

Showcasing a variety of product titles with the help of CSS

Since the HTML is hosted on another server and I have no control over it, how can I use CSS to style certain list items? For example, The HTML on the server side: <ol> <li>Coffee</li> <li>Milk</li> <li>Orange Juice< ...

htmlcsslist

What is the best way to transfer a PHP variable to an external PHP file I am retrieving data from using AJAX?

I have two files named index.php and ajax.php. In index.php, I am using AJAX to retrieve data from ajax.php and display it on the page. I want to pass the username to ajax.php so that I can use it in my SQL statement. Does anyone know how I can accomplish ...

javascriptphpjquerymysqlajax

Implementing a function in ReactJS that is activated by multiple buttons

Apologies for the unclear title. My issue revolves around having three different button tags, each of which should send a unique argument to the function selectSupplier(). However, no matter which button is clicked, only the last value ("ultramar") is be ...

javascripthtmlnode.jsreactjs

Setting a variable equal to user input

When using a jQuery script, the elements for the details are dynamically created inside a jQuery function. However, there seems to be an issue with assigning the value from the variable "startLocation" to the input "detail_startLocation[]". Only the firs ...

javascriptjqueryhtml

Generating HTML content using JavaScript object data

I have a JavaScript file that holds data in the form of objects : let restaurant_A = { name: "BBQ place", min_order: 20, delivery_charge: 5, menu: { //First category "Appetizers": { //First it ...

javascriptobject

Creating a pop-up confirmation message upon email submission through React and custom CSS styling

In my React project, I've created an email form and included the <div className="msg">Message has been sent</div> class. However, I only want this message to display when the message has successfully been sent (status: true). How ...

javascriptcssreactjsnodemailer

Trigger a refresh of the Angular app by clicking a button

Recently, I embarked on developing a single-page application that allows users to input data in a text box and navigate to another page. While designing the second page, I aimed to incorporate a home button that would not only return me to the initial view ...

javascriptangularjshttp

The execution of Node.js on data is triggered only after the content has been successfully written

Hello, I am attempting to establish a connection to a telnet server using Node's net library. const net = require('net'); const con = new net.Socket(); con.connect(23,'10.0.0.120', () => { console.log('Telnet connected ...

javascriptnode.jssocketstelnet

Alternative to v-html in Vue.js: Using DOM manipulation as a

Coming from my background in React with JSX, I am used to setting HTML using code like var test = <div>i am a div</div> It is common practice for me. Although I know that the same result can be achieved using v-html in Vue, I was curious abou ...

javascriptvue.jsvuejs2

Refreshing search results in Asp.net MVC3 without having to reload the entire page

I am currently working on a website using asp.net MVC3. In one of the views, I display query results managed in the controller using a foreach loop. Now, my goal is to automatically refresh the output of the query periodically without reloading the entire ...

c#javascriptjqueryajaxasp.net-mvc-3

typescript defining callback parameter type based on callback arguments

function funcOneCustom<T extends boolean = false>(isTrue: T) { type RETURN = T extends true ? string : number; return (isTrue ? "Nice" : 20) as RETURN; } function funcCbCustom<T>(cb: (isTrue: boolean) => T) { const getFirst = () => ...

javascripttypescripttypescript-generics