Customization

There is no tool that perfectly meets the needs of all users and all projects.

That is why the possibility of easy and quick customization is so important. MDBootstrap provides such options and in this lesson we will learn how to use them.

Make sure you import the scss source files

Remember from the previous lesson when we needed to change the import from a CSS file to an scss file to be able to use the Utility API?

For customization, we also need the scss source files, so make sure the /src/scss/styles.scss file has the following import:

        
            
  
      @import 'mdb-ui-kit/src/scss/mdb.free.scss';
  
      
        
    

        
            
  
      @import 'mdb-ui-kit/src/scss/mdb.pro.scss';
  
      
        
    

How to use customization?

Hava a look - this is a standard MDB card with a button:

Let's assume that our new project is to be characterized by a slightly different style. Its most important feature will be larger rounding in all UI elements.

We want to use MDB cards and buttons, but we need to adapt them to the new requirements because their default rounding is small.

How we can do this?

Step 1 - have a look at the API tab

Almost every page of the MDB documentation at the top contains an "API" tab.

Click on the link below to see the API tab in the cards documentation.

https://mdbootstrap.com/docs/standard/components/cards/#docsTabsAPI™

Inside you will find the "SCSS variables" section. Click the "show code" button. You will then see a list of scss variables that you can modify to customize the component:

        
            
  
      $card-spacer-y: 1.5rem;
      $card-spacer-x: 1.5rem;
      $card-title-spacer-y: $spacer * 0.5;
      $card-border-width: $border-width;
      $card-border-color: var(--#{$prefix}border-color-translucent);
      $card-border-radius: 0.5rem;
      $card-box-shadow: null;
      $card-inner-border-radius: subtract($card-border-radius, $card-border-width);
      $card-cap-padding-y: $card-spacer-y * 0.5;
      $card-cap-padding-x: $card-spacer-x;
      $card-cap-bg: rgba(255, 255, 255, 0);
      $card-cap-color: null;
      $card-height: null;
      $card-color: null;
      $card-bg: $white;
      $card-img-overlay-padding: 1.5rem;
      $card-group-margin: $grid-gutter-width * 0.5;
      $card-footer-background-color: rgba(255, 255, 255, 0);
      $card-header-border-width: 2px;
      $card-header-border-color: hsl(0, 0%, 96%);
      $card-footer-border-width: 2px;
      $card-footer-border-color: hsl(0, 0%, 96%);
  
      
        
    

We will find there, among others, the variable $card-border-radius: 0.5rem; which is responsible for the rounding in the cards.

Let's use it.

Step 2 - modify the selected variable in the /src/scss/styles.scss file

In the /src/scss/styles.scss file, above the import, let's add the mentioned variable and change its value to 1rem:

        
            
  
      $card-border-radius: 1rem;

      @import 'mdb-ui-kit/src/scss/mdb.free.scss';
  
      
        
    

After saving the file, you will see that the rounding of the card has increased. Now every new card will have the roundings you defined in the $card-border-radius variable.

Let's do the same with the button.

In the buttons documentation, you will find the "API" tab, and in it the "SCSS variables" section:

https://mdbootstrap.com/docs/standard/components/buttons/#docsTabsAPI

There you will find the $btn-border-radius: $border-radius; variable.

Let's add it to our customization and set its value to 1rem, same as cards:

        
            
    
        $card-border-radius: 1rem;
        $btn-border-radius: 1rem;
        
        @import 'mdb-ui-kit/src/scss/mdb.free.scss';
    
        
        
    

After saving the file, you will see that the rounding of the card has increased. Now every new card will have the roundings you defined in the $card-border-radius variable.

And that's how customization works in Bootstrap and MDBootstrap - on the page of the component or functionality you want to customize, you go to the API tab and to the SCSS variables section. Then you look for the variable that is responsible for the property you want to modify, then you change its value and add it to the /src/scss/styles.scss file.

If you have any questions, or something doesn't work as expected - hit me up on twitter 😉