<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet"> <header class="navbar navbar-dark bg-inverse navbar-fixed-top"> <div class="container"> <div class="clearfix"> <button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="true" aria-label="Menu"> ☰ </button> <h1 class="hidden-sm-up"><a class="navbar-brand" href="#"><i class="fa fa-cloud"></i> WatchX</a></h1> </div> <div class="navbar-toggleable-xs collapse" id="menu" aria-expanded="true"> <ul class="nav navbar-nav"> <a class="navbar-brand hidden-xs-down" href="#"><i class="fa fa-cloud"></i> Title</a> <li class="nav-item"><a class="nav-item nav-link" href="#>">Home</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Movies</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Animation</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Show All</a> </div> </li> <li class="nav-item"><a class="nav-item nav-link" href="#">Series</a></li> </ul> </div> </div> </header> <main class="container"> <section class="filmes" id="filmes"> <h2>Featured Movies</h2> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6"> <article class="card"> <header class="title-header"> <h3>Movie Title</h3> </header> <div class="card-block"> <div class="img-card"> <img src="https://placehold.it/300x250&text=Movie" alt="Movie" class="w-100" /> </div> <p class="tagline card-text text-xs-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="#" class="btn btn-primary btn-block"><i class="fa fa-eye"></i> Watch Now</a> </div> </article> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <article class="card"> <header class="title-header"> <h3>Movie Title</h3> </header> <div class="card-block"> <div class="img-card"> <img src="https://placehold.it/300x250&text=Movie" alt="Movie" class="w-100" /> </div> <p class="tagline card-text text-xs-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="#" class="btn btn-primary btn-block"><i class="fa fa-eye"></i> Watch Now</a> </div> </article> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <article class="card"> <header class="title-header"> <h3>Movie Title</h3> </header> <div class="card-block"> <div class="img-card"> <img src="https://placehold.it/300x250&text=Movie" alt="Movie" class="w-100" /> </div> <p class="tagline card-text text-xs-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="#" class="btn btn-primary btn-block"><i class="fa fa-eye"></i> Watch Now</a> </div> </article> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <article class="card"> <header class="title-header"> <h3>Movie Title</h3> </header> <div class="card-block"> <div class="img-card"> <img src="https://placehold.it/300x250&text=Movie" alt="Movie" class="w-100" /> </div> <p class="tagline card-text text-xs-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="#" class="btn btn-primary btn-block"><i class="fa fa-eye"></i> Watch Now</a> </div> </article> </div> </div> </section> </main> <footer class="footer text-muted text-xs-center text-md-left bg-inverse"> <div class="container"> <ul class="footer-links"> <li><a href="#">Contact</a></li> <li><a href="#">Terms</a></li> <li><a href="#">DMCA</a></li> </ul> <p>&copy 2016 - All rights reserved.</p> </div> </footer>

body {padding-top: 80px;} .title-header {padding: .75rem 1.25rem; background-color: #f5f5f5; border-bottom: 1px solid rgba(0,0,0,.125);} .title-header h3 {font-size: 0.80rem; margin: 0;} .img-card {width: 100%; margin-bottom: .40rem;} .filmes {margin-bottom: .60rem;} .series {margin-bottom: .60rem;} .footer {padding: 1rem 0; margin-top: 2rem; font-size: 80%; text-align: left;} .footer p {margin: 0;} .footer-links {padding-left: 0; margin-bottom: 1rem;} .footer-links li {display: inline-block;} .footer a {font-weight: 500; color: inherit;} .footer-links li + li {margin-left: 1rem;}