Center align a card

  1. MDB Home Page
  2. Support Main Page
  3. MDB Standard
Topic: Center align a card

folliejester asked 3 years 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="https://radio.syden.xyz/public/jpop/embed?theme=dark" frameborder="0" allowtransparency="true" style="width: 100%; min-height: 150px; border: 0;"></iframe>
    <button type="button" class="btn btn-primary">Button</button>
  </div>
</div>

folliejester answered 3 years ago

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

Grzegorz Bujański staff answered 3 years ago

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

folliejester answered 3 years ago

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

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

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
Tags
cards card mdb-card
Related topics
0
Card Animation
0
Card deck doesn't give an equal height
0
Cascading cards in bootstrap 5
1
CSS not applied
1
Multiple Cards using *ngFor
About author
folliejester
40Support score
3Questions 2Answers
0Snippets likes 2Snippets