Align text vertically within a single flex container in Bootstrap

I am working on a simple card design that is divided into 3 sections:

<div class="card" style="width: 350px; height: 250px;">
  <div class="card-body">
    <div class="d-flex flex-column" style="height: 100%;">
      <div class="p-2" style="height: 30%">1</div>
      <div class="p-2" style="height: 50%;">2</div>
      <div class="p-2" style="height: 20%;">3</div>
    </div>
  </div>
</div>

My challenge now is to vertically align the text in the second section while leaving the other 2 sections unchanged. I have been exploring options like align-items-center and align-self-center, but I can't seem to achieve the desired result. Any suggestions or guidance would be greatly appreciated!

Here is the link to the fiddle for reference: here.

csstwitter-bootstrapbootstrap-5

Answer №1

Utilize the d-flex align-items-center class within your second div with p-2

.p-2{border:1px solid red;}
To achieve horizontal centering, also include 'justify-content-center'
Check out the [documentation][1]

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395b56564d4a4d4b5849790c1709170b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 350px; height: 250px;">
  <div class="card-body">
    <div class="d-flex flex-column" style="height: 100%;">
      <div class="p-2" style="height: 30%">1</div>
      <div class="p-2 d-flex align-items-center" style="height: 50%;">2</div>
      <div class="p-2" style="height: 20%;">3</div>
    </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

Creating vibrant tables with unique color schemes using Thymeleaf

Is there a way to create a table with different colors using Thymeleaf? I have a list of events with risk weights represented by integer values. Each column in the HTML table should be colorized based on certain conditions. For example, if the risk is le ...

javahtmlcssthymeleaf

Looking to resolve the line formatting issue in my Bootstrap navigation bar

I'm having an issue with my responsive navigation in Bootstrap. When I resize the window, the navigation transforms to allow content expansion. However, I've noticed that when I expand the content, the lines, background color, and logo start to l ...

csstwitter-bootstrap

My JavaScript code is being executed before Chrome Auto-fill

I have successfully created form input elements in Chrome that display a floating label when focused. However, I am encountering an issue when the browser autofills the username and password fields with yellow prefilled text. The JavaScript for the float ...

javascriptjqueryhtmlcssgoogle-chrome

Creating a stylish CSS button with split colors that run horizontally

Could you please provide some guidance on creating a button design similar to this one? I've made progress with the code shown below, but still need to make adjustments like changing the font. <!DOCTYPE html> <html> <head> <sty ...

javascripthtmlcss

Is there a method to ensure equal alignment of the <div class="card"> elements in Bootstrap?

I need help figuring out how to align this card uniformly with the others: https://i.sstatic.net/x2wZ2.png In the image below, you can see that the card for the top reason for downtime doesn't match the other cards. I want them all to be the same he ...

cssbootstrap-4frontend

Customize Bootstrap 4's .btn-link style to include a smooth transition for under

Recently, I've been working on customizing Bootstrap 4's .btn-link by adding a special hover effect - a line that smoothly transitions from left to right beneath the link when the mouse hovers over it. Although things are mostly going according ...

cssbootstrap-4

Switching button appearance when hovered over

Looking to create a page layout with 4 buttons, each occupying one quadrant of the page? These buttons should feature images as their background and change to different images when hovered over. Wondering how this can be achieved using CSS? ...

htmlcss

Font weight Bootstrap 5 icon set

After updating directly from Bootstrap 3 to Bootstrap 5, skipping version 4 altogether, I encountered an issue. In Bootstrap 3, I used to use the following code snippet: <i class="glyphicon glyphicon-asterisk"></i> <style> i:h ...

bootstrap-5bootstrap-icons

Guide to integrating Bootstrap validation with Django

I am currently developing a Django website that features a contact information form, and I am using Bootstrap to enhance its visual appeal. To ensure user-friendliness, I am looking to integrate bootstrapvalidator from . While I found various methods to va ...

pythondjangotwitter-bootstrapjqbootstrapvalidation

Tips for formatting list items to display quotes in a scrolling ticker

How to format the <li> element HTML: <div id="patTest" style="width: 95%; padding: 0; margin: 0; text-align: center;"> <ul id="patTestUL"> <li> <div style="padding: 0; margin: 0; width: 98%;" ...

htmlcss

How can jQuery be utilized to dynamically update the text in a navbar?

<div id="page1" data-role="page"> <div data-role="header" data-position="fixed" align="center"><img src="img/VAWE-long-300x30-transparent.png" width="300" height="30" alt="" /></div> <div data-role="content" style="margin ...

javascriptjqueryhtmlcss

Manipulating the size of the Chrome viewport manually yields varying outcomes compared to resizing within the browser using the "Inspect" tool

I'm currently working on developing a responsive custom theme for Wordpress. I have it hosted locally using WAMP and employing different tools to ensure it is mobile-friendly. However, I am encountering inconsistencies in the results, especially since ...

htmlcsswordpressgoogle-chromeresponsive

Hide the address bar in a Google Maps iFrame

After numerous attempts, I still can't seem to hide the address bar on this Google Maps iFrame. Can anyone provide a solution or workaround for this issue? https://i.sstatic.net/x0pl9.png I have tried using display:none; in our CSS, which successfull ...

javascripthtmlcsswordpressiframe

Creating an interactive star rating system with JSON data

Currently, I am in the process of developing a star rating system specifically designed for restaurant reviews. The 'Attributes' displayed on the user interface are dynamic and fetched in JSON format. There exist five attributes with each having ...

javascriptjqueryhtmlcss

Achieving full screen height at 100% with the CSS property of display: table along with table-cell tag

I'm facing an issue with the layout of my page. In this example (http://jsfiddle.net/RR2Xc/2/), the footer is not positioned at the bottom as desired. If I force the footer to be at the bottom, it creates a gap between the sidebar and footer where the ...

csshtmlheightcss-tables

- Determine if a div element is already using the Tooltipster plugin

I have been using the Tooltipster plugin from . Is there a way to check if a HTML element already has Tooltipster initialized? I ask because sometimes I need to update the text of the tooltip. To do this, I have to destroy the Tooltipster, change the tit ...

javascriptjqueryhtmlcsstooltipster

A guide to resolving the issue of spacing out three adjacent elements in HTML/CSS

As I work on creating my personal website, I have encountered an issue with three elements that are supposed to be side-by-side. My desired structure is depicted in this link: https://i.sstatic.net/eQEf3.jpg However, the middle element is not responding t ...

htmlcss

Eliminating padding or margin for figures in Bootstrap on smaller screens

I've been struggling to create a fullscreen image on small devices without any margin or padding. Unfortunately, the solutions suggested in this thread didn't work for me. Below is the code I'm currently using (tested on https://jsfiddle.n ...

htmlcssbootstrap-4

The measurement of a table cell's height containing hidden overflow child elements

I am looking to determine the actual height of the content within a table cell that has nested child items with overflow:hidden styles. Here is an example of the structure: <tr> <td id="targetid"> <div id="innertargetdiv"> ...

javascriptjqueryhtmlcssangularjs

The functionality of the bootstrap grid system may vary depending on the size of the device being

I'm currently experiencing an unusual issue with Bootstrap. From what I understand, the bootstrap grid system is based on 12 units and is supposed to work seamlessly across various device sizes, such as iPhones. I have a simple banner comprised of 5 c ...

htmltwitter-bootstrapcss