Guide to vertically aligning text within a row using Bootstrap 5

I am currently struggling to achieve vertical alignment of text in the center of a row.

Despite my efforts, I have not been successful in achieving the desired vertical alignment. What steps can be taken to ensure that the text is vertically centered within the row?

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70121f1f04030402110030455e405e42">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d2f2222393e393f2c3d0d78637d637f">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<div class="container-fluid">

  <div class="row align-middle" style="min-height: 500px;">
    <div class="col-6 bg-danger align-middle">
      LEFT/MIDDLE TEXT
    </div>

    <div class="col-6 bg-primary align-middle">
      RIGHT/MIDDLE TEXT
    </div>
  </div>

</div>

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Make sure to use align-items-center as the row is already set to display: flex

According to the information provided in the documentation,

It's important to note that vertical-align will only impact inline, inline-block, inline-table, and table cell elements.

...

If you need to vertically center non-inline content (such as <div>s and similar elements), utilize our flex box utilities.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f1eaf4eaf6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7858888939493958697a7d2c9d7c9d5">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="container-fluid">

  <div class="row align-items-center vh-100">
    <div class="col-6 bg-danger">
      LEFT/MIDDLE TEXT
    </div>

    <div class="col-6 bg-primary">
      RIGHT/MIDDLE TEXT
    </div>
  </div>

</div>

Answer №2

To center the content of .col-6 vertically without affecting the .col-6 itself in the .row, you can apply the class 

.col-6.d-flex.flex-column.justify-content-center
. This sets the .col-6 as a flex box container. If you want the columns to have different heights, you can refer to dippas' solution.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f89a97b49788899c8fa58e85698f80ed89958888a38ae7bb96de9ebf90fcdfcefd9cafb1ff9997dfd2ff96818ddad9ba9ed1bff79ca1bfd8838092dba98186">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51333ebbafa8bdbabdb3a8edb386b8a29db3ada196bcbbbabaedbcbabbfebadaf94babda5b9b6fcbbb77469bdbecebfbdba96a9b6ade09acb74bbb37aedbabbafb85b2a6b2b5a7feb9b9bfcbbcacaff'">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="container-fluid">

  <div class="row" style="min-height: 500px;">
    <div class="col-6 bg-danger d-flex flex-column justify-content-center">
      LEFT/MIDDLE TEXT
    </div>

    <div class="col-6 bg-primary d-flex flex-column justify-content-center">
      RIGHT/MIDDLE TEXT
    </div>
  </div>

</div>

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

Tips for updating images automatically

I have a HTML file where I display images on a popup window using the code below: <div id="divCheckbox" style="display: none;"> <a class="fancybox" rel="gallery01" title= "BONOS ALQUILER 2/6" href="eventos/Bonos_alquiler.jpg">o ...

phphtmlmysql

I'm experiencing an issue where the links in my dropdown button are not showing when I hover over it. What could

I have been attempting to include a dropdown button that reveals several links when the mouse hovers over it. Despite successfully implementing the CSS for this feature, I am encountering an issue where the links are not displayed beneath the button. Afte ...

htmlcssasp.net-corebootstrap-4

Steps for incorporating universal style into Angular 6/7 library

I attempted to incorporate global styles in my Angular app similar to how it's done, but unfortunately, it didn't work as expected. The library I'm using is named example-lib. To include the styles, I added styles.css in the directory /proj ...

cssangularstylesangular-library

Switching the website address after picking an option from the drop-down menu

I have an HTML form that includes two dropdown menus. The first dropdown is populated from a database using PHP, and the second dropdown is linked to the first one and uses AJAX to update its values based on the selection from the first dropdown. My goal ...

javascriptphpjqueryhtmlajax

Exploring the Relative Positioning of Two div Elements

