Center Align BS4 Card Title in a Vertical Position

Struggling to vertically center the title of a card in Bootstrap 4 when using the <h> tag. Despite trying various bootstrap classes like align-middle and combinations like .d-flex + align-self-center, nothing seems to be working as expected. I'd prefer not to resort to custom CSS for this - is there a built-in BS4 solution?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card border-info" style="width: 100%;">
  <div class="card-header text-white bg-info">
    <h6 class="align-middle">Example Title</h6>
  </div>
  <div class="card-body">
  </div>
</div>

csstwitter-bootstrapbootstrap-4

Answer №1

Is this the format you were looking for?

I included d-flex justify-content-center in your card-header

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card border-info" style="width: 100%;">
  <div class="card-header text-white bg-info d-flex justify-content-center">
    <h6 class="mb-0">Example Title</h6>
  </div>
  <div class="card-body">
  </div>
</div>

Answer №2

Try adding the d-inline or d-inline-block class to the h6 element.

<div class="card border-info" style="width: 100%;">
<div class="card-header text-white bg-info">
<h6 class="d-inline-block align-middle">Example Title</h6>
</div>
<div class="card-body">
</div>
 </div>

This solution has worked for me in the past.

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

Expandable and retractable container - reveal or hide content

I am in the process of developing a Frequently Asked Questions webpage that includes around 50 questions. To avoid making the page too long, I have decided to implement collapsible divs. Below is the code snippet that I have already implemented. My query ...

htmlcsscollapsable

Safari causing margin problems

Encountering a margin problem specifically with Safari that I'm having trouble debugging. While everything functions properly in Firefox, Chrome, IE, etc., Safari presents issues. My content div is positioned just below the header, but in Safari, it o ...

csssafarimargin

The synchronization between the First Column Scroll and Table Filter Function is out of alignment

I haven't coded for a while and my knowledge of JavaScript is still in its early stages, so please excuse me if this question seems a bit naive. Essentially, I've created code that filters an HTML table based on the items in the first column. Th ...

javascripthtmljquerycss

What is the best way to load specific CSS in an rhtml file?

In the world of website development, we often find several pages that are generated from the same layout.rhtml file. Along with a global css file, each page may also have its own unique css file - such as page1.css for page1.rhtml and page2.css for page2.r ...

cssruby-on-railsruby

Updating a select dropdown's choices or values based on the selection of another select dropdown using JavaScript

I am working with two HTML select elements. Below is an example of the code: <select class="select1" onchange='customJavascriptfuntion()'> <option value='a'>a</option> <option value='b'>b</option> ...

javascripthtmlcssangularjs

Tips for creating a responsive CSS component within a q-card while adding content

Utilizing vue and quasar, I have created this component: <template> <q-layout> <q-page-container style="background-color: #e0e5ea;"> <q-page class="column"> <menu-bar></menu-bar> ...

htmlcssvue.jsquasar-frameworkquasar

access pictures from a different directory using JavaScript

I am working with an images array that contains three jpg files. I am trying to set the background image of a class called pic using images from the array. The issue I'm facing is that the images are stored in an images folder with the URL images/. I ...

javascripthtmlcss

Adjust the size of the title font and modify the background colors

One of my titles looks like this: <a title="I am your title"/> The default background color is yellow Take a look at this image which can help illustrate what I'm asking about Is there any way to change the background color and increase the ...

javascriptasp.netcsstitle

What is the process for configuring my CSS and JS files to send HTTP response headers?

During our security evaluation of a web application built in Laravel 4, we discovered that the Anti-MIME-Sniffing header X-Content-Type-Options was not properly configured to 'nosniff'. The following PHP code snippet sets the necessary HTTP heade ...

javascriptphpcsshttphttp-headers

What is the best way to ensure that the scroll position on each page in shinydashboard remains unaffected by changes in the scroll position on other pages?

When navigating between pages A and B in my shinydashboard app, I noticed that the scroll position of one page affects the scroll position of the other. How do I make the scrolls independent? To illustrate my issue, I've included a stable shinydashbo ...

javascriptcssrshinyshinydashboard

Tips on containing text within a div box without exceeding its boundaries

I've been struggling with containing the text in my display area. No matter what I try, the text keeps overflowing and it's driving me crazy. I've researched various solutions like using word-wrap: break-word;, adjusting width manually, but ...

htmlcss

Is it permissible to utilize multiple ":root" selectors in a CSS file?

One of the features in TWBS 4 is the presence of color variables within the :root selector in bootstrap.css. Is it possible for my child stylesheet to also include a :root selector, allowing me to define my own variables? I assume that :root {} can be ov ...

cssbootstrap-4css-selectors

Dim the entirety of the page while accentuating specific regions

Check out this demo on JSFiddle I'm trying to figure out how to bring the .highlight element to the front. <body> <p>bla bla</p> <p class="light">highligh this</p> </body> CSS body{ background-color: ...

jqueryhtmlcss

Chrome does not display the z-index of an element

After days of troubleshooting, I have been struggling to make an element with a z-index of 1 visible over its parent element. Originally, the element (a small bucket in the bottom right corner under the title "May/June") on this page: did not need to be a ...

cssz-index

What is the best way to responsively center an after pseudo-element above its parent?

Looking to create a dynamic tooltip without any fixed widths or constraints on the parent element. The process seems simple enough, but I'm facing an issue with centering the after element due to an existing transform attribute of transform: translat ...

cssvue.jssasspseudo-element

Is there a way to apply a dark theme to bootstrap-datetimepicker?

Currently, I am utilizing the datetimepicker from https://eonasdan.github.io/bootstrap-datetimepicker/#inline. Despite thorough research and careful reading of the documentation, I am unable to find a way to implement a dark theme. I am working with Vue. ...

bootstrap-4vuejs2datepicker

Is there a way to display the next/previous buttons separately from the scroller in my jQuery thumbnail scroller implementation?

Is there a method to display the next and previous buttons outside of the scroller frame when using jQuery thumbnail scroller by manos.malihu.gr? I have attempted to modify the button class in CSS to make them more prominent or visible, but unfortunately ...

javascriptjquerycssscroll

Developing a Dynamic Table Featuring Information Pulled from a phpmysql Database

I am exploring ways to make the table below, which displays data from a MySQL database, responsive so that it can adjust to smaller devices without compromising the image quality. Currently, I am delving into Bootstrap to understand its capabilities bett ...

phpcssbootstrap-4

Choose items in a particular order based on the class name of their category

How can I dynamically select and manipulate groups of elements? My intention is to select and modify the msgpvtstyleme elements, then select the msgpvtstyle elements separately and work with them as well. The ultimate goal is to apply classes to these grou ...

javascriptjquerycss

Creating a responsive design for a centered image with absolute positioning

I'm trying to align an image at the bottom of a div while also centering it using the following CSS: HTML: <div class="myDiv"> <img src="http://bit.ly/1gHcL8T" class="imageCenter" /> </div> CSS: .myDiv { width: 80%; height: ...

css