Hi,
I tried to put together this simple page and I don’t get it right. The content in the rows doesn’t get justified to the center, the accordion doesn’t work like an accordion, and the modal doesn’t pop up but adds itself to the page…
<!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">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<title>Get in touch FRIENDS!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon">Menu</span>
</button>
<a class="navbar-brand mr-auto" href="#"><img src="img/arrow.png" height="30" width="41"></a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#"><span class="fa fa-home fa-lg"></span> Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html"><span class="fa fa-info fa-lg"></span> About</a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-list fa-lg"></span> Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-address-card fa-lg"></span> Contact</a></li>
</ul>
<span class="navbar-text">
<a data-toggle="modal" data-target="#loginModal">
<span class="fa fa-sign-in"></span> Login</a>
</span>
</div>
</nav>
<div id="loginModal" class="modal" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me
</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-1">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
<header class="jumbotron">
<div class="row row-header align-items-center justify-content-center"><div class="col-10 col-sm-4"> POLL YOUR FRIENDS </div></div>
</header>
<div class="container-md">
<div class="row row-content justify-content-center">
<div class="col-12 col-sm-6">
<div class="card">
<h3 class="card-header bg-primary text-white">Facts At a Glance</h3>
<div class="card-body">
<dl class="row">
<dt class="col-6">Started</dt>
<dd class="col-6">3 Feb. 2013</dd>
<dt class="col-6">Major Steak Holder</dt>
<dd class="col-6">HK Fine Foods Inc.</dd>
<dt class="col-6">Last Year's Turnover</dt>
<dd class="col-6">$1,250,375</dd>
<dt class="col-6">Employees</dt>
<dd class="col-6">40</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="row row-content">
<div class="col-12">
<div class="card card-body bg-light">
<blockquote class="blockquote">
<p class="mb-0">You better cut the pizza in four pieces because
I'm not hungry enough to eat six.</p>
<footer class="blockquote-footer">Yogi Berra,
<cite title="Source Title">The Wit and Wisdom of Yogi Berra,
P. Pepe, Diversion Books, 2014</cite>
</footer>
</blockquote>
</div>
</div>
</div>
<div class="row row-content align-items-center justify-content-center">
<div class="col-12 col-sm-10 col-md-6 ">
<form>
<div class="form-group row">
<label for="firstname" class="col-md-2 col-form-label">First Name</label>
<div class="col-md-10">
<input type="text" class="form-control" id="firstname" name="firstname" placeholder="First Name">
</div>
</div>
<div class="form-group row">
<label for="lastname" class="col-md-2 col-form-label">Last Name</label>
<div class="col-md-10">
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last Name">
</div>
</div>
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-primary">Send Feedback</button>
</div>
</div>`
</form>
</div>
</div>
<div class="row row-content">
<div class="col-12 col-sm align-self-center">
<img src="img/arrow.png" class="img-fluid">
</div>
</div>
<div class="row row-content">
<div class="col-12 col-sm-9">
<h2>Guys & Pals</h2>
<div id="accordion" class="accordion">
<div class="card">
<div class="card-header" role="tab" id="peterhead">
<h3 class="mb-0">
<a data-toggle="collapse" data-target="#peter">
Peter Pan <small>Chief Epicurious Officer</small>
</a>
</h3>
</div>
<div class="collapse show" id="peter" data-parent="#accordion">
<div class="card-body">
<p class="d-none d-sm-block">This is inside peter's tab. . .</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="dannyhead">
<h3 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-target="#danny">
Dhanasekaran Witherspoon <small>Chief Food Officer</small>
</a>
</h3>
</div>
<div class="collapse" id="danny" data-parent="#accordion">
<div class="card-body">
<p class="d-none d-sm-block">This is inside danny's tab. . .</em></p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="agumbehead">
<h3 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-target="#agumbe">
Agumbe Tang <small>Chief Taste Officer</small>
</a>
</h3>
</div>
<div class="collapse" id="agumbe" data-parent="#accordion">
<div class="card-body">
<p class="d-none d-sm-block">This is inside agumbe's tab. . .</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="albertohead">
<h3 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-target="#alberto">
Alberto Somayya <small>Executive Chef</small>
</a>
</h3>
</div>
<div class="collapse" id="alberto" data-parent="#accordion">
<div class="card-body">
<p class="d-none d-sm-block">This is inside alberto's tab. . .</em></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row row-content">
<div class="col-12 col-sm-3">
<div class="table-responsive">
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th> </th>
<th>2013</th>
<th>2014</th>
<th>2015</th>
</tr>
</thead>
<tbody>
<tr>
<th>James</th>
<td>15</td>
<td>30</td>
<td>40</td>
</tr>
<tr>
<th>Stewart</th>
<td>15000</td>
<td>45000</td>
<td>100,000</td>
</tr>
<tr>
<th>Buggins</th>
<td>3</td>
<td>20</td>
<td>45</td>
</tr>
<tr>
<th>Paul</th>
<td>$251,325</td>
<td>$1,250,375</td>
<td>~$3,000,000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<footer class="footer align-items-center justify-content-center">
<div class="text-center">
<i class="fa fa-phone fa-lg"></i>: +852 1234 5678<br>
<i class="fa fa-fax fa-lg"></i>: +852 8765 4321<br>
<i class="fa fa-envelope fa-lg"></i>:
<a href="mailto:confusion@food.net">confusion@food.net</a>
</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>
</html>
And the css:
.jumbotron {
padding:70px 30px 70px 30px;
margin:0px auto;
background: #0259dd ;
color:floralwhite;
}
address{
font-size:80%;
margin:0px;
color:#0f0f0f;
}
.row-header{
margin:0px auto;
padding:0px;
}
.row-content {
margin:15px auto;
padding: 50px 50px 50px 50px;
border-bottom: 1px ridge;
min-height:40px;
background-color: #027Dff;
}
.footer{
background-color: #0259dd;
margin:0px auto;
padding: 20px 0px 20px 0px;
}
body{
padding:50px 0px 0px 0px;
z-index:0;
background-color: #007bee;
}
.navbar-dark {
background-color: #0259dd;
}
If it helps:
“dependencies”: {
“bootstrap-social”: “^5.1.1”,
“font-awesome”: “^4.7.0”
What am I doing wrong?