Building a Responsive Website Using Bootstrap
Bootstrap is the most popular frontend web development framework. Bootstrap makes it easy for anyone with a working knowledge of HTML and CSS and a web hosting account to design and publish a cutting edge, mobile responsive website very quickly. You can get the latest version, (Bootstrap 4.0.0 at the time this article was published) here.
This article is for anyone with a working knowledge of HTML and CSS and access to a web hosting account who wants to design a new website or redesign an existing website.
This article will also benefit or for a website owner or manager who will be overseeing the design of their website. A basic understanding of the options available using Bootstrap, the most popular web development framework, will help a website manager understanding the options and communicate more effectively with the web designer.
Bootstrap and Web Hosting
There are two basic ways of using Bootstrap. One is to access is via Bootstrap’s Content Delivery Network (CDN), enabling you to link to Bootstrap from your HTML documents. A CDN is a system of distributed servers that provide content to users. Bootstrap’s CDN provides an easy way to use Bootstrap without installing it on your web server.
Linking to the Bootstrap CDN CSS files from HTML documents is the easiest and most common method of using Bootstrap. Many themes and templates assume default to this method of using Bootstrap, as it works with any web hosting account and doesn’t require root access to the server.
The second method of using Bootstrap is to install it on your server or virtual server (if you have VPS hosting). This gives you greater control over Bootstrap, enabling more customization as well as control over the infrastructure, which might be important if you have a very high traffic website.
To install Bootstrap on your web server, you’ll either need control of the dedicated server or VPS server (i.e., root access) to install Bootstrap or your web hosting service will need to provide a mechanism by which you can install Bootstrap in a shared hosting account. Shared hosting accounts typically don’t come with root access, though your web hosting service may offer Bootstrap as a “one-click install” option. Check the documentation of your web hosting service for Bootstrap installation features.
Otherwise, some of the top web hosting services featured on Hostadvice offer “one-click” Bootstrap install, or you can simply install it from your c-panel using Softaculous .
If you have a dedicated server or VPS hosting and want to install Bootstrap see the resources section below for a link to Bootstrap’s official documentation, including detailed for installing Bootstrap.
Some web hosting services even have Bootstrap Web hosting packages, which are web hosting packages specifically for hosting Bootstrap websites.
What you need to know to use Bootstrap
Bootstrap is very popular with all web developers from beginner to expert level. Basic knowledge of HTML, CSS, and how to publish your website to your web hosting account are all you need to use Bootstrap.
Even if you intend to hire someone to design a website for you, it’s useful for website owners to learn the basics of the most popular web design framework, enabling you to communicate more effectively with designers.
Mobile Responsive – Bootstrap is a “mobile-first” frameworking, making it easy to create mobile responsive websites.
Consistent design across your website – Bootstrap uses a central library of design templates and styles to help you create and maintain a consistent design look and feel.
Free and Open Source – Bootstrap’s free for anyone to use and developers can contribute to the Bootstrap project itself.
Easy to publish to any web hosting account – You only need to use a File Transfer Protocol (FTP) client to publish your website to your web hosting account.
Getting Bootstrap for your project
While you can download and install Bootstrap if you have a dedicated server or Virtual Private Server (VPS) web hosting, for this primer we’ll link to the Bootstrap CDN, which is much easier than installing Bootstrap on the server.
If you do have a dedicated server or VPS hosting with root access to the server, you can install Bootstrap directly on your dedicated server or virtual server. This requires considerably more technical skills than required to just link to Bootstrap from your HTML files.
Here’s what you need in each HTML document to use Bootstrap. Note, that if you’re starting with a template or theme, all these elements will already be present in the HTML documents. There are many templates and themes available (see the resources section at the bottom of this article).
Add the HTML5 doctype to the very top of your HTML document and set the language to your language.
Add the character set meta tag just below the <head> element.
Since Bootstrap is mobile first, set the viewport meta name as follows, making sure browsers render your website properly, and enabling touch zooming on devices.
Linking to the Bootstrap 4.0.0 CSS, making all CSS styling available to you.
Add some placeholder content that you can replace later with your real website content.
That’s all it takes to get started using Bootstrap 4.0.0! Bootstrap has comprehensive documentation and an active community. The appendix of this article includes links to documentation, tutorials, and other useful resources.
Building a Website with Bootstrap
Containers: the building blocks of Bootstrap
Containers are the fundamental building blocks of a Bootstrap website. A fixed container (responsive to screen size) stays the same size until the browser reaches certain breakpoints, representing the viewport of the various devices people use to view websites.
There’s one master container within which you place containers for each component of your website, including everything from the navigation bar container down to the footer container and everything in between. Think of a container as a box holding your content.
Here’s a fixed width container using Bootstrap’s fixed width container class.
A fluid container spans the full width of the viewport regardless of the device used. A typical use for a fluid container would be for a nav bar or a footer. Here’s an example of a simple fluid container.
Mobile Responsive Breakpoints
Bootstrap starts with the assumption that a website visitor is using a mobile phone to view your website, changing the layout of the website depending on the device used by the visitor and your specifications.
You specify which breakpoint, point where the layout changes, customizing the layout by device viewport size. Bootstrap takes care of the media queries for you, determining what viewport (device screen size) each visitor is using, making adjustments as indicated. You just have to tell Bootstrap where to set the breakpoints.
For all sizes above extra small (xs), Bootstrap determines the viewport size through media queries, which discover the device viewport size of each visitor to your website and respond appropriately.
Stacking for mobile responsiveness
Stacking is a fundamental concept for getting your website to behave the way you want it to at various screen (viewport) sizes. When you set some rows in a container, you also set the breakpoint, meaning the size viewport where the columns start stacking on top of each other rather than side-by-side.
The idea here is that it’s difficult if not impossible to read a multiple column website on a smaller viewport, so the columns stack one on top of the other to make reading and scrolling through the content very easy for the website visitor.
For example, if you created a two column layout in a container, setting the breakpoint to sm, meaning that for small (phones on landscape) and extra small devices (included without being specified since extra small is Bootstrap’s default) the columns would stack one on top of each other. For laptops and other larger devices, the two columns would display next to each other.
If you do not specify a breakpoint, Bootstrap will default to the extra small viewport as the breakpoint (i.e., mobile phones). Here’s the HTML for a two column layout with a breakpoint of small (sm), which will start stacking your two column layout for those viewing your website using a phone on landscape and smaller (xs).
The twelve-column Grid
Bootstrap divides the page into a 12 column grid (similar to how most CSS frameworks), making it easy to layout your website.
You can change the layout and breakpoints to suit your needs, specifying the number of the twelve available Bootstrap columns your layout columns should span. For example, you could specify a left column to span eight columns and the right column to span four columns, along with specifying the breakpoint when the two columns should start stacking. Note that 8 + 4 = 12. When you’re laying out your website, make sure that the number of columns adds up to 12.
The first two columns take up 2 cols and the last column takes up 8 columns of Bootstraps 12 available. I’ve created a border in my own styles around these columns to make the contrast easier to see.
Here are the three columns on a large screen:
And here are the same 3 columns displayed on a phone (the breakpoint was set to “sm”), the columns responsively stacked one on top of the other to be accessible with a phone or tablet.
Bootstrap 4.0.0, like past Bootstrap versions, has default typography styles that you can override with your CSS.
Bootstrap 4 applies a default body text style to the HTML element is 16px, applying the 1rem (equal to the HTML element) font size to the body element.
Because Bootstrap uses the native font stack (website visitors default fonts), the defaults fallback to Helvetica Neue, Arial, and sans-serif.
Bootstrap supports .h1 (Semibold 36px) through h6 (Semibold 12px) by default.
Bootstrap takes headings a step beyond ordinary HTML headings with “Display Headings, intended to really stand out from ordinary headings, supporting four sizes: .display-1, .display-2, .display-3, and .display-4.
The Lead sentence and Mark
To make your “lead” sentences stand out, use Bootstrap’s .lead class. Use the <mark> element to highlight key points.
The <blockaquote> element is standard in HTML5, though you can apply Bootstrap’s styling to it using the .blockquote class.
You can include the <footer> and <cite> elements within the blockquote.
You can use Bootstrap’s .list-unstyled class for lists without the list-style and left-margin. To display lists inline you can use .list-inline and .list-inline-item
Of course, you can use ordinary ordered and unordered lists as well either block or inline.
For Boostrap forms, apply the .form-control class using textual <input>, <textarea>, and <select> elements. The best practice to get the spacing right is to wrap the labels and controls within a <fieldset> using Bootstrap’s .formgroup class, though you can use a <div> if you prefer.
There are many form options available through Bootstrap 4.0.0 (see official documentation for all the options), but creating a simple inline form will give you a sense of how to create a form using Bootstrap.
There is much more to form. See the link to Bootstrap’s comprehensive documentation in the resources section below.
Mobile Responsive Images
Bootstrap makes it easy to easy to set images to automatically scale appropriately across all devices using the .img-fluid (replaces Bootstrap 3’s .img-responsive) class, applying max-width: 100% and height: auto to the image, scaling the image to scale to the parent element.
Here’s the fluid image rendered on a large screen.
And here’s the image scaled appropriately and rendered on a small screen.
Rounded Corners, Circles, and Thumbnails
Create rounded corners or circles using the .rounded-* utility classes, using .img-thumbnail to give your images a 1-pixel border.
Bootstrap has some useful components to add functionality and style to your website. Here we’ll cover a couple of examples. You’ll find much more in Bootstrap’s official documentation linked to in the resources section below.
A Bootstrap Jumbotron is a big callout meant to draw your website visitor’s attention. Web developers frequently use Jumbotrons for calls to action on websites and landing pages. Use the .jubotron class to create a Jumbotron. You can style it to your liking as well.
Cards are a way of organizing content to stand out. Bootstrap offers a lot of styling options, but here we’ll show a basic card.
Bootstrap has a strong community, excellent documentation, and numerous high quality themes and templates. Here are a few useful Bootstrap resources available online:
Get Bootstrap – The official place to get Bootstrap and the official Bootstrap documentation. The documentation is excellent and comprehensive.
Start Bootstrap – A website devoted to providing free themes and templates.
Bootsnipp – A great place to find useful code snippets and design elements you can use in your own Bootstrap projects.
Font Awesome – This icon set and toolkit used in Bootstrap 4 replaces the Glyphicons used in Bootstrap 3.
Theme Forest – This is a library of themes and templates, including many for Bootstrap 4.0.0.