I'm looking to center the column content vertically - any tips on how to do this using Bootstrap?

Hello! I am looking to vertically align the content of this column in the center. Here is an image of my form:

https://i.stack.imgur.com/nzmdh.png

Below is the corresponding code:

<div class="row">
    <div class="form-group col-lg-2">
            <label translate="global.field.name" for="name">Name</label>
            <input type="text" class="form-control" />
    </div>
    <div class="form-group col-lg-2">
            <label translate="global.field.code" for="code">Code</label>
            <input type="text" class="form-control" />
    </div>
    <div class="form-group col-lg-2">
            <label translate="global.field.translation" for="translation">Translation</label>
            <input type="text" class="form-control" />
    </div>
    <div class="form-group col" >
            <button><span class="glyphicon glyphicon-remove"></span></button>
            <button><span class="glyphicon glyphicon-search"></span></button>
    </div>

Is there a way to center the last column vertically?

Answer №1

A neat trick you can use is the flexbox method shown below:

.vcenter {
    display: flex;
    align-items: center;
}

<div class="row vcenter">
    <div class="form-group col-lg-2">
            <label translate="global.field.name" for="name">Name</label>
            <input type="text" class="form-control" />
    </div>
    <div class="form-group col-lg-2">
            <label translate="global.field.code" for="code">Code</label>
            <input type="text" class="form-control" />
    </div>
    <div class="form-group col-lg-2">
            <label translate="global.field.translation" for="translation">Translation</label>
            <input type="text" class="form-control" />
    </div>
    <div class="form-group col-lg-1" >
            <button class="btn btn-default"><span class="glyphicon glyphicon-remove"></span></button>
            <button class="btn btn-default"><span class=" glyphicon glyphicon-search"></span></button>
    </div>
 </div>

Answer №2

To center the div, append the following code:

.center {
display: inline-block;
vertical-align: middle;
float: none;}

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

creating dynamic column headers with JavaScript

I am looking for a way to make the column names dynamic so that I don't have to manually update them every time. Here is my code snippet: jqGrid11.prototype = { display : function() { $('body').append(this.html.join("")); $("#jqGrid").j ...

Building a simple messaging platform with the power of Socket.io and Node.js

After following the guide at http://socket.io/get-started/chat/, I attempted to create a basic chat application. However, upon running npm install --save socket.io I encountered the error message below. How can I resolve this issue? npm WARN package.jso ...

Issues arising from using `track by $index` in Angular UI Carousel

Issue with index starting at non-zero value when using pagination in Angular UI Bootstrap carousel I've implemented a carousel using Angular UI Bootstrap to display a large number of images (over 1,000). To improve performance, I added a filter to sh ...

Issue with setting a cookie on a separate domain using Express and React

My backend is hosted on a server, such as backend.vercel.app, and my frontend is on another server, like frontend.vercel.app. When a user makes a request to the /login route, I set the cookie using the following code: const setCookie = (req, res, token) = ...

What is the best way to create individual clickable images that open up a modal window for each one?

Currently, I have created a function that is able to map images from an array in Next.js using react-bootstrap. The function is functioning as expected, however, my goal is to add an onClick function to each image so that when clicked, it opens up in a new ...

Does the syntax for the $.ajax() function appear to be incorrect in this instance?

I am attempting to use .ajax to retrieve the source HTML of a specific URL (in this case, www.wikipedia.org) and insert it into the body of a document. However, the code provided below is not producing the expected outcome. <!DOCTYPE html> < ...

Tips for swapping out a page for a component

Consider a scenario where we have a blog page containing a div element with the class "content" that displays previews of various articles. The goal is to dynamically replace the content within the div element with a specific article. How can this be acco ...

Illuminate the principles of AngularJS

My goal is to achieve results in the following manner: Expected workflow chart: https://i.stack.imgur.com/G2OAO.png Here is the default view: https://i.stack.imgur.com/H6xkZ.png Scenario 1: When I click on the number "1", all elements from left to rig ...

Using jQuery to dynamically select all rows (`tr`) that contain table data cells (`td`) matching

Although my title may seem confusing, it's the best I could come up with. I'm looking to identify all tr elements that contain td elements matching specific filter criteria. Here is an example: <tr class="row" id="1"> <td class="ph ...

Frequently, cypress encounters difficulty accessing the /auth page and struggles to locate the necessary id or class

When trying to navigate to the /auth path and log in with Cypress, I am using the following code: Cypress.Commands.add('login', (email, password) => { cy.get('.auth').find('.login').should(($login) => { expect($log ...

What could be causing the error 'i is not defined' in my Vue.js component script when using a basic for loop?

I have a task where I need to sort an array by version and then move all elements starting with 'ipad' to the end of the list. This code snippet is extracted from a single file Vue.js component: computed: { orderedUsers: function () { ...

Converting a UUID from a string to an integer in JavaScript

Need help passing a UUID to a function that calls an endpoint to delete a blog. The UUID is in string format like "9ba354d1-2d4c-4265-aee1-54877f22312e" and I'm encountering a TypeError: Cannot create property 'message' on string '9ba35 ...

Using AngularJS to Nest ng-view within ng-repeat

I have a collection of items. Each item has buttons to display its details and comments within this ng-view section. It is necessary for the user to view all available product details on one page, for example. Below is the HTML list: <div ng-controll ...

Step-by-step guide on incorporating CSS box-shadow with the .style JavaScript property

I have a JavaScript code snippet that looks like this: document.getElementById("imgA").style.box-shadow = "0 0 5px #999999"; The hyphen in box-shadow is causing an invalid assignment exception to be thrown by the JavaScript engine (specifically in Firefo ...

Intensive analysis of objects comparing their characteristics

Currently delving into the world of Javascript, I encountered a coding exercise involving a "deepEqual" function that I attempted to write but ultimately struggled with. Even after reviewing the solution, one particular part perplexed me - the for loop, ...

Failed to retrieve the requested item using fetch, encountering a NetworkError

My API is being accessed to retrieve data using this code snippet. It sends the email and password to the API: onSubmitSignIn = () => { fetch('http://localhost:3001/signin', { method: 'post', headers: {'Content-Type&ap ...

Content displayed in the center of a modal

Struggling to center the captcha when clicking the submit button. Check out the provided jsfiddle for more details. https://jsfiddle.net/rzant4kb/ <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class=" ...

How to access a Selenium element using JavaScriptExecutor

My task involves working with a collection of elements in Selenium, specifically located using the By.CssSelector method: var contentRows = new List<TableRow>(); for (var i = 1; i < PositiveInfinity; i++) { var cssSelectorToFind = $"tbody &g ...

import an external JavaScript file in an HTML document

Looking to load a .js file from a simple HTML file? If you have these files in the same folder: start.js var http = require('http'); var fs = require('fs'); http.createServer(function (req, response) { fs.readFile('index.htm ...

I encountered a CORS policy error while using React. What steps can I take to effectively manage and resolve this

INDEX.JS import express from "express"; import { APP_PORT } from "./config"; import db from "./database"; import cors from "cors"; import bodyParser from "body-parser"; import Routes from "./routes&quo ...