MC DewDropz: Till Morning Comes (DJ Dëw Rockin’ The Bootstrap Grid)

This is the fourth installment of a series on PHP and MySQL templating, for the general scope of the project see our first post here. For to get started and for a breakdown on the what we’ll be covering see our second post here. All files for this section will be in this branch of our Github repo.

Hey there guys! Welcome back! Ready to start setting up our website? In this section we’ll cover how to use the Bootstrap grid and some Bootstrap styling options to set up the layout for our site in HTML. If you’re already comfortable with Bootstrap and are not in need of a refresher, you can tune in for the next section that’ll be out sometime this week. There we’ll cover how to use PHP MyAdmin to get started with MySQL Databases and will include a bonus section on how to set up and use Sass code to style our CSS quickly, easily and in a more scalable manner (this won’t be necessary to know in order to follow along for the rest of the series). Next week we’ll learn about how to use MySQL in the command prompt and in PHP scripts.

Here is a mockup of how we’d like the basic layout of our homepage to look like. On the top will be a “New Releases” section showcasing the latest albums. Then there will be three sections for each genre. This should have four per row, except for the “New Releases” section which has two per row, and automatically center itself when new albums are added. Each album will have album art and a caption underneath with the name of the album, artist and label as well as relevent tags and a short description (not shown in the mock up). Eventually all album art and info will be pulled in from the database, so we’re just going to use placeholders and lorem ipsum to set up the HTML version.

The Bootstrap Grid

The Bootstrap grid is basically a framework with which to make a responsive layout without having to write complicated CSS (avoid writing lots of divs, positioning and media queries) it’s really easy to learn how to use the grid and, once you do, it’ll save you loads of time. The documentation on Bootstrap is really good – here is a link to their section on the grid system – I recommend reading it, but I will explain everything you need for our purposes here.

The bootstrap grid is a:

powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers, one for each media query range. You can use it with Sass mixins or our predefined classes.
-Bootstrap

Think about it like this: imagine that your site layout was divided into 12 vertical parts and you wanted 4 columns across the page. How would you divide the layout to make 3 columns?

Exactly! Each column would take up 3 vertical parts – because 12 ÷ 4 = 3!

A 4 column layout is fine and dandy for a computer screen, but it can be pretty hard to work with on a cell phone or a tablet. So in bootstrap you can specify what kind of screen size you would like columns to appear on. It comes in 4 sizes: SM, MD, LG and XL! (Yes, small, medium, large and extra-large – for the ESL crowd 😉 )

If you’d like the columns to show up all the time – don’t specify any size.

  • If you would like the columns to show up on small-sized screens that are 576px wide or larger throw in a sm!
  • If you would like the columns to show up on medium-sized screens that are 768px wide or larger throw in a md!
  • If you would like the columns to show up on large screens that are 992px wide or larger throw in a lg!
  • If you would like the columns to show up on extra-large screens that are 1200px wide or larger throw in a xl!

So how do we set up this grid? Why, with a series of <div>-s, of course!

You’ll remember that the whole index.php page is nested within a <div> with the class of container – the div tag opens at the end of header.php and closes at the beginning of footer.php. (If you have no recollection of this, feel free to check your files or the files in the Github repo.) This is the first necessary step in setting up the grid. Next, we will make a row – this will be very complicated and confusing – so pay very close attention!

Right after the <?php include 'header.php'; ?> line in your index.php file – type or paste the following HTML:

<div class="row">

</div>

Alright, so I lied! It wasn’t complicated or confusing at all! 😛

Now, within the <div class="row"> tags, make four div-s like this:

<div class= "col-md-3">

</div>

And within those div-s, place a placeholder image like this:

<img src='https://placehold.it/200x150/000000/ffffff?text=MC%20DewDropz' alt='M.C. DewDropz'/>

All together, your entire index.php page should look like this:

<?php include 'header.php'; ?>
    <div class="row">
        <div class="col-md-3">
            <img src='https://placehold.it/200x150/000000/ffffff?text=MC%20DewDropz' alt='MC DewDropz'/>
        </div>
        <div class="col-md-3">
            <img src='https://placehold.it/200x150/000000/ffffff?text=MC%20DewDropz' alt='MC DewDropz'/>
        </div>
        <div class="col-md-3">
            <img src='https://placehold.it/200x150/000000/ffffff?text=MC%20DewDropz' alt='MC DewDropz'/>
        </div>
        <div class="col-md-3">
            <img src='https://placehold.it/200x150/000000/ffffff?text=MC%20DewDropz' alt='MC DewDropz'/>
        </div>
    </div>
<?php include 'footer.php'; ?>

Save the changes and view in http://localhost/MC_DewDropz/. If you’ve done it correctly you should have four columns with black placeholder boxes like this:

Now we must put a title on top of the images. But before we do, let’s demonstrate the responsive responsiveness that is bootstrap. Resize your browser on the tab with your http://localhost/MC_DewDropz/ and notice how at a width of 768px all the boxes go from horizontal to vertical.

Now let’s make the title. Note that in out mock-up the titles take up one row, regardless of the device size, so there is no need to qualify the column sizes. Right underneath our <?php include 'header.php' ?> line place the following HTML:

<div class="row">
        <div class="col-12">
            <h2 class="text-center display-5">M.C. DewDropz: Rap</h2>
             
        </div>
    </div>

 

The Bootstrap Challenge

By now, you should be getting the idea, so see if you can make the page look like this – just using the bootstrap grid and the bootstrap documentation (using documentation is probably the most important skill a developer can develop, and the bootstrap docs are a great place to start.) If you’re having trouble, don’t fret, I will include all the code at the bottom of this section and in the Github repo, so you can copy it and or, even better, study it to see where you went wrong.

