Align child elements in the middle horizontally within a col-lg-4 class using Bootstrap

I am currently working with Bootstrap 4.3.1 and utilizing flex for my page layout.

<div class='row d-flex align-items-center'>
                <div class='col-lg-12'>
                    <div class="form-group row">
                        <div class="col-lg-2">
                            <label class='col-form-label font-weight-bold display-6' for="inputDeploymentLocation">Deployment Location</label>
                        </div>
                        <div class="col-lg-10">
                            <select class="custom-select custom-select-lg mr-lg-2" id="inputDeploymentLocation" name='inputDeploymentLocation'>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

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

I currently have the select element top-aligned horizontally. What is the best way to horizontally align the select element in the middle of the column?

csstwitter-bootstrapbootstrap-4

Answer №1

.row in Bootstrap 4 utilizes display: flex so there is no need for the d-flex class. The .align-items-center class will only impact the immediate children.

<div class='row'>
  <div class='col-lg-12'>
    <div class="form-group row align-items-center">
      <div class="col-lg-2">
        <label class='col-form-label font-weight-bold display-6' for="inputDeploymentLocation">Deployment Location</label>
      </div>
      <div class="col-lg-10">
        <select class="custom-select custom-select-lg mr-lg-2" id="inputDeploymentLocation" name='inputDeploymentLocation'>
        </select>
      </div>
    </div>
  </div>
</div>

Answer №2

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body class="all">
    <div class="row">
      <div class='col-lg-12'>
        <div class="form-group row align-items-center">
          <div class="col-lg-2">
            <label class='col-form-label font-weight-bold display-6' for="inputDeploymentLocation">Deployment Location</label>
          </div>
          <div class="col-lg-10">
            <select class="custom-select custom-select-lg mr-lg-2" id="inputDeploymentLocation" name='inputDeploymentLocation'>
            </select>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Make sure to add align-items-center to the direct parent element .row I hope that solves your issue.

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

Problem with the mobile site width due to viewport misalignment

Our website is currently experiencing an issue with the viewport, but it seems to only occur on mobile devices: If you visit the site on your mobile device, you may notice a large gap on the right side of the page. Strangely, this problem does not appear ...

htmlcssmobileviewport

Button with CSS Sprite

These Sprite buttons are making me lose my mind. I'm so close to getting them to work, but not quite there yet. I've been playing around with this really simple sprite image: If you want to see the jsfiddle project, it's available here, bu ...

htmlcsscss-sprites

The perspective property creates discrepancies in transform behavior between Firefox and Chrome, resulting in unexpected outcomes

While I found a similar question here, the solutions provided are outdated and do not help in my case. My issue revolves around a turning page effect that utilizes the CSS properties of transform-style:preserve-3d and perspective to create a 3D page. The ...

htmlcssfirefox3dperspective

Why is it important to incorporate the CSS property background-repeat: repeat; into our code?

It is believed that if you don't expressly mention the background-repeat in CSS styling, browsers will automatically set it as background-repeat: repeat. With this default behavior in place, one might wonder why there is even a need for a separate ba ...

htmlcss

Tips for resolving issues with the navigation menu not appearing on the website

For more information, please visit the webpage at I am facing an issue where the dropdown menu does not show up when hovering on the Services page. The dropdown menu was created in WordPress using wp_nav_menu. There are 5 pages, including a Services page ...

csswordpressdrop-down-menubootstrap-4navigationbar

Trouble with AngularJs 1.x causing Bootstrap4 menu toggle collapse to malfunction

Issue with Navbar toggle menu not closing properly. I have attempted the solutions provided here and others in an effort to fix this bug. However, none of them seem to work for me. Here is a snippet of my code: <nav class="navbar navbar-expand-lg ...

htmlangularjstwitter-bootstrapbootstrap-4

Maintaining active navigation state in JQuery/JavaScript after clicking a link: tips and tricks

While many resources discuss adding the active class to a nav link using jquery, there is less information on maintaining the active state after the nav link has been clicked. After experimenting with code from various sources, I have attempted to set ses ...

