Topic: Making buttons smaller

mark-steven-au premium asked 3 years ago

Expected behavior*_Trying to make MDB buttons smaller than "small"The button appears on the nav Bar as a circle but would like it to be smaller so I am able to get another button there as there is a lot of space either side that could be tightened up._*Actual behavior*_no result either via css or other means seems to work. Is there a way of doing this?_*Resources (screenshots, code snippets etc.)

<MDBDropdown drop>
          <MDBDropdownToggle nav >
            <MDBBtn tag="a" size="sm" floating gradient="blue"><MDBIcon icon="bars" /> </MDBBtn>

Piotr Glejzer staff commented 3 years ago

I'm not sure that is a bug. Did you try to use own CSS to fix this?

mark-steven-au premium commented 3 years ago

Hi Piotr, Yes I tried to use CSS to make it smaller but it seems to have no effect so I was wondering if MDB had some sort of set values locally in the JS that cannot be overwritten by CSS

Piotr Glejzer staff commented 3 years ago

Hmm, the class name prop should work normally? Did you try this?

mark-steven-au premium commented 3 years ago

HI Piotr Yes did try className etc but for some reason it did not seem to effect anything to do with the button. Hence why I thought maybe it was over ridden somehow in MDB script. Only sizes it appears to respond to are size="sm" "lg" Happy see an example if you can with this round button that does work either internal or external css as for some reason it does not work for me.

Piotr Glejzer staff answered 3 years ago

Try this:

    .test-class {
      width: 25px !important;
      height: 25px !important;

    .test-class i {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      line-height: 0 !important;
      height: 100% !important;
      font-size: .7rem !important;


   <MDBBtn tag='a' floating gradient='purple' size='lg' className='test-class'>
          <MDBIcon icon='bolt' />

mark-steven-au premium commented 3 years ago

Hi Piotr, Yes this worked perfect! Obviously not using the !important was the key. Thanks very much

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

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: 4.27.0
  • Device: iOS
  • Browser: chrome, safari, firefox
  • OS: iOS
  • Provided sample code: No
  • Provided link: No