Can anyone assist me with finding and comparing the positions of two '<div>' tags using an if statement? I stumbled upon a suggestion in my research, which goes like this: var obstacle = $('#obstacle').css('left', &apo ...

jquerycss

Display a dropdown menu when clicking on a close button in a single element using Vanilla JavaScript

I'm currently in the process of learning Javascript and trying to grasp the concept of events and selectors. My aim is to have a close button that, when clicked, triggers a specific dropdown related to the card it's attached to. I plan to achie ...

javascripthtmlcss

How can I extract information from an HTML table using AngleSharp?

Seeking a way to extract song data from a playlist on a music streaming website This table contains song information: <tr class="song-row " data-id="ef713e30-ea6c-377d-a1a6-bc55ef61169c" data-song-type="7" data-subscription-links="true" data-index="0" ...

c#htmlcssanglesharp

What is the solution to incorporating a scrollbar in a popup when I increase the zoom level?

When trying to add a scrollbar to the popup, I am facing an issue where the scrollbar does not appear when zoomed in to 75% or 100%. It works fine for fit screen but not on zoom. Can anyone help me identify what is wrong with my code and suggest how to han ...

javascripthtmlcss

Vintage webpage utilizing Bootstrap 3.3.4

I've been working on updating my old website that was built with Bootstrap 3.3.4 a few years ago. Recently, I made some minor changes to the content and everything was working fine just last week. However, when I checked the website today using XAMPP, ...

htmltwitter-bootstraptwitter-bootstrap-3gridbootstrap-4

Center align Bootstrap 4 dropdown menu

I am attempting to center align my dropdown menu using Bootstrap 4. Following the given example: [ This is the result I am achieving: [ This is the code I have implemented: <div class="container"> <div class="row"> <div class=" ...

htmlcsstwitter-bootstrapbootstrap-4

Obtain elements from a nested array in JSON format

While working on HTML elements within the "Test" object, I am creating individual elements for each object. These objects can be either type:block or type:list and may contain an array named "List" when they are of type:list. I aim to generate an HTML ".p ...

jqueryarraysjsontwitter-bootstrapgetjson

How to avoid clipping in Bootstrap 4 when a row overflows with horizontal scrolling

In order to allow for horizontal scrolling of all contained columns, I created a row using the row class. To implement this feature, I followed advice from a contributor on Stack Overflow. You can view their answer by following this link: Bootstrap 4 hori ...

cssscrollbootstrap-4overflowclipping

Troubleshooting the issue with the default dropdown select in AngularJS

var jsonData ='[ {"type":"product", "id":1,"label":"Color", "placeholder":"Select Jean Color", "description":"", "defaultValue":"Brown", "choices":[{ "text":"Denim", "price":"$0.00", "isSel ...

javascripthtmlangularjs

Embedding an iframe with vertical scrolling enabled

Could you explain why I am unable to scroll the full width of the website? Here is a link: http://codepen.io/anon/pen/EKPaao?editors=1100. Also, what do you think about using this solution for adjusting iframes on different screen sizes? My iframe seems to ...

htmlcssiframe

How can I extract text from nested HTML elements with a <a href> tag using the Jericho library?

Here is a snippet of my HTML code: <div class="itm hasOverlay lastrow"> <a id="3:LE343SPABGLIANID" class="itm-link itm-drk trackingOnClick" title="League Sepatu Casual Geof S/L LO - Hitam/Biru" href="league-sepatu-casual-geof-sl-lo-hitambiru-6816 ...

javahtmlparsingjericho-html-parser

Spinning Circle with css hover effect

I have recently developed a simple website: Within this website, there is an interesting feature where a circle rotates above an image on hover. However, despite my best efforts, I couldn't make it work as intended. Here's the code snippet I use ...

htmlcss

Animating images with Jquery

As a beginner in Javascript and Jquery, I am currently learning about image animation. However, I have encountered a question regarding moving an image from bottom left to top right within the window. Is there a more efficient way to achieve this compared ...

javascripthtmljquery

What methods can be used to decrease the width of a space?

I currently have this on my website: https://i.sstatic.net/lfBum.png But I want to organize the 3 elements to look like this: https://i.sstatic.net/SwyMs.png <th class="fc-day-header fc-widget-header fc-sat" data-date="2016-10-01">DAY 1<br> ...

htmlcssfullcalendar

Easy steps to eliminate background color from text

https://i.sstatic.net/mKmIW.png I have encountered an issue where a white background is covering the background image in my coding project. Despite trying to add background-color: transparent;, I wasn't able to remove the white background. How can I r ...

htmlcssbootstrap-5

What causes the CSS class and jQuery to become unresponsive when rapidly moving the cursor over a specific selector while utilizing .hover(), .addClass() and .removeClass()?

After creating a customized h1 element, I implemented a feature where a class is added and removed from it with a smooth transition of 300ms when the mouse hovers over and off its parent DIV #logo. This was achieved using jQuery's .hover() method alon ...

jquerycssjquery-uijquery-selectorshover