<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-9" style="padding: 10px;"><input type="text" style="max-width: 100%;width: 100%;height: 38px;"></div> <div class="col-3" style="padding-top: 10px;"><button class="btn btn-primary" type="button">Paste</button></div> </div> <div class="row"> <div class="col-4" style="padding: 10px;"><img class="img-thumbnail d-flex" src="http://ytdownloader.biz/img/s6.png"></div> <div class="col-8 text-left" style="padding-top: 10px;"> <p class="text-left"><strong>The Cardiagans - My Favourite Game</strong></p> <p>03:43</p> </div> </div> <div class="row"> <div class="col-4" style="padding: 0px;"> <div class="dropdown"><button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button" style="width: 166px;">Download Video  </button> <div class="dropdown-menu" role="menu"><a class="dropdown-item" role="presentation" href="#">First Item</a><a class="dropdown-item" role="presentation" href="#">Second Item</a><a class="dropdown-item" role="presentation" href="#">Third Item</a></div> </div> </div> <div class="col-4" style="padding: 0px;"> <div class="dropdown"><button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button" style="width: 166px;">Download Audio  </button> <div class="dropdown-menu" role="menu"><a class="dropdown-item" role="presentation" href="#">First Item</a><a class="dropdown-item" role="presentation" href="#">Second Item</a><a class="dropdown-item" role="presentation" href="#">Third Item</a></div> </div> </div> <div class="col-2" style="padding: 0px;max-width: 100%;"><button class="btn btn-secondary" type="button" style="width: 83px;">Folder</button></div> <div class="col-2 text-left"><button class="btn btn-secondary" type="button" style="width: 83px;">Settings</button></div> </div> </div> <div class="table-responsive" style="padding: 26px;"> <table class="table"> <thead> <tr> <th>File Name</th> <th>Format</th> <th>Size</th> <th>ETA</th> <th>Progess</th> </tr> </thead> <tbody> <tr> <td>Song 1</td> <td>MP4</td> <td>1.0 MB</td> <td>2 Mins</td> <td> <div class="progress"> <div class="progress-bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div> </div> </td> </tr> <tr> <td>Song 2<br></td> <td>MP3</td> <td>1.4 MB</td> <td>2 Mins</td> <td> <div class="progress"> <div class="progress-bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div> </div> </td> </tr> <tr> <td>Song3</td> <td>MP3<br></td> <td>3.0 MB</td> <td>4 Mins</td> <td> <div class="progress"> <div class="progress-bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div> </div> </td> </tr> </tbody> </table> </div>