Error encountered while attempting to vertically align text and input fields on the same line within the form?

<div class="col-sm-12 col-md-12 text-center">
  <h1>Example Horizontal Form Bootstrap</h1>
</div>
<div class="col-sm-12 col-md-4"></div>
<div class="col-sm-12 col-md-4 text-center">
  <form class="form-horizontal">
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">I am typing an email and password here...</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword3" class="col-sm-2 control-label">Enter your Email here........! Hello</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
      </div>
    </div>
  </form>

I wish to align the "text and textbox" in a single line. Currently, the text is displaying on multiple lines next to the text box as shown below.

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

htmlcssbootstrap-4

Answer №1

You have a few different choices available to you.

Choice 1: You could either shorten the label text or widen the column it is in. Here's an example

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c0cdcdd6d1d6d0c3d2e2968c948c93">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-md-4">
      <form>
        <div class="form-group form-row">
          <label for="inputEmail3" class="col-sm-3 col-form-label text-sm-right">Email</label>
          <div class="col-sm-9">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
          </div>
        </div>
        <div class="form-group form-row">
          <label for="inputPassword3" class="col-sm-3 col-form-label text-sm-right">Password</label>
          <div class="col-sm-9">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Choice 2: Alternatively, you can utilize the text-truncate class to cut off any overflowing text. See below

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63010c0c17101711021323574d554d52">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-md-4">
      <form>
        <div class="form-group form-row">
          <label for="inputEmail3" class="col-sm-3 col-form-label text-sm-right text-truncate">Enter your Email here........! Hello</label>
          <div class="col-sm-9">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
          </div>
        </div>
        <div class="form-group form-row">
          <label for="inputPassword3" class="col-sm-3 col-form-label text-sm-right text-truncate">Enter your Password here........! Hello</label>
          <div class="col-sm-9">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
          </div>
        </div>
      </form>
    </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

Is it possible to add a border to both the tbody and td

I currently have a table that is organized with tbody elements to group rows together. In order to create a grid-like structure, I applied borders to each individual td element within the tbody. However, I also desire to show that the tbodies themselves ar ...

htmlcss

Ensure the ajax call finishes before the body loads

According to w3schools, there are different ways an external script can be executed: If async is used: The script runs asynchronously with the rest of the page If async is not used but defer is present: The script executes after the page has finished par ...

javascriptphphtmlajaxdom

Tips for aligning images within Bootstrap columns and using auto zoom to properly fill the space

Here is the code snippet for displaying images: <div class="row"> <div class="col-12"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12"> <div class=&qu ...

htmlcssimagebootstrap-5

Tips for showcasing the lower portion of a picture

I have created a simple slideshow image div. I want to adjust it to show the bottom of the image instead of the top. Here is the HTML Code: <div class="slideshow"> <div> <img src="image1.jpg" /> </div> <div& ...

jqueryhtmlcss

New to using JavaScript and JQuery, attempting to position a form underneath an image at a specific URL for the

Hello, I'm having difficulties placing a form below an image with a specific URL. As someone who is still learning JQuery, I am unsure of what mistake I might be making. Is there anyone who can help me figure out what's wrong here? <html> ...

javascriptjqueryhtmlimageforms

Preventing the reoccurrence of function events

I need to create an event triggered by a mouse click when the user clicks a button. The code snippet below shows my attempt, but I'm facing an issue where the function continues to run if the user clicks on a second input field after the initial one: ...

javascriptjqueryhtml

Guide to building a container/palette for buttons in Angular 8

I am looking to design a unique container or palette to house some of the buttons on my webpage, allowing me to customize their background color and add other effects. Here is an example of what I am envisioning, with 3 buttons (Question, Action, Output) ...

htmlangularangular-materialcontainerspalette

How to position text in the center of a video using CSS

My attempt to center the name of my blog on top of a video background was not successful, even though I tried positioning it absolutely with 50% from the top. Can someone assist me in vertically and horizontally centering the text over the video? Here is ...

htmlcssvideotext

Implement a fullscreen hero image on a specific blogroll template page in Wordpress

My portfolio website uses custom page templates for each page. The blog page is not the landing page, but an interior page. I have been able to add a custom hero image to every page template except for the blog page. Currently, I am using the content.php p ...

phphtmlwordpressfullscreenblogs

javascript code to close slide div without hiding the setting icon upon clicking outside the div

Can you help me with an issue I am facing while implementing a slide div for creating theme color? The div works fine, but when I click outside of it, the div does not close. I have tried multiple solutions, but none seem to work. I have researched various ...

javascripthtmlcss

Tips for maximizing page layout efficiency without compromising on element visibility

What is occurring https://i.stack.imgur.com/Agjw6.gif The use of .hide() and .fadeIn(200) is resulting in a jittery effect that I would like to avoid. Desired Outcome When the user hovers over the menu icon, the menu icon should vanish the text "Pr ...

javascriptjqueryhtmlcss

Injecting CSS styles into dynamically inserted DOM elements

Utilizing Javascript, I am injecting several DOM elements into the page. Currently, I can successfully inject a single DOM element and apply CSS styling to it: var $e = $('<div id="header"></div>'); $('body').append($e); $ ...

javascriptjqueryhtmlcssdom

Tips for seamlessly incorporating advertisements into a mixed application

I am having trouble adding banner ads to my hybrid application developed with Telerik. Despite my extensive research, I have been unable to find a suitable solution. Is there any html5 or javascript banner advertising service/API that is compatible with ...

javascripthtmltelerikadsadsense

Exploring the power of SASS by iterating and assigning values

My approach to assigning custom colors to variables is not typical Bootstrap. Due to my dependency on the Bootstrap CDN, I am recreating SASS variables that mimic BS4 variables. Keep reading for more details! I believe I am very close to achieving my desi ...

sassbootstrap-4

Enhance the aesthetics of placeholder text in Semantic UI React using CSS styling

Currently, I am utilizing Semantic UI dropdowns within my React application to generate drop-down menus similar to the ones showcased in their documentation found here: The initial text displayed is "Select Friend", and it appears with a semi-transparent ...

cssreactjssemantic-ui

Form submissions are not saving checkbox answers

As a beginner, I'm struggling to save the checkbox answers on the page after submission. The code below is quite lengthy (checkboxes start at 314). I have a feeling that I might be missing a piece of code, but I just can't seem to pinpoint what i ...

javascripthtmlarraysreactjscheckbox

The CSS background-clip property isn't taking effect in React when the background is dynamically updating

If you're ready to dive into live coding, check out this CodeSandBox I've set up for you here: https://codesandbox.io/s/0j99m3m50 Let me explain what's going on: I have a React component with a state object that contains two properties (u ...

cssreactjsbackground

The Javascript function was invoked, however the complete result was not yet delivered

I'm still a newbie when it comes to Meteor and Node.js, so what I'm struggling with might be a piece of cake for the more experienced developers out there. My task involves writing a script that aims to return the time 30 minutes into the future ...

javascripthtmlnode.jsmeteor

Modify the class of a div element based on the user's login status

Apologies for the repeat question, but I need some guidance. How can I apply CSS styling to a div only if the user is logged in? I currently have the following PHP code in place: if (isset($_SESSION['username'])) { include("/view/leftmenu.php" ...

phpcss

How can you prevent <div>s from overlapping when using the float property?

I am facing a CSS challenge that I haven't been able to resolve yet: My goal is to create a webpage layout with two divs side-by-side in a row (using float:left; and float:right;) and then a third div below them. The issue arises when the top row (de ...

csshtml