<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 ----------> <section class="d-flex flex-column"> <nav class="navbar navbar-light navbar-expand-md sticky-top text-center" style="font-size: 26px;"> <div class="container-fluid"><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navcol-1" style="padding: 10px;font-size: 20px;"> <ul class="nav navbar-nav"> <li class="nav-item" role="presentation"><a class="nav-link active shadow-sm" href="#" style="color: rgba(0,0,0,0.9);">File</a></li> <li class="nav-item" role="presentation"><a class="nav-link shadow-sm active" href="#" style="color: rgba(0,0,0,0.9);">Downloads</a></li> <li class="nav-item" role="presentation"><a class="nav-link shadow-sm active" href="#" style="color: rgba(0,0,0,0.9);">Tool</a></li> <li class="nav-item" role="presentation"><a class="nav-link shadow-sm active" href="#" style="color: rgba(0,0,0,0.9);">Help</a></li> </ul> <ul class="nav navbar-nav ml-auto"> <li class="nav-item" role="presentation"><a class="nav-link text-center text-secondary d-flex" href="www.sunglade.in" target="_blank">www.sunglade.in</a></li> </ul> </div> </div> </nav> </section> <hr> <div class="div1"> <div class="container"> <div class="row"> <div class="col-2"><button class="btn btn-primary d-lg-flex justify-content-lg-center align-items-lg-center" type="button" style="width: 150px;background-color: rgb(133,217,131);font-size: 16px;font-weight: bold;filter: brightness(100%);height: 36px;">+Paste</button></div> <div class="col-7"><input class="form-control-lg d-inline float-left" type="text" name="Youtube-url" required="" placeholder="Paste Youtube URL" pattern="https://www.youtube.com/" style="width: 100%;height: 36px;"></div> <div class="col"><button class="btn btn-primary" type="button" style="width: 150px;height: 36px;">Download  <i class="icon ion-ios-arrow-thin-down"></i></button></div> </div> </div> </div> <hr> <div class="div1"> <div class="container"> <div class="row"> <div class="col-2 d-inline float-none align-self-center"><img class="border rounded" src="https://japasmusicblog.files.wordpress.com/2018/01/youtube-thumbnail.jpg?w=816" style="width: 128px;"></div> <div class="col-3"> <p><strong>The best youtube Video</strong></p> <p>Playlist : 369Mb | Videos : 50</p> </div> <div class="col-4 text-center justify-content-center align-self-center"> <div class="progress d-flex align-items-lg-center"> <div class="progress-bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div> </div> </div> <div class="col-2 align-self-center"><button class="btn btn-primary" type="button" style="width: 150px;height: 36px;">Download  <i class="icon ion-ios-arrow-thin-down"></i></button></div> </div> </div> </div> <hr> <div class="div1"> <div class="container"> <div class="row"> <div class="col-2 d-inline float-none align-self-center"><img class="border rounded" src="https://www.studioflicks.com/wp-content/uploads/2018/02/w0fkl43qmie.jpg" style="width: 128px;"></div> <div class="col-3"> <p><strong>The best youtube Video</strong></p> <p>Playlist : 369Mb | Videos : 50</p> </div> <div class="col-4 text-center justify-content-center align-self-center"> <div class="progress d-flex align-items-lg-center"> <div class="progress-bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div> </div> </div> <div class="col-2 align-self-center"><button class="btn btn-primary" type="button" style="width: 150px;height: 36px;">Download  <i class="icon ion-ios-arrow-thin-down"></i></button></div> </div> </div> </div> <hr> <div class="div1"> <div class="container"> <div class="row"> <div class="col-2 d-inline float-none align-self-center"><img class="border rounded" src="https://social.quedeletras.com/wp-content/uploads/2017/09/mecchuko-full-video-song-dj-full-video-songs-allu-arjun-pooja-hegde-dsp-youtube-thumbnail.jpg" style="width: 128px;"></div> <div class="col-3"> <p><strong>The best youtube Video</strong></p> <p>Playlist : 369Mb | Videos : 50</p> </div> <div class="col-4 text-center justify-content-center align-self-center"> <div class="progress d-flex align-items-lg-center"> <div class="progress-bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div> </div> </div> <div class="col-2 align-self-center"><button class="btn btn-primary" type="button" style="width: 150px;height: 36px;">Download  <i class="icon ion-ios-arrow-thin-down"></i></button></div> </div> </div> </div>