Ever had the experience of visiting a website with your phone and such a tremendous amount of tiny content appears that you are forced to move it around on your screen and zoom in and out in order to view it all? Of course you have and chances are you didn’t like it. People view web pages on smartphones, tablets, and computer monitors of various sizes. A properly designed website should work well and look good on all of these devices.
The most common solution for meeting the multi-screen challenge is something called a media query which ‘talks’ to a website visitor’s device to determine its screen size. The visitor receives the same content regardless of whether they are using a phone, tablet, or computer, but, thanks to the media query, they receive a different package of CSS rules based on the size of their device’s screen.
A computer user with a big monitor, for example, may receive a set of css rules that formats the content for a screen size of 1200 pixels wide. Another user with a phone would receive the same content but formatted 480 pixels wide. Designing a website properly for all devices can be quite complex but the concept is simple. In most cases what happens is that large screens display a lot of their content in div tags that are ‘side by side’ which creates the look of columns, while small screens display much of the same content in a ‘stacked’ format. The two figures below illustrate this point.In one first figure, 3 cat photos appear side by side, as they might on a large monitor. The second figure shows the same cat pictures in a stacked format, after a media query rearranged them for a smaller screen.
It is possible to build your own media queries along with customized css rules but doing so is challenging, in part, because of browser compatibility issues. Ie. what works well for Firefox and Chrome, may not work as well for Safari, Internet Explorer, etc.
Fortunately, customized frameworks exist that do most of the hard work for you and make it relatively easy to produce a responsive website that works well on multiple platforms. The most popular framework, and the one that you are being introduced to in this lesson, is called Bootstrap.
To get a feel for how bootstrap works, visit http://4110.mynmi.net/demo. The page that appears is formatted with bootstrap, and also shows the width of your browser’s window, at top in bold red text as in
Resize your browser window, make it larger and then make it smaller. As you do so the number that indicates window width should change but, more importantly, the blue div tags underneath the window width indicator may also be changing.
For example, resize your window to something just under 1200 and watch what happens to the first set of div tags underneath; the ones that say 3 large columns. As soon as your browser’s width is below 1200, those columns no longer appear side by side but, instead, are stacked.
Next, resize your window to less than 992 and watch what happens to the second set of div tags underneath that say 6 medium columns. Continue shrinking the window until the 3 small columns break as well and take note of the browser width. But shrink as you may, the extra small columns never break, because they’re not supposed to break.
Now expand that browser window and watch as the div tags once again appear side by side. OK, enough browser calisthenics. Time to make an actual website with bootstrap.
Set Up a Bootstrap Document
- Copy the starter template, create a new file with Brackets, and paste the starter template into it.
- Create a folder inside of your mysite folder named bootstrap.
- Save the html file into the bootstrap folder as bs.html.
Paste it into your document between the body tags . Scroll down further to Grid Options and continue scrolling until you reach the Example: Stacked-to-horizontal heading. This example demonstrates the use of medium columns, the ones that break and stack when your browser window is less than 992px. Copy those and paste them into your document just after the <div class=”container”> tag. [footnote] while you are at it delete those 3 dots [/footnote] Save your document and test it within your browser. Notice that all of those columns do indeed break when your browser window is less than 992px.
Math Alert: It all adds up to 12!
Take a look at the code. Just after the container div you will see a another div titled row as in <div class=”row”>. Inside of the row div are 12 additional and identical divs: <div class=”col-md-1″>.col-md-1</div>, as shown as right. With the bootstrap framework, every row can have up to 12 columns. The 12 col-md-1 (medium) divs shown below translate into 12 individual columns.
Now look at the next row which also has 12 columns. In this case, however, the columns are contained in just two div tags; one with 8 columns (col_md_8), the other with 4 (col_md_8).
The next row, as you can see, contains 3 divs, each with 4 columns, while the final row, has 2 divs, each with 6 columns. The important message to bring away from all of this talk about divs and columns is that you can use any combinations of divs and columns with a given row, as long as they add up to 12. It is also acceptable to have less than 12 columns within a row, which leaves a gap but still works.
Bootstrap also supports tags such as col-md, that make no mention of the number of columns. In a case such as the one shown below, which shows col-md tags, with no specified number of columns, Bootstrap simply divides evenly by the number of columns in the row. In the case below, that would work out to 3 div tags with 4 columns each.
<div class="row"> <div class="col-md"> Medium Tags with no specified # of columns </div> <div class="col-md"> Medium Tags with no specified # of columns </div> <div class="col-md"> Medium Tags with no specified # of columns </div> </div>
Bootstrap supports even more complex configurations of divs and columns, such as div tags that have 3 columns at one screen width and 6 columns at another, but we are not going there for this lesson.
In this lesson we are going to concentrate on the basics to build a small responsive website that displays side by side divs on tablet-sized and larger screens, and stacks the same divs on screens that are smaller than 768px. One thing to keep in mind before we start: the pictures that you place within a given row must fit within the 768px limit.
Given that there are 12 columns in a row, it would seem logical to divide 768 by 12, and use the resulting number, 64, to decide how many columns to devote to a given picture. That approach has merit but there is one additional piece of crucial information: each div comes with 30px of padding. Therefore, your decision of how many columns to assign to a given picture and how many divs to place in a given row, should take these 30 pixels into account
Build a Bootstrap Website
So far this has lesson has been pretty dry, so let’s moisten it up with an imaginary real world situation. It’s November 30 and your brother-in-law, who always seems to turn to you whenever he needs help, just bought a Christmas tree farm and desperately needs a website, now. He knows that you are taking this course and begs you to come through for him with a website that works well on multiple devices. The good news is that you have just learned about Bootstrap and are ready to whip this thing out with a minimum of effort. In fact, you should be able to do the whole thing in about an hour. So let’s get going, time is short.
Continuing to work with the bs.html document, delete everything between the .container div tag [footnote] all the stuff you just pasted in [/footnote] and replace it with a div with the row class as in:
<div class="row"> </div>.
Add 3 additional divs within the row div, each with 4 columns, as in:
<div class="col-sm-4"> </div>
When you are done, the code in your document should match the code shown below.
Download xmas.zip from free.mynmi.net, unzip it, drag the freshly spawned xmas folder into the bootstrap folder, and take a look at all of those christmas tree pictures inside. Notice that, in addition to names that indicate what kind of tree it is, each picture also has a number such as douglas_fir_265.jpg that indicates the width in pixels of the picture. This width information will be helpful for deciding upon how many columns to dedicate to each picture and you should thank your brother in law for the extra effort.
Before we go any further let’s use bs.html to create a template for each of the 6 tree types. Save bs.html and duplicate it 7 times, naming each separate file after a tree species, as in: douglas.html, cedar.html, scotch.html, etc., and a homepage named home.html. We will modify each of these pages, of course, but they have everything you need to get started. And remember, we want to do this fast!
For our first tree we will focus on the Douglas fir, so open douglas.html. If you sort those pictures alphabetically you will see that there are 3 Douglas fir pictures with widths of 204, 265, and 290 respectively. The picture with a width of 204 will fit nicely within a 4 column format, given that 64px * 4 = 256. When you subtract 30 px of padding from 256, the 226px that remains is still more than the width of this picture. The challenge comes from the remaining two pictures, each of which exceeds 226px. Bootstrap offers a nice way around this problem which we will discuss shortly but, just for fun, go ahead and insert those three pictures just as they are and preview the page in a browser to see what happens. The screen capture below shows two options for how your code could look, except that your trees may be in a different order. Option 1, no numbers specified, automatically creates 3 divs with four columns. Option 2 does the same thing, but the number of columns for each div is specified. Both options work, although browser behavior is slightly different in each case.
img-fluid to the rescue
While you are previewing, resize the browser until just before the divs reorient themselves and stack. Did you notice any overlap or think that the images could perhaps have displayed better somehow? There’s a fix for that. Add class=”img-fluid” to each of those images as in
<img src=”xmas/douglas.jpg” class=”img-fluid”> (for example).
Save and test once more in your browser. This time the two pictures that are “too big for their divs” should reach their full size when the browser is wider than 991, and shrink to fit within their divs when browser width is less than 991. Take note of what happens when browser width is LESS than 768. Seems like the pictures would stay small, right? Nope, they ‘grow’ once again because once the divs are stacked suddenly there is more space available for each div and the images expand to take advantage of it.
Save douglas.html and move on to the rest of the trees. Your strategy will be similar for all of them: choose a class such as col-sm-4, col-sm-5, etc. (or simply col-sm when all columns are equal) that provides the best fit for each picture and insert the images. In some cases, when you have a lot of images for a given species, or a really large picture, you may need to use more than one row. The screen capture below illustrates a two row solution. (thanks Yulin)
Once you finish with the trees, quickly create an atrocious homepage with a variety of tree pictures and captions. If you haven’t already, save everything.
Getbootstrap.com has a big section on Navigation but we are in a hurry so I am going to make this one easy for you. Use the code below as a starting point and paste it into douglas.html just below the <div class=”container”> tag. Once it is pasted in, your first job is to copy and paste the Features and Pricing links until you have enough links for all of your trees. Next, modify the links so that they point to your tree pages by changing, for example,
<a class=”nav-item nav-link” href=”#”>Features</a> to
<a class=”nav-item nav-link” href=”spruce.html”>Spruce</a>
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link" href="#">Features</a> <a class="nav-item nav-link" href="#">Pricing</a> </div> </div> </nav>
Be sure and link the douglas.html page to itself, because you are going to copy all of this to your other pages in the next step and you want all links to work.
Now copy all of your links and paste them, exactly as you did for this page, into the other pages.
Test it. Did it work?
Headers (Hello Jumbotron)
No self-respective web page is complete without a header and bootstrap offers a couple of simple, but not especially splashy, options. Re-visit the Bootstrap components page, click Jumbotron and you will see a couple of options for adding, basically, a big gray box to your pages. Use it if you want to.
Once you have finished, you should have a fully functional 7 page website that re-formats itself based on screen width. If it’s not beautiful, that’s ok. Your brother-in-law isn’t paying anything.
Link it up and load everything to the server.