Vertically align elements within a bootstrap "card-body" with a fixed height inside a "card text-center" container

I need assistance with centering the h4 and button vertically on the page. Can someone help me achieve this?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89ebe6e6fdfafdfbe8f9c9bda7bfa7b9">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<section class="content">
  <div class="card text-center">
    <div class="card-header">
      <h3 class="card-title">CardHeader</h3>
    </div>
    <div class="card-body" style="height: 300px;">
      <h4>Centered text with a button below</h4>
      <button class="btn btn-primary mt-2 text-center">
        <i class="fa fa-plus mr-1" />
        <span>Add Button</span>
      </button>
    </div>
  </div>
</section>

htmlcssbootstrap-4

Answer №1

To center align your div, you can utilize the css flex properties such as align-items and justify-content. Give it a try!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4d40405b5c5b5d4e5f6f1b0119011f">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<section class="content">
  <div class="card text-center">
    <div class="card-header">
      <h3 class="card-title">CardHeader</h3>
    </div>
    <div class="card-body d-flex align-items-center justify-content-center" style="height: 300px;">
      <div class="">
      <h4>A text above the button</h4>
      <button class="btn btn-primary mt-2 text-center">
      <i class="fa fa-plus mr-1" />
      <span>Add Button</span>
    </button>
      </div>
    </div>
  </div>
</section>

Answer №2

try out this new technique

// CSS styling

position: static;

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

Customize jQuery mobile listview with large headers

Currently, I am making use of the basic list feature in jQuery mobile to showcase a list of products. However, when there are too many characters in the h3 title, it gets snipped and displayed with "..." at the end. Is there a way to display the complete h ...

jqueryhtmljquery-mobile

Variations in Html with distinct tables

I am working with a highly intricate table that is used for reporting purposes. The HTML code below is generated through React and adheres to Bootstrap 4 standards. Every time the code is run, it produces a unique table output. <table class="text-cente ...

bootstrap-4

Implementing universal styles to injected HTML (v-html)

I am facing an issue while injecting HTML content from my database using Vue. The problem is that although I can successfully inject the HTML, the framework stylesheet (Vuetify) does not seem to be applied to the injected content. The rest of the page ha ...

javascripthtmlvue.jsvuetify.js

Are section elements aware of their positional order in the document structure?

For the Terms of Service page, I decided to incorporate both the ol element and the section element for two specific reasons: Ensuring each item is guaranteed in sequential order Allowing each part to be sectioned off individually ol { list-style ...

htmllanguage-lawyeraccessibility

We encountered an issue loading the resource: the server has returned a 404 (Not Found) error message and a 403 Forbidden error message. However, the resource functions properly on Codepen and localhost

I have a CodePen demo that works fine. However, when I upload it to the server, it stops working properly and most external references show 404 errors. Initially, there were no problems, but now it seems to be an issue like this: !--> http://sachin.ipov ...

htmlcss

What is the best way to display a page within a div when clicking in Yii?

I'm trying to use the jQuery function .load() to load a page into a specific div. Here's my code: <a href="" onclick="return false;" id="generalinfo"> <div class="row alert alert-danger"> <h4 class="text-center">Gen ...

javascriptphpjqueryhtmlyii

The console is not displaying the data from the useForm

I am working on a project to create a Gmail clone. I have implemented the useForm library for data validation. However, when I input data into the form and try to print it to the console, nothing is being displayed. const onSubmit = (data) => { ...

javascripthtmlcssreactjsredux

What is the best way to ensure the hamburger menu stays perfectly centered?

My menu is currently aligned to the right and scrolls with the user profile. I want the menu to always be centered and the profile to stay on the right side. I am working with Angular 12 and Bootstrap 5 for this project. Here is the code I have been usin ...

htmlcssangularnavbarbootstrap-5

Error with an Array of Objects in an Array when using Angular and Typescript

Our system has an array called "food/essen" with a total of 10 items. The food plan is made up of 8 objects from the "Food" array and includes an ID for the week number. An issue we are facing in our web application is that although it recognizes the 8 o ...

javascripthtmlarraysangulartypescript

Showing an HTML table in a separate template using Django view

Currently, I have a Django view that enables users to upload a file containing data that will be graphed using a Pandas dataframe. The graph is then generated in a separate view linked within the original file upload view using an image tag, and this proce ...

pythonhtmldjangopandas

Issue with Collapse Feature on Bootstrap 3.x Navbar

The Bootstrap 3 Navbar expands properly in full screen and on a browser with a small width on a desktop PC and mobile browsers, but when using the Toggle navigation button, it doesn't slide down. I have tried to replicate the code from this example: h ...

javascriptjqueryhtmlcsstwitter-bootstrap

Enrollment in the course is conditional on two words being a perfect match

I have a concept in mind, but I'm struggling to piece it together. I have bits of different methods that just don't seem to align. That's why I'm reaching out for your expertise. Let's say I have 3 content containers with the clas ...

javascriptjquerycssmatch

How can I add text to the title of a border using Bootstrap5?

I am attempting to create a design where text appears within the border of an element. I am currently utilizing Bootstrap 5 and jQuery for this project. Despite my efforts with fieldset and legend elements, I have not been successful in achieving the desir ...

htmljquerycsstwitter-bootstrapbootstrap-5

Is there a way to redirect the user directly to the upload page without displaying the response?

Recently, I came across this code snippet that adds a progress bar to an upload form. Currently, the code displays the response from the upload page below the form. However, my goal is to redirect the user to the upload page so they can view the response t ...

javascriptphpjqueryhtmlajax

Struggling with a filtering and sorting problem in my code, looking for some assistance

I'm encountering an issue with an isotope filter menu. The goal is for it to load data based on a timestamp and allow filtering. However, there seems to be a conflict between my sortBy script and the filter script. Below is the code in question: Sor ...

jqueryhtmlcssjquery-isotope

The issue with the placement of the Bootstrap navbar-brand

My regular bootstrap navbar is presenting a problem where the item "navbar-brand" appears higher than the other items in the navbar, which seems illogical. This issue does not occur on the official bootstrap page and persists even when tested on jsfiddle. ...

htmlcsstwitter-bootstrap

"Utilize jQuery to target and highlight specific HTML elements when redirecting

I am working with a list of elements and I want to be able to redirect the focus to a specific element using a URL. <div id="20"></div> <div id="21"></div> <div id="22"></div> // example url http://localhost: ...

htmlcss

Designing Your WordPress Website's Header Structure

When working on my non-WP sites, I usually handle columns using Bootstrap. However, this is my first time delving into CSS positioning without it. I am trying to align my site header elements similar to the image shown, where the text elements are flush ri ...

htmlcsswordpressresponsive-design

Prevent the row height from fluctuating following the fadeOut() effect

Currently, I am facing an issue with two elements on my page: .start_over_button and .speed_buttons. In CSS, the .start_over_button is set to display: none, and in my JavaScript code, I have it so that when .speed_buttons are clicked, they fade out and the ...

jqueryhtmlcss

Unveiling concealed content with JQuery

Here is a link to my pen: http://codepen.io/anon/pen/IszKj I am looking to achieve the functionality where clicking on either "any status" or "any date" will reveal a hidden div containing a list of options. My main query is about the best approach to ta ...

javascriptjqueryhtmlcss