Topic: Center button on a card
wondernate priority asked 6 years ago
This may not be a MDB specific question but I can't seem to get the flex commands to respond. So I am wondering if there is a conflict with MDB or just a different way to do it. I am trying to get a button only to center on a card. I have the H1 content centered and then the text or ul left aligned next and then at the bottom the button I want centered. I saw there was one example but it centered everything on the card, the example I mean is the Image Overlay card example.
Here is the code I am trying:
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title text-center">Centered Title</h4>
<!-- Text -->
<p class="card-text">
<ul>
<li>Left</li>
<li>Aligned</li>
<li>List</li>
</ul>
</p>
<!-- Button -->
<div class="mb-12 d-flex align-items-center">
<a href="#" class="btn btn-primary d-flex align-self-center">Center This Button</a>
</div>
</div>
Neither the align self on the button or the align items on the div work. When I inspect the div it is expanded to 100% width inside the card so the button inside should have space to center.
Can you tell me what I am missing?
Marta Wierzbicka staff answered 6 years ago
Hi,
would you create a snippet showing the problem here: https://mdbootstrap.com/snippets/? It will be easier for me to check out your code. I'll try to help you.
Best,
Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: 4.5.10
- Device: PC
- Browser: Chrom
- OS: Windows 10
- Provided sample code: No
- Provided link: No