Center anything vertically within the input element of a form-group using Bootstrap 4

Is it possible to vertically center any element in the middle of an input using Bootstrap 4 without a complex structure?

The first example at https://jsfiddle.net/fekula/8j4ew5df/9/ looks good, but the second and third examples are not ideal.

<div class="form-row align-items-end">
   <div class="form-group col-md-7">
    <label>Name:</label>
    <input class="form-control">
  </div>
  <div class="form-group col-md-5">
    <label>
        Center text
    </label>
  </div>
</div>

Any suggestions or solutions? Thank you.

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

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

The initial label is not perfectly centered; it only has a bottom margin by default for labels that do not have specific classes. To center the label vertically, you can add the mb-2 class to the .custom-control.custom-switch element.

However, to ensure proper vertical centering of your input[type="text"], place it within a .row element alongside the labels.

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

Center align button vertically in Bootstrap and ensure it remains fixed in place

I have successfully implemented a bootstrap button that is vertically aligned in a column on the left side of the screen using the code below: <div class="col-sm-1 align-self-center"> <button class="btn btn-prima ...

htmlcssbootstrap-5

Display a different string from an array at random, revealing each one gradually with a time delay

Looking for a way to display strings randomly without replacing one with another? I need a script that can shuffle words in a list and present them in a random order, with the ability to adjust the delay between each word. If you have a more effective code ...

javascripthtmljquery

Center align `div 1` with CSS and right align `div 2`

Take a look at this code snippet: http://jsfiddle.net/zygnz/1/ <div class="container"> <div class="left"> LEFT </div> <div class="right"> RIGHT </div> </div> Is i ...

htmlcss

Designing a dynamic HTML dropdown menu using data from a MySQL database

Attempting to pull data from the "aircraft" table in the "aircraft" database for a dropdown menu on an HTML page. Unsure of where to begin as I have no experience connecting the two. This is the desired format: <!DOCTYPE html> <html> <bo ...

javascriptphphtmlmysqlsql

CSS Sidebar not fully implementing all styles listed

I'm currently in the process of designing my main webpage and have encountered an issue with the sidebar. While the menus are displaying correctly on the left side, the sidebar background and width are not functioning properly. As a result, only the m ...

cssbootstrap-4

Sample code for table_class_list and table_row_class_list is provided below:

I am excited to start using the newest version of the TinyMCE plugin, with its enhanced features. I experimented with the URL to understand how the table plugin functions. In the example provided, I noticed two classes named Dog and Cat, each associated ...

csstinymce-4

What are the best scenarios for using %, em, or ex units in CSS font styles?

I'm trying to figure out in what situations I should use %, em, and ex as font units of measurement in CSS. Can someone provide some clarity on this for me? I'm feeling a bit confused. ...

css

Having trouble positioning items to the right in bootstrap

<div id="unique-content-wrapper"> <nav class="navbar navbar-expand-lg navbar-light bg-light" id=""> <button class="navbar-toggler" id="menu-toggle"><span class="mater ...

htmlcsstwitter-bootstrapbootstrap-4

Link the controls to an HTML table after clicking the button

I'm very new to programming and I'm seeking your help and guidance in order to improve myself. Here is the code where I am trying to add a control to an HTML table upon button click, but I am facing difficulties in its execution. Can anyone assis ...

htmldomhtml-table

The margin of the parent container is influencing the margin of the child element

Purple Working on displaying a rectangle shape in a browser using divs in my React project. Everything works fine, but when I add margin to the parent base and then draw the boxes, there's some space between the mouse cursor and the actual box. The ...

javascripthtmlcssreactjs

Attempting to apply border radius to a button, yet encountering difficulties in making it work as intended

Creating HTML Class In the following HTML code, a class is created with an anchor tag inside. Although CSS is applied to create a button, the border-radius property seems to not be functioning as expected. .instagram_button a { font-weight: 500; f ...

htmlcssbootstrap-4

Angular ng-repeat app not functioning as intended due to a lack of complexity

Seems like I've stumbled upon a rather silly issue here and it might be a duplicate question, but I'm still scratching my head over it. I have this incredibly basic Angular app along with some HTML. While debugging in Chrome, I can clearly see ...

javascripthtmlangularjsajax

Creating a CSS div that has children which act like a table, allowing one child to stretch and fill the

Having a <div> with display:table; and around 10 children (number may vary, could be buttons or inputs) with display:table-cell;. The width for all children is set except for one. The goal is to have the last child without fixed width fill the remain ...

htmlcsshtml-tablecss-tables

CSS for dynamic styling of anchor tags

On the example.com website, I have added the following HTML (Very important note). Now, I am attempting to add CSS to a selected link in order to highlight the chosen value. <a class="value" href="http://example.com?filter=value1">Value1 <a class ...

jquerycss

modifying the appearance of the parent container of an input element

I'm trying to change the style of a parent element when its child input is checked. <div> <!--- this is the parent element ---> <input type="radio" data-dynamic-update="1" name="virtuemart_paymentmethod_id" id="payment_id_3" value= ...

javascriptjqueryhtmlcss

Developing a unique dark theme for bootstrap without the need for redundant CSS coding

Currently, I am exploring the most effective way to structure my SCSS dark theme for optimal maintainability. Bootstrap 5 offers the option of setting the data-bs-theme='dark' attribute on the HTML body tag to switch between light and dark themes ...

csstwitter-bootstrapbootstrap-4bootstrap-5ruby-on-rails-7

Troubleshooting problem with CSS overflow and absolute positioning on Android Browser

Our mobile web app was created using a combination of JQuery Mobile, PhoneGap, and ASP.net MVC. It is designed to function smoothly on both iOS and Android devices regardless of the browser being used. We have conducted tests on various devices and everyth ...

androidcsscordova

css - design your layout with floating div elements

I used to design layouts using tables, but now I'm trying it out with divs. However, I'm still struggling to get the layout right. It's not as straightforward as using tables. For instance, my code looks like this: var html_output = "< ...

jquerycsshtml

Stop the repetition of the HTML Script element running more than once

Currently, I am using Ionic 2 for the development of my app. Inside the index.html file, there are various scripts that execute when the application starts. My goal is to rerun app.bundle.js midway through a user's interaction with the app. Here is ...

javascripthtmlionic-frameworkionic2

Adjusting the width of an element by modifying its border-collapse property

Is there a way to implement "border-collapse: collapse" without affecting the width of the element? The Issue: Without using the border-collapse property, the right and left borders appear bold because they are adjacent. Using the border-collapse propert ...

htmlcsswidthborder