Topic: putting multiple components on a same line within a card body?
I want to use a ‘Card’ as the container for a full width toolbar that will include a mix of buttons and selectors.
Hoe can I configure the cart body so that the buttons and selectors are in the same vertical row and aligned horizontally across the card?
Hi @tommykjensen,
Please visit the page about Flexbox, I think you find an example of how to resolve your issue on this page.
For example please just use d-flex class for the wrapper of buttons.
<mdb-card>
<mdb-card-body>
<div class="d-flex">
<button mdbBtn type="button" color="primary" rounded="true" mdbWavesEffect title="Save draft">...</button>
<button mdbBtn type="button" color="primary" rounded="true" mdbWavesEffect title="Undo edits">...</button>
<button mdbBtn type="button" color="success" rounded="true" mdbWavesEffect title="Save PDF">...</button>
</div>
</mdb-card-body>
</mdb-card>
Best, Konrad.
davout commented 5 years ago
Using 'd-flex' works! thanks.
tommykjensen commented 5 years ago
Thank you Konrad. What I posted works in my case but I will have a look at the link you provide. Thanks.
You could do something like this:
<mdb-card>
<mdb-card-body>
<div class="clearfix ">
<button mdbBtn type="button" color="primary" rounded="true" mdbWavesEffect title="Save draft"><i class="fal fa-save fa-2x"></i></button>
<button mdbBtn type="button" color="primary" rounded="true" mdbWavesEffect title="Undo edits"><i class="fal fa-undo fa-2x"></i></button>
<button mdbBtn type="button" color="success" rounded="true" mdbWavesEffect title="Save PDF" class="float-right"><i class="fal fa-file-pdf fa-2x"></i></button>
</div>
</mdb-card-body>
</mdb-card>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.8.1
- Device: Pc
- Browser: Chrome
- OS: Windows10
- Provided sample code: No
- Provided link: No