<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="//code.jquery.com/jquery-1.11.1.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-light bg-light"> <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"> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Velkommen til UiS-IT Selvbetjening</h5> <h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6> <p class="card-text">NB! Glemt passord og Aktivering for studenter benytter ditt mobilnummer for engangskode. Studenter kan registrere/endre dette i StudentWeb, ansatte må kontakte IT-servicedesk.</p> </div> </div> </div> </div> <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>Ved problemer ta kontakt med IT-servicedesk på e-post it-hjelp@uis.no eller telefon 51833000 </p> <p>IT-servicedesk – 1. etasje i Kitty Kielland hus – Åpningstider 08:00-15:45 / 08:00-15:00 (15.Mai - 14.Sept)</p> </div> </footer>

body { min-height: 75rem; /* Can be removed; just added for demo purposes */ } bg-inverse { background-color: #292b2c; } .navbar { margin-bottom: 0; } .card { 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: 2rem; 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