javascriptjqueryhtmlcss

Choosing several buttons in typescript is a skill that every programmer must possess

I need help with selecting multiple buttons in TypeScript. The code I tried doesn't seem to be working, so how can I achieve this? var input = document.getElementById('input'); var result = document.getElementById('result'); v ...

javascripthtmlcsstypescript

Is there a Wordpress floating bar similar to the one seen on 9gag?

After browsing through some posts on stackoverflow, I noticed that my website is not responding as expected. You can check out my site here: To troubleshoot, you can examine the source code and utilize Firebug to inspect the css and javascript being used ...

javascriptjqueryhtmlcsswordpress

What is the best way to format a time in a 12-hour clock using JavaScript?

Is it possible to create a timer that performs an action after 12 hours? I want the timer to start at 6am and end at 6pm, lasting for exactly 12 hours. Additionally, I'm interested in converting my current 12-hour clock into a 24-hour format. I am se ...

javascripthtmlcss

Troublesome Suckerfish CSS Navigation Menus failing to function properly on IE7

Feeling completely exasperated, I am encountering issues with aligning the drop downs under the parent item in IE7. Despite functioning properly in all other browsers, including IE8, the drop down menu is not lining up correctly in IE7. In IE7, the drop d ...

cssinternet-explorer-7suckerfish

Aligning two items to the right along the vertical axis, even if they have different heights (Bootstrap

I am facing an issue with aligning two links (one text and one image) to the right and ensuring that the bottom of each is vertically aligned. Currently, they appear like this: (vertically aligned with each others' tops) Here's the relevant HT ...

htmlcsstwitter-bootstrapcss-floatvertical-alignment

Challenges with the dropdown menu navigation bar

I am struggling with my dropdown menu and sign up/sign in buttons as they are not aligning properly. I have tried various coding methods but haven't been able to fix the issue. Can someone provide me with suggestions on how to rectify this problem? c ...

javascriptphphtmljquerycss

Tips for implementing Wordwrap on List Items within a Flexbox Setup

Here's a current look at the elements related to my query: Flexbox Layout I'm aiming to have the text inside the unordered-list elements wrap to the next line if it's too long. Currently, the entire list moves to a new line (refer to the 2n ...

htmlcssflexboxword-wrap

Is there a way to display the background when the popover is visible and hide it when the popover is hidden?

How do I make the backdrop appear when the popover is displayed, and disappear when the popover is closed? $(function(){ var content = '<button class="btn btn-sm btn-default" onclick="location.href=\'/billing/\'">Pay Now ...

javascriptjquerycsstwitter-bootstrap

How come "display:none" is still occupying space on the page?

Trying to figure out how to make a specific cell in a table disappear when viewing an HTML page on mobile devices, while having a width of 20% for desktop. However, the issue is that even though the table cell is invisible on mobile, it still occupies sp ...

htmlcss

Changing the Color of Hamburger Menu Lines in Bootstrap

How can I change the color of the hamburger menu icon's lines for medium and smaller screen sizes? I have attempted changing it through style attributes and using !important in my CSS file, but so far nothing has been successful. ...

cssbootstrap-5hamburger-menu

What could be causing my dropdown links to malfunction on the desktop version?

I've been developing a responsive website and encountering an issue. In desktop view, the icon on the far right (known as "dropdown-btn") is supposed to activate a dropdown menu with contact links. However, for some unknown reason, the links are not f ...

javascripthtmlcss

Why isn't Bootstrap validation functioning properly in my Modal?

I am attempting to implement client-side validation using bootstrap, as outlined here: https://getbootstrap.com/docs/4.0/components/forms/#custom-styles The challenge I'm facing is that my form is within a modal. When I click the submit button, nothi ...

htmlcsstwitter-bootstrapbootstrap-4

Text that fades in and out based on scrolling past a specific point

There's a text containing <p> and <h1>. The text finishes with one <h1>. I'm looking to speed up the Y translation of the <p> twice when I reach the bottom of the document (where the last h1 is located in the middle of th ...

javascriptjquerycss