"Aligning content in Bootstrap with vertical centering

I am currently working on aligning a simple piece of code vertically.

Check out the code on JS Fiddle: https://jsfiddle.net/3kj44net/

.container-fluid {
  padding-left: 20px;
  padding-right: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="header-tool-title">
   <div class="container-fluid">
      <div class="row">
         <div class="col-md-5 vcenter">
            <h1 class="toolTitle"><span name="el_toolName">Tool Name</span> <small class="toolSubTitle">#<span name="el_toolID">244</span></small></h1>
         </div>
         <div class="col-md-7 vcenter">
            <span class="pull-right toolStatus">
               <span class="pull-right">
                  <h4 class="text-right"><span name="el_toolStatus"><a data-content-type="manageDeprecation" name="route">Scheduled for Deprecation</a></span></h4>
               </span>
            </span>
         </div>
      </div>
   </div>
</header>

I am encountering an issue where I need the text on the right to align with the text on the left as shown in the image below.

I attempted to use the verticle-align attribute, but it did not have the desired effect.

Any thoughts on how I can achieve the desired alignment?

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

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

To achieve equal column sizes, you can utilize flex property and 

margin-top:auto;

to position the specific element at the bottom.

Check out this demo:

https://jsfiddle.net/pxm2drk9/8/

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

How can I swiftly load or insert HTML code into an HTML file using jQuery?

I'm currently developing a mobile app using Cordova, essentially an html-based application running in an app wrapper. I have numerous elements and html code that need to be consistent across all pages, such as navigation menus, popups, and more. When ...

javajavascriptjqueryhtml

What is the best way to make an image expand when clicked, align it in the center of the webpage, and have it return to its original position with just one more click by utilizing

Currently, this is the code I am working with. The JavaScript functionality is working well, however, there seems to be an issue where the image does not return to its original size on a second click. Additionally, I am having trouble getting the CSS to ce ...

javascripthtmlcssimage

Unable to delete data in Laravel 8

I am new to Laravel and facing an issue when trying to delete a row with a modal. The problem is that only the first row is getting removed and I can't figure out the reason. Here is my modal setup: <p class="card-text"><small clas ...

javascripthtmllaravel

Showing pictures from directories outside the web root (public_html)

Situation: I have a collection of images stored in a directory named uploads or images located outside the website's main folder (outside of public_html). My goal is to display one of these images inside a file called image.php. Guidelines for achi ...

phphtmlimage

Is there a feature on the webpage that allows users to save clicked xy points and display them as text?

Is there a way to incorporate a feature on a website that displays clicked xy points as text, allowing them to be easily copied and pasted? ...

jsonhtmlcanvas

What is the best way to separate one dropdown area from another dropdown area?

I have two dropdown menus where, when an option with the value "other" is clicked, it generates a text area just below the dropdown menu. Both sections are functioning correctly, but I had to create separate parent wrappers for each in order to do so. How ...

javascriptjqueryhtmldynamic

Using a combination of jQuery and JavaScript to switch image tags between different classes

I'm really struggling with this issue and could use some guidance. Essentially, I have a code that should change the class of an img tag when a user clicks on a div element. Let's take a look at the HTML structure: <li><img src ...

javascriptjqueryhtmlclasstoggleclass

Ways to duplicate a letter in HTML?

How can a character be printed repeatedly within a table cell using only HTML or HTML and CSS (excluding HTML5)? *(limiting to only HTML or a combination of HTML and CSS) ** The goal is to print the character "." across the entire length of the cell, wit ...

htmlcss

core.js:15723 ERROR TypeError: Unable to access the 'OBJECT' property because it is undefined

Whenever I attempt to run this function, I encounter an issue. My goal is to retrieve the latitude and longitude of an address from Google's API. This error message pops up: core.js:15723 ERROR TypeError: Cannot read property 'geometry' of ...

htmljsonangulartypescript

I am having trouble with json_encode in my Symfony2 controller

Just starting out with Symfony2 and AngularJS. Trying to use json_encode to display content from my database, but running into issues. Here's my controller: public function catalogonewAction() { $data = $this->getDoctrine()->getManager() ...

phphtmlangularjssymfony

Is it possible to create a fluid-width layout with two columns that also spans the full

I have searched tirelessly through Google and stackoverflow, but I can't seem to find a solution to my specific problem. I need help creating a container div that can hold either one or two columns. The content is generated by a CMS and may or may not ...

csshtmlcss-floatheightwidth

Having trouble loading CSS and JavaScript files in CodeIgniter version 3.0.4?

I am facing an issue with loading my CSS and JS files in the view file. I have already added them to the folder and set the base URL. These codes were working fine with a project I previously did on an older version of CodeIgniter. What could be causing ...

javascripthtmlcsscodeigniter

An illustration of a skeleton alongside written content in neighboring sections

I am relatively new to CSS and came across an issue with Skeleton when resizing the browser window. I have an image and text displayed next to each other in columns, as shown below (although there is much more text in reality). Everything looks fine initia ...

htmlcssmultiple-columnsskeleton-css-boilerplate

React - utilize a variable as the value for an HTML element and update it whenever the variable undergoes a change

I'm on a mission to accomplish the following tasks: 1.) Initialize a variable called X with some text content. 2.) Render an HTML paragraph element that displays the text from variable X. 3.) Include an HTML Input field for users to modify the content ...

javascripthtmlreactjs

Animate an image to the right when clicked, then return it to the left with a second click

Seeking help with animating a set of images to move individually 300px right on first click, and then 300px left when clicked again. I'm currently facing an issue where my code is not working. It could be due to A) syntax errors or B) the images not ...

javascriptjqueryhtmlcssjquery-animate

Connect the mileage tracker to a Datalist or grid view component

I recently downloaded the Odometer Sample from , however, I am facing an issue where only the first element in the Datalist is getting the Odometer display, while others are not displaying it. Here is the snippet of code: <script type="text/javascript" ...

javascriptjqueryasp.netvisual-studio-2010css

Accordion is having trouble expanding fully

My accordion is causing some trouble. When I try to open one section, both sections end up opening. I want it to toggle, so that only one section opens at a time based on my click. Switching the display from flex to column fixes the issue, but I don' ...

javascripthtmljquerycss

Adjustable background image with no need for a scroll bar

I am looking to create a static webpage that remains fullscreen without any scrolling. My goal is to have a centered form with the background image adjusting to the window size. As a beginner, I apologize if this request seems too simple. .container { ...

htmlcssimagescrollbackground

Is the absolute positioned element on the left or right based on its current location?

Is there a way to assign absolute positioning with left at 0px or right at 0px depending on whether the positioned div will go outside of its container? For example, when you right click in a browser and see the menu appear to the right of where you click ...

javascriptjqueryhtmlcssabsolute

Display a single image on each slide when viewing Media Slider Carousel BS3 on a mobile device

Currently, I am implementing the Media Slider Carousel BS3 from bootsnipp on a webpage to create a compact slider. However, my goal is to customize it for mobile screens so that only one image displays per slide instead of three. For instance: https://i. ...

jquerytwitter-bootstraptwitter-bootstrap-3