Blog

Developing For the Mobile-Web: Part 2 - Bootstrap

August 20, 2020

This is Part 2 of my series on Developing for the Mobile-Web. In this article and podcast, we’re going to tackle Bootstrap and how Bootstrap can help you optimize your project for mobile friendliness. If you missed out on Part 1 of this series, you can read the article published in the Startup here on Medium and you can listen to the podcast here.

Bootstrap is an open-source CSS framework that was specifically created for responsive and mobile-first web development. A favorite among newbies and professionals alike, Bootstrap boasts its ability to make developing for the mobile web easy.

So where did Bootstrap come from? Bootstrap was created at Twitter in 2010 and originally called Twitter Blueprint. The main focus for the creation of Twitter Blueprint was to bring consistency to the development process. Twitter Blueprint was an ‘in-house’ only framework at Twitter until 2011, when they released it as an open-source project. At its release in 2011, Twitter Blueprint was renamed Bootstrap and remains a popular choice for responsive web design among developers.

Bootstrap is actively maintained on Github and has been completely overhauled 3 times, with the latest version being Bootstrap 4. For the purposes of this article and podcast, all of the examples you’ll see here will be written in Bootstrap 4.

What makes Bootstrap so easy? The answer is simple. Bootstrap gives us the ability to add classes to our HTML elements, making these elements instantaneously responsive and mobile friendly. If you use Bootstrap classes across your entire project, each class works seamlessly together, ensuring that your project will have a very user-friendly experience as well. Before we go over some of the most popular uses of Bootstrap, let’s talk about the requirements:

1) Bootstrap requires us to use the HTML5 DOCTYPE notation in our project.


                        <!doctype html>
                        <html lang='en'>
                        ....
                        <html>
                    



2) There are also some required meta tags:


                        <head>
                        <meta charset='utf-8'>
                        <meta name='viewport' content='width=device-width,initial-scale=1, shrink-to-fit=no">
                        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
                        <title>Your Title Here<title>
                        </head>
                    

The example above is the quickest and easiest way to import Bootstrap CSS functionality into your project. This will enable you to use .container classes, alert color schemes, responsive navigation bars, great looking buttons, and add some other basic responsive features to your project.

I won’t dive deep into the importance of the meta tags here, but just briefly, I want you to focus on the meta tag with the viewport name attribute. You’ll see that this meta tag also has a content attribute. The purpose of this meta tag is to help us control the layout of how our project looks on a mobile device. It’s an important tag to add.

One thing to take into consideration if you’re using CSS Media Queries like I discussed in Part 1 of this series, using Bootstrap can interfere with your media queries and render them useless. It’s not that Bootstrap and CSS Media Queries cannot be used in conjunction with each other, it is simply that certain styles may be overwritten by one or the other. Feel free to experiment and see what works in your project!

Bootstrap also comes loaded with it’s JavaScript framework, for example, if you want to implement a Bootstrap photo slideshow (carousel), use Bootstrap dropdown menus or create Bootstrap popover, among other great features. You will not only need to add the Bootstrap JavaScript library, but you will need to add a couple other libraries in order for Bootstrap JavaScript to work. Here's the extra script references you’ll need to add at the bottom of your project:


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Let’s go over a couple of the most popular uses of Bootstrap and how these classes can help us develop our projects for the mobile web.

The .container classes

One of the most popular and most helpful uses of Bootstrap are the .container classes. These classes are best used when they are added to a DIV element. Bootstrap comes with a few different .container classes.

1) .container — which is a fixed width container, automatically setting itself to the ‘max-width’ of the screen at each responsive breakpoint

2) .container-fluid — which is a full-width container, automatically setting the width to 100% at all breakpoints

3) .container-{insert breakpoint here} — which sets the width at 100% at a specified breakpoint. Bootstrap gives you the ability to set the desired breakpoint here in this class with a few handy keywords: ‘sm’ for small, ‘med’ for medium, ‘lg’ for large, and ‘xl’ for extra-large.

For the .container class mentioned in number 3, here’s a quick visual:


    <div class="container-sm">100% wide until small breakpoint</div>
    <div class="container-med">100% wide until medium breakpoint</div>
    <div class="container-lg">100% wide until large breakpoint</div>
    <div class="container-xl">100% wide until extra large breakpoint</div>

These container classes are helpful for the overall responsiveness of your project. For example, if you’re working on a new website, inside your body element of the page, you could wrap a div element around your h1, p, and any other elements you may have. You’d then give the div element one of these .container classes to ensure your entire webpage scales up or down based on the users device. You can also use multiple div elements with their .container classes to make up different sections of your webpage.

Bootstrap Navbar

Another one of my favorite features of Bootstrap is the responsive navigational bar. A navigational bar is an important feature for a website. Bootstrap has a nice example of a navigational bar that I have used on the websites I’ve created. What I like most about the Bootstrap navbar is when you switch to a mobile device, the navigational bar squeezes down to size and neatly tucks in all of your links into one button. I’m certain you’ve clicked on one of these buttons when you’re browsing the web. Having Bootstrap take care of your navigational bar definitely takes the guess work out of how many links you can add without blowing up your CSS design and margins.

Here’s what the code snippet of a simple Bootstrap navigational bar would look like:

See the Pen Bootstrap Navbar by CandiW (@CandiW) on CodePen.

I know that this might look totally overwhelming at first, but don’t worry, I’ll go over each section here.

1) navbar navbar-expand-lg — this is of course adding the navbar class to the nav element but also the navbar-expand-lg class for responsive expanding and collapsing of your navigational bar.
2) navbar-brand — this applies styles to an optional link that will be automatically placed to the far left of your navbar, margins included. This link is most often used like a ‘home’ button to send the user back to the ‘home’ page of your website.
3) navbar-toggler — this class applies the toggling/collapsing feature to the button that will appear on a mobile device. The user will be able to toggle the menu open and closed if desired. And notice the data-toggle attribute is set to collapse….that is because you only want that button to appear when the navbar is small, like on a small screen.
4) nav-item — this class is applied to all three of the links that are on this navigational bar example. This tells Bootstrap to apply certain default margins and other styles around each navigational bar item
5) nav-link — applies default functionality to each link attached to your navigational bar items

You can see all of these examples I’ve gone over in the following Codepen example. I would recommend viewing this Codepen sample on a computer, so you can get the full effect of the Bootstrap container classes and navigational bar.

See the Pen Bootstrap Demo by CandiW (@CandiW) on CodePen.

If you want to learn more about Bootstrap and dive deeper into it’s functionality and ease of use, head over to getbootstrap.com. They have super great examples and explanations of how things work in their documentation. Feel free to try Bootstrap and play around with how it will work for you in your next project. Bootstrap certainly takes some of the guesswork out of making your project responsive and mobile-friendly.

Stay tuned next week for Part 3 of this series on Developing for the Mobile Web!

I hope you have enjoyed reading this article. Don’t forget to check out my podcast, A Cup of Code Podcast, available for listening on Spotify, Apple Podcasts, Google Podcasts, and anywhere else podcasts are available!


GitHub CodePen

Created with HTML5, CSS3, Bootstrap3 &. JavaScript