Bootstrap columns and justify-content-end - html

I'm having difficulty getting my columns to spread out.
According to the docs (https://getbootstrap.com/docs/5.0/layout/columns/#horizontal-alignment), justify-content-between should be what I need.
But I end up with my columns in their default position, not pushed outwards.
Basic code example:
https://codepen.io/6a0a49af-a3f9-4e78-8ccf-91d8d1b1f102/pen/QWKYJqM


I have changed your code a little to get the desired effect.
On <div class="row"> i removed some unneeded styles.
and on the <div class="col"> i changed it to col-4 to set the width.
Since bootstrap works in a frame of 12. 4 + 4 leaves 4 short so thats the space thats being filled with justify-content-between.
I also deleted your css since it was not needed.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<body class="d-flex flex-column min-vh-100">
<!-- -->
<nav class="navbar navbar-light navbar-expand-md bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/logo.svg" alt="">
</a>
<!-- -->
<div class="navbar-nav d-none d-md-flex">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">A</a>
<a class="nav-link" href="#">B</a>
<a class="nav-link" href="#">C</a>
<a class="nav-link" href="#">D</a>
<a class="nav-link" href="#">E</a>
</div>
<!-- -->
<span>
<a href="https://twitter.com/" rel="nofollow noopener noreferrer"><i
class="fab fa-twitter mx-2 gstwitterblue"></i></a>
<a href="https://www.linkedin.com/"
rel="nofollow noopener noreferrer"><i class="fab fa-linkedin mx-2 gslinkedinblue"></i></a>
</span>
</div>
</nav>
<main class="flex-fill">
<div class="container d-none d-md-flex flex-md-row">
<div class="row justify-content-between">
<div class="col-4">
<div class="card">
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube-nocookie.com/embed/wm48_VrbB4Q?rel=0" allowfullscreen></iframe>
</div>
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur orci malesuada sem lacinia, vitae tempor tellus auctor. Sed elementum iaculis quam ac consectetur. Nam ac laoreet est, ut placerat arcu. Ut viverra, quam vitae gravida ornare, arcu felis elementum elit, a pulvinar lacus augue ac nisl. Nunc tincidunt ultricies luctus. Donec et congue ex. Curabitur lacinia scelerisque imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ultricies, mauris at ultricies dapibus, urna nisl ullamcorper libero, ac dictum ex neque sed ante. Pellentesque luctus nibh libero, consequat vulputate eros porttitor vitae.</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card gscustomwidth">
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube-nocookie.com/embed/wm48_VrbB4Q?rel=0" allowfullscreen></iframe>
</div>
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur orci malesuada sem lacinia, vitae tempor tellus auctor. Sed elementum iaculis quam ac consectetur. Nam ac laoreet est, ut placerat arcu. Ut viverra, quam vitae gravida ornare, arcu felis elementum elit, a pulvinar lacus augue ac nisl. Nunc tincidunt ultricies luctus. Donec et congue ex. Curabitur lacinia scelerisque imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ultricies, mauris at ultricies dapibus, urna nisl ullamcorper libero, ac dictum ex neque sed ante. Pellentesque luctus nibh libero, consequat vulputate eros porttitor vitae. </p>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Standard Footer -->
<footer class="bg-light py-3 d-none d-md-flex">
<div class="container d-flex justify-content-between">
<span class="text-dark fw-lighter">Copyright © 2020 Foobar Ltd. All rights reserved.</span>
<span class="text-dark fw-lighter"><a href="#" class="text-reset text-decoration-none">Legal
Information</a></span>
</div>
</footer>
</body>


The reason what you want doesn't happen is because you're not giving the row div a full width. From your code, add w-100 to the following div:
<div class="row row-cols-1 row-cols-md-2 justify-content-between">

Related

how to use scrollspy in bootstrap4?

I am new to html/bootstrap/css.
I'm trying to make scrollspy in a list on a website page that I'm currently working on (essentially, I'm only modifying HTML produced by R postcards package).
Here is my HTML code. This file uses bootstrap 3.4.1, I can't replicate the expected behavior with bootstrap 4. When I do use <script> with a newer version of Bootstrap (say 4.5.0) the buttons/list items (li)/links do not seem to be active anymore as I scroll through the page.
I'm not sure why this code does not run as expected using newer versions of bootstrap.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
<style type="text/css">
body {font-family: 'Roboto Slab', serif;}
div.my-5 div {height: 500px;}
li.active>a>button {background-color: #343a40;color: #fff;}
</style>
<title>Frank Hermosillo</title>
</head>
<body>
<div class="container-fluid d-none d-lg-block d-xl-block">
<div class="d-flex row flex-row vh-100">
<div class="d-flex flex-column col-5 align-items-center text-center align-self-center">
<div class="mx-auto text-center">
<div class="p-3">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png" style="height:15rem" class="rounded">
</div>
<div class="p-2">
<h1>Frank Hermosillo</h1>
</div>
<hr style="width:60%;" />
<div class="p-2">
<div id="icon-list">
<div id="myScrollspy">
<ul class="list-inline nav">
<li class="list-inline-item">
<a href="#bio">
<button type="button" class="btn btn-outline-dark mb-2">
Bio
</button>
</a>
</li>
<li class="list-inline-item">
<a href="#education">
<button type="button" class="btn btn-outline-dark mb-2">
Educ
</button>
</a>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex flex-column vh-100 border-left"></div>
<div class="d-flex flex-column col px-5 align-items-center align-self-center mh-100" style="overflow-y: scroll;" data-spy="scroll" data-target="#myScrollspy">
<div class="my-5" id="content">
<div id="bio" class="section level2">
<h2>Bio</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales cursus ante, ut iaculis diam euismod nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut felis a nisl viverra sollicitudin. Vestibulum quis elementum libero. Suspendisse pellentesque justo dui, at consectetur turpis vulputate eget. Maecenas lacus tortor, tempus eu magna ac, maximus tincidunt est. Proin vitae lacus sollicitudin, lobortis orci vitae, fringilla ex. Nullam vestibulum neque sapien, id dapibus augue molestie ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non ante leo. Pellentesque id massa nisi. Maecenas at facilisis velit. Nunc in purus in nisi consectetur bibendum. Etiam mattis eros ante, eget suscipit lectus tincidunt sit amet. Aliquam sed suscipit dui. Nulla non tristique sem.</p>
<p>Link text Here</p>
</div>
<div id="education" class="section level2">
<h2>Education</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales cursus ante, ut iaculis diam euismod nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut felis a nisl viverra sollicitudin. Vestibulum quis elementum libero. Suspendisse pellentesque justo dui, at consectetur turpis vulputate eget. Maecenas lacus tortor, tempus eu magna ac, maximus tincidunt est. Proin vitae lacus sollicitudin, lobortis orci vitae, fringilla ex. Nullam vestibulum neque sapien, id dapibus augue molestie ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non ante leo. Pellentesque id massa nisi. Maecenas at facilisis velit. Nunc in purus in nisi consectetur bibendum. Etiam mattis eros ante, eget suscipit lectus tincidunt sit amet. Aliquam sed suscipit dui. Nulla non tristique sem.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container-flex min-vh-100 d-block d-lg-none d-xl-none">
<div class="d-flex flex-row justify-content-center">
<div class="d-flex flex-col">
<div class="mx-auto">
<div class="p-3 mt-3 text-center">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png" style="height:15rem" class="rounded">
</div>
<div class="p-2 text-center">
<h1>Frank Hermosillo</h1>
</div>
<hr style="width:60%;" />
<div class="row justify-content-center align-items-center">
<div class="col-8 p-1 text-center">
<div class="list-group">
<a href="#bio">
<button type="button" class="list-group-item list-group-item-action my-1 rounded">
Bio
</button>
</a>
<a href="#education">
<button type="button" class="list-group-item list-group-item-action my-1 rounded">
Educ
</button>
</a>
</div>
</div>
</div>
<div class="p pt-4 px-5">
<div id="bio" class="section level2">
<h2>Bio</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales cursus ante, ut iaculis diam euismod nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut felis a nisl viverra sollicitudin. Vestibulum quis elementum libero. Suspendisse pellentesque justo dui, at consectetur turpis vulputate eget. Maecenas lacus tortor, tempus eu magna ac, maximus tincidunt est. Proin vitae lacus sollicitudin, lobortis orci vitae, fringilla ex. Nullam vestibulum neque sapien, id dapibus augue molestie ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non ante leo. Pellentesque id massa nisi. Maecenas at facilisis velit. Nunc in purus in nisi consectetur bibendum. Etiam mattis eros ante, eget suscipit lectus tincidunt sit amet. Aliquam sed suscipit dui. Nulla non tristique sem.</p>
<p>Link text Here</p>
</div>
<div id="education" class="section level2">
<h2>Education</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales cursus ante, ut iaculis diam euismod nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut felis a nisl viverra sollicitudin. Vestibulum quis elementum libero. Suspendisse pellentesque justo dui, at consectetur turpis vulputate eget. Maecenas lacus tortor, tempus eu magna ac, maximus tincidunt est. Proin vitae lacus sollicitudin, lobortis orci vitae, fringilla ex. Nullam vestibulum neque sapien, id dapibus augue molestie ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non ante leo. Pellentesque id massa nisi. Maecenas at facilisis velit. Nunc in purus in nisi consectetur bibendum. Etiam mattis eros ante, eget suscipit lectus tincidunt sit amet. Aliquam sed suscipit dui. Nulla non tristique sem.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

First of all, to add scroll spy to your site you need to add in your body tag as following: <body> data-spy="scroll" data-target="[class of the target]" data-offset="[can be any value, depending on your likings]">. You also need a place where the links should be updated, a navbar for example, (noted in the code above with [class of the target]). In your navbar, there should be <a> tags that link to the section id, for example My link.
You can also add custom styling to the links when they are active like here: a:active { //the active style }.

Flexbox & Element Positions

I am developing a asp.net core MVC web application, using bootstrap and am trying to create a sidebar and main content area. I have created the code below within a partial view which is then referenced in _Layout.cshtml. This working as expected however I wish for my main content (currently placeholder text) to be positioned next to this, instead of what is seen in the image below where it is pushed below the sidebar.
This I the look I am trying to achieve:
Essentially a design with the sidebar on the left with main content on the right, however as can be seen the main content currently shows below the sidebar.
The HTML for the Sidebar:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column text-white bg-dark" style="width: 280px; height: 100vh;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<img class="img-fluid m-auto pt-sm-2" src="~/assets/img/Config.png" alt="Logo" style="height: 60px; width: 150px;" />
</a>
<div class="d-flex align-items-center text-light text-decoration-none">
</div>
</div>
<div class="container d-flex flex-column">
<main role="main" class="pb-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu consequat ac felis donec. Eros in cursus turpis massa tincidunt. Mattis enim ut tellus elementum.
Facilisi cras fermentum odio eu feugiat. Neque volutpat ac tincidunt vitae semper. Nulla pharetra diam sit amet nisl suscipit adipiscing. Lobortis feugiat vivamus at augue eget. At augue eget arcu dictum varius duis at consectetur. Et netus et malesuada
fames ac. Morbi tristique senectus et netus et. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor.</p>
</main>
</div>
How can I position the main placeholder content next to the sidebar instead of below it?

Your problem could be easily solved by using flexbox rightfully. Here is the code for you.
HTML:
<div class="wrapper d-flex justify-content-between">
<div class="item d-flex flex-column text-white bg-dark">
<a class="d-flex align-items-center justify-content-center text-white text-decoration-none" href="/">
<img alt="Logo" class="img-fluid m-auto pt-sm-2" src="~/assets/img/Config.png" style="height: 60px; width: 150px;"/>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
</ul>
<hr>
<div class="d-flex align-items-center text-light text-decoration-none justify-content-center">
<ul class="nav-item d-flex">
<li class="navbar-footer-list px-2">
<a class="btn navbar-btn-circle text-muted" href="#">
<i class="fas fa-paint-roller">
</i>
</a>
</li>
<li class="navbar-footer-list px-2">
<a class="btn navbar-btn-circle text-muted" href="#">
<i class="far fa-question-circle">
</i>
</a>
</li>
<li class="navbar-footer-list px-2">
<a class="btn navbar-btn-circle text-muted" href="">
<i class="fab fa-github">
</i>
</a>
</li>
</ul>
</div>
</div>
<div class="item d-flex flex-column">
<main class="p-5" role="main">
<h2>Home</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu consequat ac felis donec. Eros in cursus turpis massa tincidunt. Mattis enim ut tellus elementum. Facilisi cras fermentum odio eu feugiat. Neque volutpat ac tincidunt vitae semper. Nulla pharetra diam sit amet nisl suscipit adipiscing. Lobortis feugiat vivamus at augue eget. At augue eget arcu dictum varius duis at consectetur. Et netus et malesuada fames ac. Morbi tristique senectus et netus et. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor.
</p>
</main>
</div>
</div>
CSS:
<style type="text/css">
body, html {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
.wrapper .item:nth-child(1) {
flex: 0.25;
}
.wrapper .item:nth-child(2) {
flex: 0.7;
}
</style>

Sticky header & footer not that sticky

I have a basic bootstrap 4, flex page which its navigation and footer should be sticky but its not and I cant figure out why:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<title>company</title>
<style>
html,
body {
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
</style>
</head>
<body class="d-flex flex-column">
<header>
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top font-weight-light ">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Products</a>
<div class="dropdown-menu">
Product 1
Product 2
</div>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Services</a>
<div class="dropdown-menu">
Service 1
Service 2
</div>
</li>
<li class="nav-item">
Contacts
</li>
<li class="nav-item">
Register
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<div id="page-content">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will
have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet. Sed hendrerit elementum sagittis. Aliquam placerat arcu non rutrum rutrum. Maecenas eu lectus lacinia, consectetur justo vel, pharetra tortor. Vivamus fringilla porta magna vitae suscipit.
Nunc libero tortor, rhoncus vitae augue ut, auctor aliquam nunc. Donec laoreet, massa eget pellentesque feugiat, ex eros viverra massa, at gravida urna justo at tellus. Morbi vulputate nunc dolor, vitae dictum nibh maximus sed. Sed a massa est. Donec suscipit dolor at lobortis dictum. Mauris feugiat nunc vehicula mollis vehicula. Donec mattis blandit nisl, nec tristique tellus tristique quis. In lobortis est eu felis facilisis, eget finibus velit cursus. Sed faucibus congue congue.
Vivamus volutpat, leo vel scelerisque placerat, purus arcu malesuada enim, quis tempor mauris tellus sit amet sem. Fusce feugiat gravida orci. Etiam non dui sodales, sodales justo eget, varius diam. Nulla lectus leo, hendrerit eu urna id, commodo pulvinar odio. Quisque efficitur posuere urna non maximus. Fusce id purus lorem. Pellentesque molestie tortor non sagittis commodo. Praesent et augue tincidunt, porta diam vitae, lacinia orci. Quisque vehicula non nunc non tincidunt. Quisque magna turpis, gravida at interdum eu, rutrum accumsan ante.
Cras id sagittis nulla. Donec lacus augue, suscipit vel faucibus id, faucibus in lorem. Suspendisse semper augue a massa rhoncus, at ullamcorper diam porttitor. Vivamus ac urna nisi. Vivamus et odio interdum, faucibus nisi a, convallis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie, nunc ac cursus congue, metus quam blandit nisl, quis pulvinar augue dolor sollicitudin tortor. Praesent suscipit quis urna vel egestas. Praesent placerat quis nulla ac faucibus. Fusce facilisis, tortor id vestibulum tincidunt, orci elit egestas lorem, quis lacinia ante velit sed justo.
Etiam porttitor, eros tempor elementum vehicula, lorem dolor convallis urna, vitae efficitur diam nibh non felis. Nulla blandit viverra gravida. Aliquam bibendum magna risus, et consectetur leo tempor ut. Phasellus auctor faucibus quam, ut dignissim est tempor non. Sed sollicitudin ornare porttitor. Sed nibh est, tincidunt vitae felis dictum, bibendum feugiat magna. Mauris vitae libero sed neque mollis luctus vel eu augue. Praesent a lacus quis nisi pretium gravida vel sit amet sapien. Quisque ut sodales turpis. In ornare nisl sed auctor tempus. Sed eleifend efficitur erat in ullamcorper. Vivamus rutrum molestie lacus, in laoreet nibh placerat sed.
</p>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body class="d-flex flex-column">
</html>
I was on the impression that .sticky-top class would sort out the situation for the top menu but cant figure out exactly what is causing this issue. How can I make sure that in below simple page both top menu bar and footer are sticky?

For the sticky header, you add the class to header instead of nav as below:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<title>company</title>
<style>
html,
body {
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
</style>
</head>
<body class="d-flex flex-column">
<header class="sticky-top ">
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark bg-dark font-weight-light ">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Products</a>
<div class="dropdown-menu">
Product 1
Product 2
</div>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Services</a>
<div class="dropdown-menu">
Service 1
Service 2
</div>
</li>
<li class="nav-item">
Contacts
</li>
<li class="nav-item">
Register
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<div id="page-content">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will
have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet. Sed hendrerit elementum sagittis. Aliquam placerat arcu non rutrum rutrum. Maecenas eu lectus lacinia, consectetur justo vel, pharetra tortor. Vivamus fringilla porta magna vitae suscipit.
Nunc libero tortor, rhoncus vitae augue ut, auctor aliquam nunc. Donec laoreet, massa eget pellentesque feugiat, ex eros viverra massa, at gravida urna justo at tellus. Morbi vulputate nunc dolor, vitae dictum nibh maximus sed. Sed a massa est. Donec suscipit dolor at lobortis dictum. Mauris feugiat nunc vehicula mollis vehicula. Donec mattis blandit nisl, nec tristique tellus tristique quis. In lobortis est eu felis facilisis, eget finibus velit cursus. Sed faucibus congue congue.
Vivamus volutpat, leo vel scelerisque placerat, purus arcu malesuada enim, quis tempor mauris tellus sit amet sem. Fusce feugiat gravida orci. Etiam non dui sodales, sodales justo eget, varius diam. Nulla lectus leo, hendrerit eu urna id, commodo pulvinar odio. Quisque efficitur posuere urna non maximus. Fusce id purus lorem. Pellentesque molestie tortor non sagittis commodo. Praesent et augue tincidunt, porta diam vitae, lacinia orci. Quisque vehicula non nunc non tincidunt. Quisque magna turpis, gravida at interdum eu, rutrum accumsan ante.
Cras id sagittis nulla. Donec lacus augue, suscipit vel faucibus id, faucibus in lorem. Suspendisse semper augue a massa rhoncus, at ullamcorper diam porttitor. Vivamus ac urna nisi. Vivamus et odio interdum, faucibus nisi a, convallis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie, nunc ac cursus congue, metus quam blandit nisl, quis pulvinar augue dolor sollicitudin tortor. Praesent suscipit quis urna vel egestas. Praesent placerat quis nulla ac faucibus. Fusce facilisis, tortor id vestibulum tincidunt, orci elit egestas lorem, quis lacinia ante velit sed justo.
Etiam porttitor, eros tempor elementum vehicula, lorem dolor convallis urna, vitae efficitur diam nibh non felis. Nulla blandit viverra gravida. Aliquam bibendum magna risus, et consectetur leo tempor ut. Phasellus auctor faucibus quam, ut dignissim est tempor non. Sed sollicitudin ornare porttitor. Sed nibh est, tincidunt vitae felis dictum, bibendum feugiat magna. Mauris vitae libero sed neque mollis luctus vel eu augue. Praesent a lacus quis nisi pretium gravida vel sit amet sapien. Quisque ut sodales turpis. In ornare nisl sed auctor tempus. Sed eleifend efficitur erat in ullamcorper. Vivamus rutrum molestie lacus, in laoreet nibh placerat sed.
</p>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body class="d-flex flex-column">
</html>
There is no sticky-bottom class but there are some tutorials to set a sticky footer, like this

Another option can be just add position: sticky; bottom: 0 to <footer> tag
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<title>company</title>
<style>
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
#sticky-footer {
position: sticky;
bottom: 0;
}
</style>
</head>
<body class="d-flex flex-column">
<header class="sticky-top">
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark bg-dark font-weight-light ">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Products</a>
<div class="dropdown-menu">
Product 1
Product 2
</div>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Services</a>
<div class="dropdown-menu">
Service 1
Service 2
</div>
</li>
<li class="nav-item">
Contacts
</li>
<li class="nav-item">
Register
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<div id="page-content">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will
have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet. Sed hendrerit elementum sagittis. Aliquam placerat arcu non rutrum rutrum. Maecenas eu lectus lacinia, consectetur justo vel, pharetra tortor. Vivamus fringilla porta magna vitae suscipit.
Nunc libero tortor, rhoncus vitae augue ut, auctor aliquam nunc. Donec laoreet, massa eget pellentesque feugiat, ex eros viverra massa, at gravida urna justo at tellus. Morbi vulputate nunc dolor, vitae dictum nibh maximus sed. Sed a massa est. Donec suscipit dolor at lobortis dictum. Mauris feugiat nunc vehicula mollis vehicula. Donec mattis blandit nisl, nec tristique tellus tristique quis. In lobortis est eu felis facilisis, eget finibus velit cursus. Sed faucibus congue congue.
Vivamus volutpat, leo vel scelerisque placerat, purus arcu malesuada enim, quis tempor mauris tellus sit amet sem. Fusce feugiat gravida orci. Etiam non dui sodales, sodales justo eget, varius diam. Nulla lectus leo, hendrerit eu urna id, commodo pulvinar odio. Quisque efficitur posuere urna non maximus. Fusce id purus lorem. Pellentesque molestie tortor non sagittis commodo. Praesent et augue tincidunt, porta diam vitae, lacinia orci. Quisque vehicula non nunc non tincidunt. Quisque magna turpis, gravida at interdum eu, rutrum accumsan ante.
Cras id sagittis nulla. Donec lacus augue, suscipit vel faucibus id, faucibus in lorem. Suspendisse semper augue a massa rhoncus, at ullamcorper diam porttitor. Vivamus ac urna nisi. Vivamus et odio interdum, faucibus nisi a, convallis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie, nunc ac cursus congue, metus quam blandit nisl, quis pulvinar augue dolor sollicitudin tortor. Praesent suscipit quis urna vel egestas. Praesent placerat quis nulla ac faucibus. Fusce facilisis, tortor id vestibulum tincidunt, orci elit egestas lorem, quis lacinia ante velit sed justo.
Etiam porttitor, eros tempor elementum vehicula, lorem dolor convallis urna, vitae efficitur diam nibh non felis. Nulla blandit viverra gravida. Aliquam bibendum magna risus, et consectetur leo tempor ut. Phasellus auctor faucibus quam, ut dignissim est tempor non. Sed sollicitudin ornare porttitor. Sed nibh est, tincidunt vitae felis dictum, bibendum feugiat magna. Mauris vitae libero sed neque mollis luctus vel eu augue. Praesent a lacus quis nisi pretium gravida vel sit amet sapien. Quisque ut sodales turpis. In ornare nisl sed auctor tempus. Sed eleifend efficitur erat in ullamcorper. Vivamus rutrum molestie lacus, in laoreet nibh placerat sed.
</p>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body class="d-flex flex-column">
</html>

Using materialize, wanting to eliminate white space margin on mobile-only

enter image description hereI am using materialize framework for building my first basic site, however on mobile only view, the margins are quite wide and i'd like them to take up full screen, so as to make reading better and make the middle card stretch less.
I have also attached a picture now, as you can see the padding and margins are quite wide.
https://codepen.io/jehc10/pen/LKqRRQ
.brand-logo {
margin-left: 20px;
}
.card {
margin-top: 15px;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
font-family: 'ABeeZee', sans-serif;
background: #fad1df;
}
main {
flex: 1 0 auto;
}
.custom {
margin-right: 100px;
margin-left: 100px;
}
.pagination {
margin-top: 25px;
display: flex;
align-items: center;
justify-content: center;
}
table {
width: 600px;
margin: auto;
border: 2px solid #f1749e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My materialize website</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="materialize.css">
<link href="https://fonts.googleapis.com/css?family=ABeeZee&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<main>
<nav>
<div class="nav-wrapper pink lighten-3">
Website
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
</div>
</nav>
<!-- Cards -->
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Example 1</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
Request a quote
</div>
</div>
</div>
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Example 2</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
Request a quote
</div>
</div>
</div>
</div>
<!-- Middle card -->
<div class="mobile-margin visible-xs">
<div class="lg12">
<div class="card custom light-blue lighten-5">
<div class="card-content black-text">
<span class="card-title">Example 1</span>
<p>
Mauris accumsan pretium lorem et pretium. In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget, consequat vel mauris. Curabitur quis ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id
risus. Aliquam condimentum ullamcorper suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum semper dapibus eleifend diam. Quisque vel urna in ante euismod maximus at sed est. Quisque ut tincidunt
sapien. Suspendisse ut tempus augue. Cras feugiat elementum lorem, vel pellentesque magna. Mauris accumsan pretium lorem et pretium. In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget,
consequat vel mauris. Curabitur quis ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id risus. Aliquam condimentum ullamcorper suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum
semper dapibus eleifend diam. Quisque vel urna in ante euismod maximus at sed est. Quisque ut tincidunt sapien. Suspendisse ut tempus augue. Cras feugiat elementum lorem, vel pellentesque magna. Mauris accumsan pretium lorem et pretium.
In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget, consequat vel mauris. Curabitur quis ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id risus. Aliquam condimentum ullamcorper
suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum semper dapibus eleifend diam. Quisque vel urna in ante euismod maximus at sed est. Quisque ut tincidunt sapien. Suspendisse ut tempus augue.
Cras feugiat elementum lorem, vel pellentesque magna. Mauris accumsan pretium lorem et pretium. In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget, consequat vel mauris. Curabitur quis
ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id risus. Aliquam condimentum ullamcorper suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum semper dapibus eleifend diam. Quisque
vel urna in ante euismod maximus at sed est. Quisque ut tincidunt sapien. Suspendisse ut tempus augue. Cras feugiat elementum lorem, vel pellentesque magna.
</p>
</div>
</div>
</div>
<!-- Table -->
<table class="responsive-table">
<thead>
<tr>
<th>Name</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alvin</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
<!-- Hover button -->
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
<!-- Pagination -->
<ul class="pagination">
<li class="disabled"><i class="material-icons">chevron_left</i></li>
<li class="active">1</li>
<li class="waves-effect">2</li>
<li class="waves-effect">3</li>
<li class="waves-effect">4</li>
<li class="waves-effect">5</li>
<li class="waves-effect"><i class="material-icons">chevron_right</i></li>
</ul>
</main>
<!-- Footer -->
<footer class="page-footer pink lighten-3">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Footer Content</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2019 Jesse
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
</body>
</html>

How to do a slight left align in HTML with materializeCSS

This is a two part question. I am trying to emulate this mockup.
I am not quite sure how to do the slight left align of the text as well as adding a circular image in the gray circle area. Currently, my code in this area looks like this:
<div class="index-banner color2">
<div class="section">
<div class="row">
<div class="col s12 center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
<p class="left-align light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio, condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
<div class="row center">
<a href="HackPrep.html" class="btn-large waves-effect waves-light green lighten-1" >HackPrep</a>
<span class="divider2"/>
Hackathons
</div>
</div>
</div>
</div>
It looks like this:
How do I make it look remotely close to the mockup? (ignoring the font color and size)

Run below snippet in full page mode.
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<div class="index-banner color2">
<div class="section">
<div class="row">
<div class="col l8 s12 center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
<p class="left-align light ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a s;</p>
<div class="row center">
<a href="HackPrep.html" class="btn-large waves-effect waves-light green lighten-1" >HackPrep</a>
<span class="divider2"/>
Hackathons
</div>
</div>
<div class="col l4 s12 center"><img src="https://dummyimage.com/200x200/000/fff" class="circle">
</div>
</div>
</div>
</div>