putting multiple components on a same line within a card bod


Topic: putting multiple components on a same line within a card body?

davout asked 5 years ago

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?


Konrad Stępień staff answered 5 years ago

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>

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 Angular
  • MDB Version: 8.8.1
  • Device: Pc
  • Browser: Chrome
  • OS: Windows10
  • Provided sample code: No
  • Provided link: No
Tags