How to center content vertically in a Bootstrap 5 column div

I assumed that aligning content vertically in a div should be easier compared to using a table:

Edit: I want to align the first and last columns while keeping the others as they are.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8eece1e1fafdfafceffecebba0bea0bc">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
                <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6949999828582849786b6c3d8c6d8c4">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

                <div class="row bg-dark text-white">
                <div class="col-sm-2 align-items-center">align me vertically
                </div>
                <div class="col-sm-1">
                <div class="row text-center">
                <span class="text-center">1</span>
                </div>
                <div class="row">
                <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
                </div>
                </div>
                <div class="col-sm-2">
                <div class="row">
                <span class="text-center">2</span>
                </div>
                <div class="row">
                <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
                </div>
                <div class="row mb-1">
                some text could be here
                </div>
                </div>
                <div class="col-sm-1">
                <div class="row text-center">
                <span class="text-center">3</span>
                </div>
                <div class="row">
                <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
                </div>
                </div>
                <div class="col-sm-1">
                <div class="row text-center">
                <span class="text-center">4</span>
                </div>
                <div class="row">
                <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
                </div>
                </div>
                <div class="col-sm-1">
                <div class="row text-center">
                <span class="text-center">5</span>
                </div>
                <div class="row">
                <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
                </div>
                </div>
                <div class="col-sm-1">
                <div class="row text-center">
                <span class="text-center">6</span>
                </div>
                <div class="row">
                <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
                </div>
                </div>
                <div class="col-sm-1">
                <div class="row text-center">
                <span class="text-center">7</span>
                </div>
                <div class="row">
                <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
                </div>
                </div>
                <div class="col-sm-1">
                <div class="row text-center">
                <span class="text-center">8</span>
                </div>
                <div class="row">
                <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
                </div>
                </div>
                <div class="col-sm-1 text-end align-middle">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="15" y1="9" x2="9" y2="15"></line>
                <line x1="9" y1="9" x2="15" y2="15"></line>
                </svg>
                </div>
                </div>

How can I vertically align the text and the SVG?

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Here is the code snippet...

#align-text-end {
  width: 100%;
}
<!DOCTYPE html>
<html lang='en'>

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c3ceced5d2d5d3c0d1e1948f908f90">[email protected]</a>/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
  <script src='https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b1914140f080f091a0b3b4e554a554a">[email protected]</a>/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>

</head>

<body>

  <div class="row bg-dark text-white">
    <div class="col-sm-2 d-flex align-items-center">align me vertically
    </div>
    <div class="col-sm-1">
      <div class="row text-center">
        <span class="text-center">1</span>
      </div>
      <div class="row">
        <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
      </div>
    </div>
    <div class="col-sm-2">
      <div class="row">
        <span class="text-center">2</span>
      </div>
      <div class="row">
        <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
      </div>
      <div class="row mb-1">
        some text could be here
      </div>
    </div>
    <div class="col-sm-1">
      <div class="row text-center">
        <span class="text-center">3</span>
      </div>
      <div class="row">
        <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
      </div>
    </div>
    <div class="col-sm-1">
      <div class="row text-center">
        <span class="text-center">4</span>
      </div>
      <div class="row">
        <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
      </div>
    </div>
    <div class="col-sm-1">
      <div class="row text-center">
        <span class="text-center">5</span>
      </div>
      <div class="row">
        <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
      </div>
    </div>
    <div class="col-sm-1">
      <div class="row text-center">
        <span class="text-center">6</span>
      </div>
      <div class="row">
        <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
      </div>
    </div>
    <div class="col-sm-1">
      <div class="row text-center">
        <span class="text-center">7</span>
      </div>
      <div class="row">
        <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
      </div>
    </div>
    <div class="col-sm-1">
      <div class="row text-center">
        <span class="text-center">8</span>
      </div>
      <div class="row">
        <img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
      </div>
    </div>
    <div class="col-sm-1 d-flex align-items-center">
      <div class='text-end' id='align-text-end'>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="15" y1="9" x2="9" y2="15"></line>
          <line x1="9" y1="9" x2="15" y2="15"></line>
        </svg>
      </div>
    </div>
  </div>

</body>

</html>

Answer №2

Replace the div containing align-middle with align-items-center.

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

JavaScript / html Error: function body missing closing curly brace

I encountered an error that I'm struggling to resolve: "SyntaxError: missing } after function body". Despite not having a function named 'body', I have attempted changing every instance of 'body' in my script. However, ...

javascripthtmlsyntax-error

Save React code as a single HTML file

My current project involves creating one-page websites for a specific service that only accepts single inline HTML files. To make these webpages as modular as possible, I am utilizing React to create ready components. The challenge is exporting the final R ...

javascripthtmlreactjswebpacknext.js

Saving a PHP form with multiple entries automatically and storing it in a mysqli database using Ajax

My form includes multiple tabs, each containing various items such as textboxes, radio buttons, and drop-down boxes. I need to save the content either after 15 seconds of idle time or when the user clicks on the submit button. All tab content will be saved ...

javascriptjqueryhtmlajax

