Center align a card

Topic: Center align a card

folliejester asked 7 months ago

Expected behavior : A center aligned card enter image description here

Actual behavior : A top aligned card enter image description here

Resources (screenshots, code snippets etc.)

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <iframe src="" frameborder="0" allowtransparency="true" style="width: 100%; min-height: 150px; border: 0;"></iframe>
    <button type="button" class="btn btn-primary">Button</button>

folliejester answered 7 months ago

fix : <div class="vh-100 d-flex justify-content-center align-items-center">

Grzegorz Bujański staff answered 7 months ago

I can see that you have solved the problem, right?

folliejester answered 7 months ago

I updated it to a horizontally centered card, and I need help making it vertically centered. (don't use your phone to open)

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.1
  • Device: Desktop Computer
  • Browser: Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No