The Glyphicon doesn't display according to: https://getbootstrap.com/docs/3.3/components/ It could be that I've overlooked something obvious.
Here's the code:
<section id="feature">
<div class="container">
<div class="row justify-content-around">
<div class="col-5">
<h3>Gamma Features</h3>
<ul>
<li><span class="glyphicon glyphicon-ok"></span> Feature 1</li>
<li><span class="glyphicon glyphicon-ok"></span> Feature 2</li>
<li><span class="glyphicon glyphicon-ok"></span> Feature 3</li>
<li><span class="glyphicon glyphicon-ok"></span> Feature 4</li>
</ul>
</div>
<div class="col-4">
<img class="big-logo" src="./img/logo.png" alt="logo">
</div>
</div>
</div>
</section>
Yes, you're right. I'm using Bootstrap v4.0.0-beta at 'css/bootstrap.css' and 'js/bootstrap.js'
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Gamma: Photo-Sharing App</title>
<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<a class="navbar-brand green-text" href="#">Gamma</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<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>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<h1>Capture <span class="green-text">Life</span></h1>
<p>A fun and easy way to capture & share the moments you live for</p>
<a href="#"><img src="./img/icon_app_store.png" alt="apple store" class="app-btn"></a>
<a href="#"><img src="./img/icon_google_play.png" alt="google play" class="app-btn"></a>
</div>
<div class="col-md-6">
<img class="showCase-img" src="./img/site_phone.png" alt="phone">
</div>
</div>
</div>
</div>
<section id="middle">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="./img/demo1.jpg" alt="two phones" class="demo-1">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="btn btn-dark" role="button">Read More</a>
</div>
<div class="col-md-4">
<img src="./img/demo2.jpg" alt="three phones" class="demo-2">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="btn btn-dark" role="button">Read More</a>
</div>
<div class="col-md-4">
<img src="./img/demo3.jpg" alt="artwork" class="demo-3">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="btn btn-dark" role="button">Read More</a>
</div>
</div>
</div>
</section>
<section id="feature">
<div class="container">
<div class="row justify-content-around">
<div class="col-5">
<h3>Gamma Features</h3>
<ul>
<li><span class="glyphicon glyphicon-ok"></span> Feature 1</li>
<li><span class="glyphicon glyphicon-ok"></span> Feature 2</li>
<li><span class="glyphicon glyphicon-ok"></span> Feature 3</li>
<li><span class="glyphicon glyphicon-ok"></span> Feature 4</li>
</ul>
</div>
<div class="col-4">
<img class="big-logo" src="./img/logo.png" alt="logo">
</div>
</div>
</div>
</section>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="./js/bootstrap.js"></script>
</body>
</html>
CSS:
body {
background: #FFF;
padding-top: 4rem; }
.green-text {
color: #1CAA98 !important; }
.jumbotron {
background: url(../img/site_showcase_bg.jpg) no-repeat top center;
color: #FFF;
height: 500px;
overflow: none; }
.jumbotron img.app-btn {
width: 40%;
margin-right: 30px;
display: inline; }
.jumbotron h1 {
margin-top: 60px; }
.jumbotron p {
margin-bottom: 40px; }
.jumbotron img.showCase-img {
max-width: 100%; }
section#middle {
padding: 10px 0 40px 0; }
section#middle img.demo-1 {
width: 100%;
padding: 3px;
border: 1px solid #CCC; }
section#middle img.demo-2 {
width: 100%;
padding: 3px;
border: 1px solid #CCC; }
section#middle img.demo-3 {
width: 100%;
padding: 3px;
border: 1px solid #CCC; }
section#feature {
background: #1CAA98;
color: #FFF;
padding: 40px;
overflow: auto; }
section#feature ul li {
font-size: 22px;
list-style: none; }
section#feature .big-logo {
width: 100%; }
I also found additional info at: 'https://getbootstrap.com/docs/4.0/migration/#components'. It looks like this signals that the "Glyphicons" were dropped!?? Not sure. I'm looking into it now.