Refresh the content of an iframe (local HTML) by clicking on buttons

When a user clicks on a button, I am loading an HTML file into a DIV (iframe). The issue arises when the user clicks another button and wants to reload the iframe with a different HTML file. This is the current code snippet: <script type="text/javasc ...

javascriptjqueryhtmlcssiframe

How to extract information for divs with specific attribute values using Jquery

I have multiple divs with IDs like #result-1, #result-2, each followed by a prefix number. To count the number of list items within these divs, I use the following code: $(document).ready(function () { var colorCount = $('#result-1 .item-result ...

javascriptjqueryhtml

Tips for creating a website with an integrated, easy-to-use editing tool

Recently, I designed a website for a friend who isn't well-versed in HTML/CSS/JavaScript. He specifically requested that the site be custom made instead of using a web creator. Now, he needs to have the ability to make changes to the site without nee ...

javascripthtmlcsseditor

The CSS opacity property fails to function properly on Google Chrome

While it is functioning correctly on Firefox, there seems to be an issue with Chrome. I am attempting to have a card apply the opacity property when hovered over. Here is the HTML file: <div class="col mb-4"> <a class="text ...

htmlcssgoogle-chromebootstrap-4

The visibility of a CSS class is rendered non-apparent when formed through the implementation

function retrieve_files(){ $.ajax({ type: "GET", url: "retrieve_files.php", cache: false, success: function(result){ $("#insideT").html(result); } }); } retrieve_files.php $dir = 'upload ...

jquerycssajax

Determine the total of the final column in recently added rows by utilizing JavaScript

I have a table where users can dynamically add rows as needed. I am looking to implement a feature that will display the total of the last column in a text box underneath the table using JavaScript. If real-time calculations are not feasible, then I am ope ...

javascripthtmlcalculated-columns

Execute function prior to redirection of iframe

I have a specific challenge with an iframe on my webpage. I am looking to trigger a function right before the iframe reloads a new page, rather than after it has finished loading. I need this function to be triggered before the iframe redirects to the new ...

javascripthtmliframexhtml

Obtaining a variable from HTML and passing it to Node.js

Currently, I am utilizing express to handle form submissions. Within my HTML file, there are 20 inputs with unique ids such as address1, address2, address3, and so on. In my node js code, I access these input values using req.body.address1. Users have th ...

javascripthtmlnode.jsexpress

What steps can I take to resolve the issue of my popup closing automatically upon opening and simultaneously refreshing my webpage?

After creating a popup in my HTML page, when I click on the element that triggers it, the popup appears for a brief moment before automatically closing and causing my page to refresh. Below is the code I am using: HTML Code : <a class="lv-footer" id= ...

javascriptjqueryhtmlcsspopup

Issues with HTML5 video playback have been reported in both Chrome and Firefox browsers

I'm having trouble getting the following HTML5 Video code to work. Can someone help me spot what I might be missing? <video width="267" poster="Poster.gif" height="209"> <source src="6Minutes_1.mp4" type="video/mp4"></source> <so ...

htmlemailhtml5-video

Creating a Stylish Web Design with Bootstrap HTML - Tips for Perfecting Your Output

My code is producing the following output: https://i.sstatic.net/LVda1.png But I want to achieve this instead: https://i.sstatic.net/OUlOP.png How can I modify my code to get the desired layout? <link rel="stylesheet" href="https://cdn.jsdelivr.n ...

htmltwitter-bootstrap

Dynamic resizing container

For most of my websites, I typically place content within a div that features rounded corners with a shadow effect. Recently, I've been trying to figure out if it's possible for this parent div to automatically center both vertically and horizont ...

htmlcss

Tips for enabling autoplay for videos in Owl Carousel

I am facing an issue with implementing autoplay functionality for videos in an owl carousel. Despite trying different solutions found online, including this Owl Carousel VIDEO Autoplay doesn’t work, I haven't been able to make it work. Additionally, ...

javascriptjquerycssowl-carousel

Interactive button visual effect

I have a piece of code that currently plays audio when I click on an image. However, I am looking to modify it so that not only does clicking on the image play the audio, but it also changes the image to another one. Can anyone assist me with this? Here i ...

javascripthtmlimageaudio-player

The ValidationMessageFor tag is failing to function on the view page

I am currently in the process of updating the styling from bootstrap 3 to bootstrap 5. The issue I am facing is that in the bootstrap 3 version, when I click the "save" button without filling any text boxes, the page displays a validation message like this ...

javascriptc#asp.net-mvctwitter-bootstrap-3bootstrap-5

Variables in Bootstrap that control colors

I am a beginner in the world of Bootstrap 5 and I have very limited knowledge of CSS. As I just started learning this week, there are many aspects that I still need to understand. I managed to successfully install Bootstrap using npm for a demo project, bu ...

bootstrap-5

Maintaining Flexbox layout without triggering item re-rendering for a new container

This is the unique layout I'm aiming to create: I am facing a challenging flexbox layout that needs to be implemented. One of the items in this layout is a Webgl player, which cannot be conditionally rendered due to the restarting issue it may cause. ...

javascriptcssreactjsflexbox