<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 ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <h3 class="text-left text-primary"> Welcome, User! </h3> <div id="card-825777"> <div class="card"> <div class="card-header"> <a class="card-link collapsed" data-toggle="collapse" data-parent="#card-825777" href="#card-element-817149">Notifications</a> </div> <div id="card-element-817149" class="collapse"> <div class="card-body"> You have been outbidded in the <a href="#auction">Airpods</a> auction! </div> </div> </div> </div> <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-dark bg-dark static-top"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">EbayKiller</a> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#profile">Profile <span class="sr-only"></span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Create New Auction</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Sort by</a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Date (Newest)</a> <a class="dropdown-item" href="#">Date (Oldest)</a> <a class="dropdown-item" href="#">Ascending (A-Z)</a><a class="dropdown-item" href="#">Descending (Z-A)</a> </div> </li> </ul> <form class="form-inline"> <input class="form-control mr-sm-2" type="text" /> <button class="btn btn-primary my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-primary my-2 my-sm-0" type="reset">Clear</button> </form> <ul class="navbar-nav ml-md-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Link <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Dropdown link</a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </nav> <div class="row"> <div class="col-md-4"> <div class="card"> <img class="card-img-top" alt="Bootstrap Thumbnail Second" src="https://d2q01ftr6ua4w.cloudfront.net/assets/images/65470faa3d222abff111aa4064c065d13d2e016e.png?t=1660121283" width="100" height="400" /> <div class="card-block"> <h5 class="card-title"> Wired Game Controller </h5> <p class="card-text"> Starting Bid: 20€ </p> <p> <a class="btn btn-primary" href="#">Visit Auction</a> <a class="btn" href="#">Technology</a> </p> </div> </div> </div> <div class="col-md-4"> <div class="card"> <img class="card-img-top" alt="Bootstrap Thumbnail Second" src="https://us.123rf.com/450wm/john6863373/john68633731506/john6863373150600166/41902741-modern-ceiling-lamp-white-isolated.jpg" width="100" height="400"/> <div class="card-block"> <h5 class="card-title"> Modern Lamp </h5> <p class="card-text"> Starting Bid: 45€ </p> <p> <a class="btn btn-primary" href="#">Visit Auction</a> <a class="btn" href="#">Home</a> </p> </div> </div> </div> <div class="col-md-4"> <div class="card"> <img class="card-img-top" alt="Bootstrap Thumbnail Third" src="https://i.pinimg.com/736x/ac/78/42/ac7842271c1acfad5ab1220f92c85dda.jpg" width="100" height="400" /> <div class="card-block"> <h5 class="card-title"> Abstract Expressions - Painting </h5> <p class="card-text"> Starting Bid: 1000€ </p> <p> <a class="btn btn-primary" href="#">Visit Auction</a> <a class="btn" href="#">Art</a> </p> </div> </div> </div> </div> </div> </div> </div>