<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="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm"> <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5> </div> <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"> <h1 class="display-4">Pricing</h1> <p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.</p> </div> <div class="container"> <section> <div class="container"> <div class="row"> <div class="col-lg-12 mbr-col-md-10"> <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="pt-4 my-md-5 pt-md-5 border-top"> <div class="row"> <div class="col-12 col-md"> <img class="mb-2" src="../../assets/brand/bootstrap-solid.svg" alt="" width="24" height="24"> <small class="d-block mb-3 text-muted">© 2017-2018</small> </div> <div class="col-6 col-md"> <h5>Features</h5> <ul class="list-unstyled text-small"> <li><a class="text-muted" href="#">Cool stuff</a></li> <li><a class="text-muted" href="#">Random feature</a></li> <li><a class="text-muted" href="#">Team feature</a></li> <li><a class="text-muted" href="#">Stuff for developers</a></li> <li><a class="text-muted" href="#">Another one</a></li> <li><a class="text-muted" href="#">Last time</a></li> </ul> </div> <div class="col-6 col-md"> <h5>Resources</h5> <ul class="list-unstyled text-small"> <li><a class="text-muted" href="#">Resource</a></li> <li><a class="text-muted" href="#">Resource name</a></li> <li><a class="text-muted" href="#">Another resource</a></li> <li><a class="text-muted" href="#">Final resource</a></li> </ul> </div> <div class="col-6 col-md"> <h5>About</h5> <ul class="list-unstyled text-small"> <li><a class="text-muted" href="#">Team</a></li> <li><a class="text-muted" href="#">Locations</a></li> <li><a class="text-muted" href="#">Privacy</a></li> <li><a class="text-muted" href="#">Terms</a></li> </ul> </div> </div> </footer> </div>

.navbar-brand { position: left; height: 2rem; } .navbar-brand > img { position: left; height: 2rem; margin-bottom: 4rem; } 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