Javascript MDBootstrap Buttons Component

Last Updated : 07 Mar, 2022

MDBootstrap is a Material Design and bootstrap-based Javascript UI library that is used to make attractive webpages with its seamless and easy-to-use component. It is free for both personal & commercial use. In this article, we will know how to use Buttons Component in Javascript MDBootstap.

MDBootstrap Buttons Component are the responsive buttons, built using Bootstrap 5, facilitates the predefined button styles ie., warning, info & danger for multiple button types, such as outline, rounded, social, floating, fixed, tags, etc.

Syntax:

<button type="button" class="btn btn-primary"> Button </button>

Approach:

Download Javascript MDBootstrap from the official site.
Extract the files to the current working directory.
In the Index.html file, specify the downloaded file path in the <head> tag.

<link rel=”icon” href=”img/mdb-favicon.ico” type=”image/x-icon” />
<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.15.2/css/all.css” />
<link rel=”stylesheet” href=
“https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap”/>
<link rel=”stylesheet” href=”css/mdb.min.css” />
<script type=”text/javascript” src=”js/mdb.min.js”></script>
<script type=”text/javascript”></script>

Example 1: This is the basic example that shows how to use the buttons component in MDBootstrap Javascript.

HTML

<!DOCTYPE html > 
<html lang="en"> 
  
<head> 
    <title>Javascript MDBootstrap List Group Component</title> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1,  
                   shrink-to-fit=no" /> 
    <link rel="icon" 
          href="img/mdb-favicon.ico" 
          type="image/x-icon" /> 
    <link rel="stylesheet" href= 
"https://use.fontawesome.com/releases/v5.15.2/css/all.css" /> 
    <link rel="stylesheet" href= 
"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" /> 
    <link rel="stylesheet" href="css/mdb.min.css" /> 
    <script type="text/javascript" 
            src="js/mdb.min.js"> 
    </script> 
</head> 
<body> 
    <div style="margin-left: 50px;"> 
        <h2 style="margin-top: 50px;"> 
            GeeksforGeeks 
        </h2> 
        <h4> 
            MDBootstrap Javascript Buttons Component 
        </h4> 
        <br> 
        <button type="button" 
                class="btn btn-danger btn-rounded btn-lg"> 
            Button 
        </button> 
        <button type="button" 
                class="btn btn-warning btn-rounded btn-lg"> 
            Button 
        </button> 
        <button type="button" 
                class="btn btn-info btn-rounded btn-lg"> 
            Button 
        </button> 
    </div> 
</body> 
</html>

Output:

MDBootstrap Javascript Buttons Component

Example 2: In this example, we will know how to add additional content to the buttons component in MDBootstrap Javascript.

HTML

<!DOCTYPE html > 
<html lang="en"> 
  
<head> 
    <title>Javascript MDBootstrap List Group Component</title> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1,  
                   shrink-to-fit=no" /> 
    <link rel="icon" 
          href="img/mdb-favicon.ico" 
          type="image/x-icon" /> 
    <link rel="stylesheet" href= 
"https://use.fontawesome.com/releases/v5.15.2/css/all.css" /> 
    <link rel="stylesheet" href= 
"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" /> 
    <link rel="stylesheet" href="css/mdb.min.css" /> 
    <script type="text/javascript" 
            src="js/mdb.min.js"> 
    </script> 
</head> 
  
<body> 
    <div style="margin-left: 50px;"> 
        <h2 style="margin-top: 50px;"> 
            GeeksforGeeks 
        </h2> 
        <h4> 
            MDBootstrap Javascript Buttons Component 
        </h4> 
        <br> 
        <button type="button" 
                class="btn btn-outline-danger btn-rounded btn-lg"> 
            Button 
        </button> 
        <button type="button" 
                class="btn btn-warning btn-rounded disabled"> 
            Button 
        </button> 
        <div class="d-grid gap-2 col-6 mx-auto"> 
            <button class="btn btn-secondary btn-rounded" 
                    type="button"> 
                Button 
            </button> 
        </div> 
    </div> 
</body> 
</html>