<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="collapse bg-inverse navbar-dark bg-dark " id="navbarHeader"> <div class="container"> <div class="row"> <div class="col-sm-8 py-4"> <h4 class="text-white">About</h4> <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p> </div> <div class="col-sm-4 py-4"> <h4 class="text-white">Contact</h4> <ul class="list-unstyled"> <li><a href="#" class="text-white">Follow on Twitter</a></li> <li><a href="#" class="text-white">Like on Facebook</a></li> <li><a href="#" class="text-white">Email me</a></li> </ul> </div> </div> </div> </div> <div class="navbar navbar-inverse navbar-dark bg-dark"> <div class="container d-flex justify-content-between"> <a href="http://lacodeid.com/" class="navbar-brand">UiS-IT Selvbetjening</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> </div> <section> <div class="container"> <div class="row mbr-justify-content-center"> <div class="col-lg-6 mbr-col-md-10"> <div class="wrap"> <div class="ico-wrap"> <span class="mbr-iconfont fa-user-plus fa"></span> </div> <div class="text-wrap vcenter"> <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Aktivere</h2> <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p> </div> </div> </div> <div class="col-lg-6 mbr-col-md-10"> <div class="wrap"> <div class="ico-wrap"> <span class="mbr-iconfont fa-edit fa"></span> </div> <div class="text-wrap vcenter"> <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Endre passord</h2> <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p> </div> </div> </div> <div class="col-lg-6 mbr-col-md-10"> <div class="wrap"> <div class="ico-wrap"> <span class="mbr-iconfont fa-cogs fa"></span> </div> <div class="text-wrap vcenter"> <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Glemt passord </h2> <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p> </div> </div> </div> <div class="col-lg-6 mbr-col-md-10"> <div class="wrap"> <div class="ico-wrap"> <span class="mbr-iconfont fa-question-circle fa"></span> </div> <div class="text-wrap vcenter"> <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Hjelp</h2> <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p> </div> </div> </div> </div> </div> </section> <footer class="text-muted"> <div class="container"> <p class="float-right"> <a href="#">Back to top</a> </p> <p>Album example is © lacodeid.com, but please download and customize it for yourself!</p> <p>New to Bootstrap? <a href="http://lacodeid.com">lacodeid.com</a>.</p> </div> </footer>

body { min-height: 75rem; /* Can be removed; just added for demo purposes */ } bg-inverse { background-color: #292b2c; } .navbar { margin-bottom: 0; } .jumbotron { padding-top: 6rem; padding-bottom: 6rem; margin-bottom: 0; background-color: #fff; } .jumbotron p:last-child { margin-bottom: 0; } .jumbotron-heading { font-weight: 300; } .jumbotron .container { max-width: 40rem; } .album { min-height: 50rem; /* Can be removed; just added for demo purposes */ padding-top: 3rem; padding-bottom: 3rem; background-color: #f7f7f7; } .card { float: left; width: 33.333%; padding: .75rem; margin-bottom: 2rem; border: 0; } .card > img { margin-bottom: .75rem; } .card-text { font-size: 85%; } footer { padding-top: 3rem; padding-bottom: 3rem; } footer p { margin-bottom: .25rem; } section { padding-top: 4rem; padding-bottom: 5rem; background-color: #f1f4fa; } .wrap { display: flex; background: white; padding: 1rem 1rem 1rem 1rem; border-radius: 0.5rem; box-shadow: 7px 7px 30px -5px rgba(0,0,0,0.1); margin-bottom: 2rem; } .wrap:hover { background: linear-gradient(135deg,#6394ff 0%,#0a193b 100%); color: white; } .ico-wrap { margin: auto; } .mbr-iconfont { font-size: 4.5rem !important; color: #313131; margin: 1rem; padding-right: 1rem; } .vcenter { margin: auto; } .mbr-section-title3 { text-align: left; } h2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .display-5 { font-family: 'Source Sans Pro',sans-serif; font-size: 1.4rem; } .mbr-bold { font-weight: 700; } p { padding-top: 0.5rem; padding-bottom: 0.5rem; line-height: 25px; } .display-6 { font-family: 'Source Sans Pro',sans-serif; font-size: 1re