Centering text vertically in a horizontal form row with Bootstrap 4

How can a div with text be centered vertically in a Bootstrap 4 Horizontal form?

For example, instead of a form input have a plain text div like "Password goes here," you can use the following code snippet:

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10 align-middle">
      Password goes here
    </div>
  </div> 
</form>

Attempts with classes like align-middle and d-inline-block did not produce the desired effect.

Answer №1

Utilize the align-self-center class for vertical alignment

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10 align-self-center ">
     Insert password here
    </div>
  </div> 
</form>

Reference:https://getbootstrap.com/docs/4.3/utilities/flex/#align-self

Demo:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10 align-self-center ">
     Insert password here
    </div>
  </div> 
</form>

Answer №2

Attempting to vertically center text within a div using the CSS rule vertical-align: middle will prove unsuccessful. For example, if you have a div with a height of 50px and wish to center-align a link inside it, the easiest method would be to set the line-height property to 50px.

.menu{
   height: 20px;
   line-height: 20px;
 }   

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

Grid of domes, fluid contained within fixed structures and beyond

I've been grappling with this issue for a while now, and have had to rely on jQuery workarounds. I'm curious if there is a way to achieve this using CSS or LESS (possibly with javascript mixins). The page in question consists of both fixed and f ...

I encountered an issue while iterating through Object HTMLDivElement and applying ChileNode style z-index, resulting in an undefined output in both Firefox and Chrome browsers

function adjustPosition(currentDiv) { try { for (var i = 0; i < document.getElementById("parentContainer").childNodes.length; i++) { document.getElementById("parentContainer").childNodes[i].style.zIndex = 0; ...

Seamless transition of lightbox fading in and out

Looking to create a smooth fade in and out effect for my lightbox using CSS and a bit of JavaScript. I've managed to achieve the fading in part, but now I'm wondering how to make it fade out as well. Here is the CSS code: @-webkit-keyframes Fad ...

Building a stylish bootstrap button within the cell rows of a table using jquery

I need to insert a button in the "Details" column. <button class="btn btn-primary btn-fab btn-icon btn-round"> Here is my code: var tableRef = document.getElementById('ticker_table').getElementsByTagName('tbody')[0]; var ti ...

Underline Rows in CSS

When designing my website, I decided to organize the content into rows using CSS instead of tables. To create a line separating each row, I used height:px; for each row manually. However, this method resulted in the line jumping around inconsistently acr ...

What is the best way to address the excess white space between an image and progress bar on larger screens while utilizing the Bootstrap Grid system?

https://i.sstatic.net/NXMNV.pngLet's begin by visualizing the concept through these images: In Picture (1), the progress bars are positioned below the image on medium to large screens, with the text aligned to its right. https://i.sstatic.net/Cw1aM.pn ...

How can you set a condition for when no matches are found in a list filter?

I recently came across a fascinating example on W3 Schools that taught me how to implement a search filter. Below, I have customized it for everyone's reference. I am interested in modifying it to only display a list item with the message: No matche ...

React and Mui are experiencing a peculiar issue where a background is mysteriously missing from a component in a specific location

Exploring React 16 and functional components with hooks Discussing Mui 4 framework Adding a background pattern to multiple login pages seems simple, right? Here is an example of a login page component: return ( <Box width={1} height={1}> ...

verifying the user's screen dimensions

I'm currently exploring ways to customize the appearance of my website based on the viewer's screen resolution. I am interested in potentially optimizing the layout for vertical screens on mobile devices, and horizontal screens for laptops. Addit ...

Ways to display title attributes when focused using jQuery?

Typically, title attributes in all browsers only appear when the mouse hovers over them. I am looking to also display them when users are focused on them via keyboard navigation. Unfortunately, without using JavaScript, this cannot be achieved solely throu ...

Tweaking the placement of the dropdown menu in the subnavigation area

Just getting back into coding after a long hiatus - I've dabbled in the past but it's been about 6 years since I've worked with any code. Currently, I'm working on replicating a website for practice. I have created a nav bar and a drop ...

Issue with CSS pseudo-elements :before and :after in Internet Explorer

I am attempting to create a heading with lines on both sides, but I am facing an issue where it only seems to work on the left side in IE. Check out the code here h2 { position: relative; overflow: hidden; text-align: center; } h2:before, h2:afte ...

Tips for incorporating Action Links into your CSS workflow

<li class="rtsLI" id="Summary"><a href="javascript:void(0);" onclick="javascript:rtsXXX.OnClientTabSelected(this‌​, 0);" class="rtsLink"><span class="rtsTxt">Test</span></a></li> I have made a change by replacing th ...

Ways to determine if a class is a part of the bootstrap framework

Is there a way to verify if a class like mt-3 or table-left is part of the bootstrap framework? Are there any online resources, tools, or plugins in VSCode that can assist me in determining if a class is a predefined bootstrap keyword? ...

Bootstrap 4.5 integration in jQuery builder is malfunctioning

Take a look at this jsfiddle that attempts to utilize jQuery QueryBuilder with Bootstrap 4.5 References Bootstrap CSS jQuery Library Bootstrap JavaScript jQuery QueryBuilder Plugin Here is the HTML code snippet for the builder section: <div id=" ...

Enhance user experience with real-time form validation in Bootstrap 4 as the user inputs

In order to troubleshoot my issue, I created a simple index.php file with 2 input fields and a button that redirects to page2.php. These input tags have a regex pattern for Bootstrap-4 form validation. Issue 1: The validation only occurs after clicking ...

Customize CSS to target the first and last elements in a row using flexbox styling

I am facing a challenge in selecting the last element of the first row and the first element of the last row within a flex container. The setup involves a flex-wrap: wrap; for my flex container where all elements have flex: auto; with different sizes. Thi ...

How can I add text to the title of a border using Bootstrap5?

I am attempting to create a design where text appears within the border of an element. I am currently utilizing Bootstrap 5 and jQuery for this project. Despite my efforts with fieldset and legend elements, I have not been successful in achieving the desir ...

Creating a unique dropdown menu with HTML and CSS: Learn how to include a button in between each main link without disrupting the layout

I successfully implemented a navigation menu on my website by following this helpful tutorial. Below is the CSS code I used: ul { list-style-type: none; padding: 0; margin: 0; background-color: #F2C777; } li a { display: block; p ...

Margin challenge in CSS

Just starting out with CSS, so please be patient with me. I'm currently working on customizing a form and everything is looking good, except for the confirmation label which is located in a div. I've managed to create space between other elements ...