Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Node.js Tutorial for Beginners (Part 4): Making an App Responsive With Bootstrap

DZone's Guide to

Node.js Tutorial for Beginners (Part 4): Making an App Responsive With Bootstrap

We tap into our inner web designers (albeit I do it poorly) and use Bootstrap to make our app look a little nicer and behave responsively.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

Introduction and Project Refresh

Throughout this series, we've been building an application to keep track of the National Parks we've visited. In the last article, we looked at how to transfer data between two Express-based web pages using the body-parser middleware. In this post, we'll look at how to style our pages and make them responsive using the open source Bootstrap framework.

Quick PSA: If you're smart, you'll do what I didn't and wait to make any CSS tweaks until after Bootstrap has been properly integrated and all our elements are responsive. 

Now, let's get to coding! 

Bootstrap

Bootstrap is easy to use, automatically makes our web pages responsive (meaning they'll change size to adapt to the screen their on, and still look nice), and is totally free. Backed by Twitter, it is one of the most popular open source projects in web development. 

Integrating Bootstrap

I'm using the word 'integrating,' but what we're doing isn't true integration; to get our app to use Bootstrap all we need to do is pop some links into the <head> tag of our HTML. To make Bootstrap globally accessible, we need to create two new files: header.ejs and footer.ejs. To start, header.ejs will look like this: 

<html>
<head>

    </head>
<body>

We'll come back in a second to plug in our links, CDNs, etc. Next, we need to close our <body> and <head> tags via the footer.ejs file. 

</body>
</html>

And that's the last time we'll have to think about footer.ejs! 

To make our application responsive, we need to include Bootstrap's CSS CDN in our header.ejs file. This is super simple. In the HTML we wrote a few mintues ago, just plug in this link tag: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Now, the full header.ejs file should look like this: 

<html>
<head>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>
<body>

Now our home page looks like this: 

Image title

And our parks page looks like this: 

Image title

Not great, but definitly better! To make this look a little cleaner, let's go ahead and add some CSS into our header.ejs file. Here's the CSS I've used, but obviously feel free to play around with it and make it look however you want (I'm by no means a designer): 

<style media="screen">
        .jumbotron { /*jumbotron creates the centered background you can see in the following screenshot*/
          margin-top: 50px;
          margin-left: 50px;
          margin-right: 50px;
          text-align: center;
        }
        .form-control {
          text-align: center;
          width: 50%;
          margin: 0 auto; /*this centers the inputs on landing page*/
        }

          .container { /*this will center the text in our jumbotron*/
              text-align: center;
          }
           .row { /*this creates the rows of three images on the parks page*/
            grid-row: inherit;
            grid-template-rows: repeat(100px, 1200px);
          }
          .img-fluid { /*sets the height of all the images we pass in*/
            height: 200px;
          }

</style>

Alright, so after plugging that in between the <head></head> tags in our header.ejs file, our homescreen looks like this: 

Image title

And our parks page looks like so: 

Image title

These are the kind of minor changes that help make a page looked polished as opposed to sloppy. I've included some notes in the above CSS to explain what our code is doing. 

Now, for a final touch, I want to make the labels on the parks page look like they're handwritten, hopefully giving it more of a photo album effect. This is really easy to do. In our header.ejs file, add in a reference to Google Fonts

<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">

The above font is called Permanent Marker and is pretty much what I had in my mind's eye. So, now that it's included in our header, we can add the following to our CSS: 

  .markerFont {
            font-family: 'Permanent Marker', cursive;
          }

That's all the styling needed in our header.ejs file. To make the font show up on our app, however, we need to add the markerFont class to the HTML of our parks.ejs file we created last time. This is super easy. All we need to do is add class="markerFont" to the <p> tag used to label our park pictures. Our park.ejs code should look like so: 

<%include partials/header.ejs%>

<a href="/"><h1 style="margin-left: 50px; color: black;">Teddy's Travels</h1></a>
<h2 style="margin-left: 50px;">The Parks I've Seen</h2>
<div class="container">
    <div class="row text-center">
      <% visited.forEach(function(park){ %>
        <div class="col-lg-4 col-sm-6">
            <img src="<%= park.image %>" class="img-fluid" alt="Responsive image" style="width: 400px;">
            <p class ="markerFont"><b><%=park.name %></b></p>
        </div>
          <%});%>
    </div>
</div>



<%include partials/footer.ejs%>

And if we reload our parks page, we see that we now have our handwritten font under each photo: 

Image title

 Woohoo! 

Wrapping Up the Series

That's it for this Node.js Tutorial for Beginners tutorial seies. I hope you've enjoyed learning Node, Express, the body-parser middleware, and Bootstrap. I certainly enjoyed coding and writing these articles, even if it did make want to punch my monitor right in the face sometimes. But, such is the like of a novice devleoper. 

If you want to grab the code, I have it all on both GitHub and GitLab. Enjoy and thanks for reading!

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

Topics:
web dev ,node.js tutorial ,web application development ,bootstrap tutorial ,node.js tutorial for beginners

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}