Bootstrappin’ Down Dewdler’s Creek

Published in

Dew of your Youth

3 min readAug 25, 2017

This is the second part of a series of tutorials on making a website with PHP and MySQL templating. In this tutorial we will get started with bootstrap and our header page. To see what the tutorial is going to cover check out our into to the series here. To get started, start with the first part of the series follow this link.

All of the files from the project are available on Github here.

Note: This tutorial is still being made and planned out, so if there is a feature you would like to be put in MC DewDropz site, let me know in the comments and if it’s cool and not way too specific, I will consider putting it in and giving step by step instructions.

So now that we’ve seen that we’re able to set up a basic PHP working enviroment and seen how we can use some basic templating and after we’ve taken a moment to pat ourselves on the back, we should reflect upon what we’ve done and acknowledge that it is still kinda lame.
I mean, “This is a header” and “I’m writing PHP!”? For this you went to college!? Let’s keep going.

In this lesson we will be setting up Bootstrap — a CSS and JavaScript library developed by Twitter that will save us a lot of time. But first, let’s set up our basic html.

First, in header.php, write or copy and paste the following:

<!doctype html>
<html>
<head>
<title>M.C. DewDropz Dewbious Intentionz</title>
</head>
<body>

Notice that we did not close the <html> or <body> tag, which we will do in another file we're about to make called --- (can you guess?) --- 'footer.php'.

The Footer

Now we shall make the footer:

In the same folder as header.php and index.php, make a new file called footer.php.
In that file — place the closing </body> and </html> tags.

Doing good! Can you guess what we’re going to do next??

If you guessed go to index.php and write or paste <?php include 'footer.php'; ?> on the bottom - then 50 points for you! (While you're there you can erase you<h1>I’m writing PHP!</h1> — there’s no need to gloat about it.)

Alright. Now for Bootstrap! Lets go to Bootstrap’s introduction page to get started!

If you read the docs there you will discover that you can use bootstrap just by inserting this link to the CSS within the head tags (in our header.php:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

and these links to JavaScript files right before our closing body tags in footer.php:

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

So, do that.

Using a Bootstrap Navbar

Now we’re ready to start using Bootstrap components to build our site. Bootstrap components are generally built to be responsive and look good everywhere. Let’s go to there Navbar Section and pick out a navbar! We’ll just take the first one we see and paste it in the header.php file, right after the <body> tag - like this:

<body>

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <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>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

After that, Let’s make a heading that will go on every page, after the navbar, type or paste:

<div class="jumbotron text-center"><h1>M.C. DewDropz - Dubious Intentionz</h1></div>
<div class="container">

Now in footer.php put the closing div tag! Go test the page in your local host and notice some improvement. ;-)

Bootstrappin’ Down Dewdler’s Creek

The Footer

Now we shall make the footer:

Using a Bootstrap Navbar

Written by Yaakov Shore