Here are some resources that’ll come in handy:

  1. Bootstrap Figures
  2. Bootstrap Typography
  3. Bootstrap Text Alignment
  4. Placeskull Placeholder Images
  5. ASCII Code and HTML Entity for Umlaut E

Here is the HTML from the Bootstrap Challenge

<?php include 'header.php'; ?>
<div class="row">
        <div class="col-12">
            <h2 class="text-center display-4">Latest Releases!</h2>
             
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
        <figure class="figure">
        <img src="http://placeskull.com/400/300/000000/3" class="figure-img img-fluid" alt="MC DewDropz">
        <figcaption class="figure-caption text-center">
            <strong>Title</strong><br>
            Artist<br>
            Description<br>
            Tags
        </figcaption>
    </figure>        </div>
        <div class="col-md-6">
        <figure class="figure">
        <img src="http://placeskull.com/400/300/000000/1" class="figure-img img-fluid" alt="MC DewDropz">
        <figcaption class="figure-caption text-center">
            <strong>Title</strong><br>
            Artist<br>
            Description<br>
            Tags
        </figcaption>
    </figure>        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h2 class="text-center display-5">M.C. DewDropz: Rap</h2>
             
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
        <figure class="figure">
        <img src="http://placeskull.com/200/150/000000/3" class="figure-img img-fluid" alt="MC DewDropz">
        <figcaption class="figure-caption">
            <strong>Title</strong><br>
            Artist<br>
            Description<br>
            Tags
        </figcaption>
    </figure>        </div>
        <div class="col-md-3">
        <figure class="figure">
        <img src="http://placeskull.com/200/150/000000/1" class="figure-img img-fluid" alt="MC DewDropz">
        <figcaption class="figure-caption">
            <strong>Title</strong><br>
            Artist<br>
            Description<br>
            Tags
        </figcaption>
    </figure>        </div>
        <div class="col-md-3">
        <figure class="figure">
                <img src="http://placeskull.com/200/150/000000/2" class="figure-img img-fluid" alt="MC DewDropz">
                <figcaption class="figure-caption">
                    <strong>Title</strong><br>
                    Artist<br>
                    Description<br>
                    Tags
                </figcaption>
            </figure>
        </div>
        <div class="col-md-3">
            <figure class="figure">
                <img src="http://placeskull.com/200/150/000000/4" class="figure-img img-fluid" alt="MC DewDropz">
                <figcaption class="figure-caption">
                    <strong>Title</strong><br>
                    Artist<br>
                    Description<br>
                    Tags
                </figcaption>
            </figure>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h2 class="text-center display-5">The Dewdlers: Bluegrass</h2>
             
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
        <figure class="figure">
        <img src="http://placeskull.com/200/150/000000/3" class="figure-img img-fluid" alt="MC DewDropz">
        <figcaption class="figure-caption">
            <strong>Title</strong><br>
            Artist<br>
            Description<br>
            Tags
        </figcaption>
    </figure>        </div>
        <div class="col-md-3">
        <figure class="figure">
        <img src="http://placeskull.com/200/150/000000/1" class="figure-img img-fluid" alt="MC DewDropz">
        <figcaption class="figure-caption">
            <strong>Title</strong><br>
            Artist<br>
            Description<br>
            Tags
        </figcaption>
    </figure>        </div>
        <div class="col-md-3">
        <figure class="figure">
                <img src="http://placeskull.com/200/150/000000/2" class="figure-img img-fluid" alt="MC DewDropz">
                <figcaption class="figure-caption">
                    <strong>Title</strong><br>
                    Artist<br>
                    Description<br>
                    Tags
                </figcaption>
            </figure>
        </div>
        <div class="col-md-3">
            <figure class="figure">
                <img src="http://placeskull.com/200/150/000000/4" class="figure-img img-fluid" alt="MC DewDropz">
                <figcaption class="figure-caption">
                    <strong>Title</strong><br>
                    Artist<br>
                    Description<br>
                    Tags
                </figcaption>
            </figure>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h2 class="text-center display-5">DJ Dëw: Trance</h2>
             
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
        <figure class="figure">
        <img src="http://placeskull.com/200/150/000000/3" class="figure-img img-fluid" alt="MC DewDropz">
        <figcaption class="figure-caption">
            <strong>Title</strong><br>
            Artist<br>
            Description<br>
            Tags
        </figcaption>
    </figure>        </div>
        <div class="col-md-3">
        <figure class="figure">
        <img src="http://placeskull.com/200/150/000000/1" class="figure-img img-fluid" alt="MC DewDropz">
        <figcaption class="figure-caption">
            <strong>Title</strong><br>
            Artist<br>
            Description<br>
            Tags
        </figcaption>
    </figure>        </div>
        <div class="col-md-3">
        <figure class="figure">
                <img src="http://placeskull.com/200/150/000000/2" class="figure-img img-fluid" alt="MC DewDropz">
                <figcaption class="figure-caption">
                    <strong>Title</strong><br>
                    Artist<br>
                    Description<br>
                    Tags
                </figcaption>
            </figure>
        </div>
        <div class="col-md-3">
            <figure class="figure">
                <img src="http://placeskull.com/200/150/000000/4" class="figure-img img-fluid" alt="MC DewDropz">
                <figcaption class="figure-caption">
                    <strong>Title</strong><br>
                    Artist<br>
                    Description<br>
                    Tags
                </figcaption>
            </figure>
        </div>
    </div>
<?php include 'footer.php'; ?>

Bonus Points if you can figure out what I left out in the layout (based on the mockup and description).

DewofyourYouth

Rabbi, web developer, banjo enthusiast and dad blogging about whatever interests me at the moment.

Leave a Reply