MDBootstrap - Material Design and Bootstrap

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>links</title>
    <link rel="stylesheet" href="style.css">
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
    
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css" rel="stylesheet" />
    <style>

</style>
</head>

<a class="navbar-brand" href="#">Live TV</a>

<button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fas fa-bars"></i>
      </button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">

<li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>

<li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-mdb-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
                        
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li>
                                <a class="dropdown-item" href="#">Action</a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#">Another action</a>
                            </li>
                            <li>
                                <hr class="dropdown-divider" />
                            </li>
                            <li>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </li>
                        </ul>
                    </li>

</ul>

<ul class="navbar-nav d-flex flex-row me-1">
                    <li class="nav-item me-3 me-lg-0">
                        <a class="nav-link" href="#"><i class="fas fa-shopping-cart"></i></a>
                    </li>
                    <li class="nav-item me-3 me-lg-0">
                        <a class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
                    </li>
                </ul>

<form class="w-auto">
                    <input type="search" class="form-control" placeholder="Type query" aria-label="Search">
                </form>

</div>
        </div>
        
    </nav>
    
    <h1 class="text-center bg-success text-white py-2">Live TV & Web Players</h1>
    <div class="container">
        <table class="table w-100 table-stripped">
            <tr>
                <th>Link</th>
                <th>Comments</th>
            </tr>
            <tr>
                <td>
                    <a href="http://stellar.amuslim.org" target="_blank">Stellar Player</a>
                </td>
                <td></td>
            </tr>
            <tr>
                <td><a href="https://ptvsports.amuslim.org/mjunoon.php" target="_blank">MJunoon</a></td>
                <td></td>
            </tr>
            <tr>
                <td><a href="http://ptvsports.amuslim.org/channels.html" target="_blank">International Channles</a></td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <a href="http://cricket.amuslim.org" target="_blank">Cricket & Sports</a>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <a href="http://ptvsports.amuslim.org/assets/ultimate-video-player-6.7/start/player.html" target="_blank">Ultimate Player</a>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <a href="http://ptvsports.amuslim.org/dplayer.html" target="_blank">D Player</a>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <a href="http://ptvsports.amuslim.org/pultimate.html" target="_blank">Ultimate Player 2</a>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <a href="http://ptvsports.amuslim.org/ultimate.html" target="_blank">Ultimate Player 3</a>
                </td>
                <td></td>
            </tr>
        </table>
    </div>
    
    <script type=" text/javascript " src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.js "></script>
</body>

</html>

Bootstrap Template

<!doctype html>
        <html lang="en">
        <head>
            
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
            <title>Bootstrap Template</title>
        </head>
        <body>
          <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="collapsibleNavId">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu" aria-labelledby="dropdownId">
                    <a class="dropdown-item" href="#">Action 1</a>
                    <a class="dropdown-item" href="#">Action 2</a>
                </div>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

<h1 class="text-center">Bootstrap Template</h1>
			<div class="container">
                
            </div>
            
            
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        </body>
        </html>

Material Like Bootstrap - HTML Template

<!doctype html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <title>Bootstrap Template</title>
    <style>
        .spacer{
            width: 100%;
        }
        .right-menu ul{
            margin: 0;
            padding:0
        }
        .right-menu li{
            list-style: none;
            color: white;
            display: inline;
            margin: 0;
            padding: 0;
        }
        .navbar{
            font-size: 22px;
        }
        .my-primary{
            background-color: #6200ee;
        }
        .my-secondary{
            background-color: #03DAC6; 
        }
        .my-error{
            background-color: #b00020;
        }
        i{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-sm navbar-dark my-primary">
        <div class="collapse navbar-collapse" id="collapsibleNavId">
        <ul class="navbar-nav mr-auto mt-lg-0">
            <li class="nav-item"><i class="fas fa-bars text-white"></i></li>
        </ul>
        
    <div class="right-menu">
        <ul>
            <li class="nav-item mx-2"><i class="fas fa-search"></i></li>
            <li class="nav-item mx-2"><i class="fas fa-bookmark"></i></li>
            <li class="nav-item mx-2"><i class="fas fa-heart"></i></li>
            <li class="nav-item mx-2"><i class="fas fa-ellipsis-v"></i></li>    
            
        </ul>
    </div>

</div>
    </nav>

<h1 class="text-center my-secondary p-2">Bootstrap Template</h1>
    <div class="container">
        
    </div>
    
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MD Bootstrap</title>
    <link rel="stylesheet" href="style.css">
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
    
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css" rel="stylesheet" />
    <style>

</style>
</head>

<a class="navbar-brand" href="#">Brand</a>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">

<li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>

</ul>

<form class="w-auto">
                    <input type="search" class="form-control" placeholder="Type query" aria-label="Search">
                </form>

</div>
        </div>
        
    </nav>
    
    <h1 class="text-center">MD Bootstrap</h1>
    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.js"></script>
</body>

</html>