Examples of Bootstrap apps

Building personal projects is the best way to get better at code and front-end development. Here are two personal projects I made with Bootstrap 3 (note: NOT 4 — they are older).

You’ll find a link to a complete GitHub repo at the bottom of each of those, so you can see the code if you’re interested.

The reason I chose to use Bootstrap for each of those projects was because my main aim was to work with JavaScript and handling data, so I did not want to spend a lot of time thinking out the design and writing CSS. That’s exactly the kind of project for which Bootstrap is great!

Each of the examples also has a README at GitHub if you’re curious about the why and how of it.

Advertisements

History + data = story

I fell in love with this web app as soon as I laid eyes on it: Monroe Work today. The site is about the research done by an American man named Monroe Nathan Work, who died in 1945. His research was about lynching in the United States. This app demonstrates a great way to tell a story.

First, I zoomed in on the map and started clicking around.

Screen Shot 2016-11-18 at 10.07.51 AM.png

Then I wanted to find out where the data came from. I wanted to know if I could trust it. I spied a little link at the bottom that says, “Should I believe this … ?” Clicking that took me to a section that carefully documented all the sources and all the unanswered questions raised in this project. I loved this part! Too often, digital projects just stuff all their sources into a big list o’ links at the end. This, in contrast, takes the time to explain how the facts were checked and where the research originated.

Screen Shot 2016-11-18 at 10.11.09 AM.png

Using the Chrome extension Wappalyzer, I did a quick look to see whether Bootstrap was used for the design/CSS. It wasn’t — but the producers did use another web framework, one called Ink. Looks pretty awesome. However, they could have made this app with a Bootstrap theme just as easily — it all depends what you and your teammates on a project already know. If someone is comfortable with Bootstrap, he or she will choose Bootstrap. If a person has learned another framework instead, he or she will choose that one.

Oh, and the map? Leaflet!

Screen Shot 2016-11-18 at 10.27.15 AM.png
The menu shown at right is from the Chrome extension Wappalyzer: It shows which technologies are in use on the current page in the browser.

 

A great interactive chart example

You don’t always need an interactive chart. Sometimes a plain image of a chart is just fine.

This example from The New York Times, though, shows how interactive charts can sometimes tell the whole story.

Is It Better to Rent or Buy?

I also encourage you to think about the page design. It is clean and simple, with nice big headings. Nothing gets in the way. A white background and simple black text can be just perfect for many kinds of information.