Portfolio Project: trouble with Bootstrap 4 linking navbar buttons

HTML-CSS
1

I have included my code below. I can’t seem to get my navbar buttons to link to the “about, portfolio, and contact” sections of my page. I am using anchors and ids but no luck. Any suggestions would be greatly appreciated. Also I am working in Sublime Text 3 if that matters.

I would also appreciate a little help getting my bottom div to sit flush on the bottom. There seems to be a 5-10 pixel gap preventing it from sitting flush. I have tried padding-bottom: 0px and margin-bottom: 0px on body and the div with no luck.

link to codepen also: https://codepen.io/Frootloops/pen/GyPqMM

<!doctype html>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- Font Awesome -->
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="css/style.css">

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
BEN LEE /// 
<button type="button" class="btn btn-primary btn-lg"><a href="#About"></a>About</button>
<button type="button" class="btn btn-primary btn-lg"><a href="#Portfolio"></a>Portfolio</button>
<button type="button" class="btn btn-primary btn-lg"><a href="#Contact"></a>Contact</button>

<!-- About -->
<div class="container-fluid" style="background-color: #badfef;">
	<div class="row">
		<div class="col-md-6" style="padding-top: 100px; padding-left: 120px; padding-right: 140px; font-family: 'Amatic SC', cursive;font-size: 45px; font-weight: bold;">
		
		<p id="About">Teacher, Wanna Be Web Developer,
			Avid Road Cyclist, Trail Runner,
			and Student</p>
		
		</div>
		
		<div class="col-md-6">	
			<img src="https://res.cloudinary.com/frootloops/image/upload/c_scale,q_100,r_0,w_335/a_0/v1516461113/image1_ga12wa.jpg" class="img-fluid" style="border-radius:50%; margin-top: 30px; margin-bottom: 30px; border: #a6adaa 8px solid;" alt="cycling photo"></img>	
		</div>
	</div>
</div>

<!-- Portfolio -->
<div class="Portfolio" style="color: #2D3E4F; text-align: center;font-weight: bold; font-size: 50px; padding-top: 20px;">

	<h1 id="Portfolio">PORTFOLIO</h1>

</div>

<hr style="width: 80%; height: 5px;">

<!-- Portfolio Grid Section Row 1 -->
<div class="container" style="padding-bottom: 20px">
	<div class="row">
		<div class="col-md-4">
			<img src="https://res.cloudinary.com/frootloops/image/upload/c_scale,h_200,w_300/v1516540240/JJPRO_BH_Artboard_6-06_refqp9.png">
		</div>
		<div class="col-md-4">
			<img src="http://res.cloudinary.com/frootloops/image/upload/c_scale,h_200,w_300/v1516541819/tokyo_metro-04_uclnrg.png">
		</div>
		<div class="col-md-4">
			<img src="http://res.cloudinary.com/frootloops/image/upload/c_scale,h_200,w_300/v1516542065/Pallet_Again_skeqmk.png">
		</div>	
	</div>
</div>



<!-- Portfolio Grid Section Row 2 -->
<div class="container">
	<div class="row">
		<div class="col-md-4">
			<img src="http://res.cloudinary.com/frootloops/image/upload/c_scale,h_200,w_300/v1516541754/Screen_Shot_2017-10-23_at_4.58.04_qicwza.png">
		</div>
		<div class="col-md-4">
			<img src="http://res.cloudinary.com/frootloops/image/upload/c_scale,h_300,w_300/v1516539442/Tokyo_GetaRGB-06_d4h1pt.jpg">
		</div>
		<div class="col-md-4">
			<img src="http://res.cloudinary.com/frootloops/image/upload/c_scale,h_200,w_300/v1516539462/coffee_cup_finished_r5r1t7.png">
		</div>	
	</div>
</div>

<hr>

<!-- Contact -->
<div class="container">
	
	<div class="Contact" style="color: #2D3E4F; text-align: center;font-weight: bold; font-size: 50px; padding-top: 40px;">
		
		<h1 id="Contact">Contact</h1>
	
	</div>

</div>

<!-- Contact Form -->
<div class="container">

		<form class="Contact">      
		  <input name="name" type="text" class="feedback-input" placeholder="Name" />   
		  <input name="email" type="text" class="feedback-input" placeholder="Email" />
		  <textarea name="text" class="feedback-input" placeholder="Comment"></textarea>
		  <input type="submit" value="SUBMIT"/>
		</form>
</div>

<!--Social Media -->
<div class="container-fluid" style="background-color: #2D3E4F;">

	<h1 id="Follow" style="text-align: center; font-weight: bold; font-size: 40px;">Follow Me Bruh</h1>
	
	<div class="Social" style="text-align: center; padding-bottom: 20px;">
		<a href="#"><i class="fab fa-free-code-camp fa-5x"></i></a>
		<a href="#"><i class="fab fa-instagram fa-5x"></i></a>
		<a href="#"><i class="fab fa-facebook fa-5x"></i></a>
		<a href="#"><i class="fab fa-github fa-5x"></i></a>
		<a href="#"><i class="fab fa-codepen fa-5x"></i></a>
	</div>
	
	<p id="footer">Designed and Coded by Ben Harned 2018</p>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
2

I don’t know if you just updated the page, but the links are working for me. They take me to each section of your page.

As for the gap at the bottom I noticed it’s being caused by the copyright p tag in your footer. Just add margin-bottom: 0px; to your #footer style. Should fix it right up. :+1:

3

Thanks for the tips! Yeah, I had already found a solution to the link situation. The footer trick worked. Thanks a lot for pointing that out.

1 Like