Building a Responsive Website Using Bootstrap

Section 1

Bootstrap Overview

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.

Choose the Best Web Hosting for Your Site

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.

Bootstrap derives its functionality from standard tools available to every web hosting customer: HTML, CSS, JavaScript, and JQuery (a JavaScript library). While Bootstrap uses JavaScript for some of its interactive functionality, you don’t need to be a programmer to design websites with Bootstrap.

Why Bootstrap

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 use - Anyone with a working knowledge of HTML and CSS can create a beautiful, functional website using Bootstrap. Working knowledge of JavaScript and JQuery would be useful for making your website more interactive.

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.

Section 2

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.

boostrap code example 1

Add the character set meta tag just below the <head> element.

boostrap code example 2

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.

boostrap code example 3

Linking to the Bootstrap 4.0.0 CSS, making all CSS styling available to you.

boostrap code example 4

Add some placeholder content that you can replace later with your real website content.

Bootstrap code example 5

Link to the Bootstrap JavaScript at the bottom of the <body> element.

bootstrap code example 6

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.

Section 3

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.

Fixed-width containers

Here’s a fixed width container using Bootstrap’s fixed width container class.

container code example 1

Fluid containers

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.

table 1 bootstrap sizes

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).

stacking example code

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.

12 column grid code

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:

3 columns 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.

3 rows stacked responsively

 

Navigation Bar

The cornerstone of most websites is the navigation bar. Typically, you’d place the main navigation bar for your website at the top of the page. There are many options available for navigation bars, but we’ll just focus on a simple navigation bar here to get you started.

Here’s a navigation bar based on an example provided on the Get Boot Strap website. This navigation bar includes a dropdown that’s available for larger screen sizes (laptops and desktops) and a so-called “Hamburger menu” which is easily usable from a mobile device. There’s a navigation bar brand on the left side and an inline search form on the right side (for visitors to search your website).

navigation bar code

Here’s what this navigation bar looks like on desktops.

large navigation bar

And here’s what this navigation bar looks like on tablets and phones. A “hamburger menu” replaces the navigation and all items are stacked for easier access from a tablet or phone viewport.

responsive navigation bar in mobile

 

Bootstrap Typography

Bootstrap 4.0.0, like past Bootstrap versions, has default typography styles that you can override with your CSS.

Body Text

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.

HTML Headings

Bootstrap supports .h1 (Semibold 36px) through h6 (Semibold 12px) by default.

Display Heading

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.

typography code example

typography lead and mark

Blockquotes

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.

blockquote code example

blockquote

Lists

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

lists code example

Of course, you can use ordinary ordered and unordered lists as well either block or inline.

Forms

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.

forms code example

There is much more to form. See the link to Bootstrap's comprehensive documentation in the resources section below.

 

Bootstrap 4: Nine Button Styles

Bootstrap 4 offers nine button styles, using the .btn class followed by the specific class. Here are all nine button styles.

button types code

bootstrap button types

 

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.

responsive images code

Here’s the fluid image rendered on a large screen.

images in desktop

And here’s the image scaled appropriately and rendered on a small screen.

responsive images scaled for mobile

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.

rounded corners circle thumbnail images code example

rounded corners circle thumbnail images

 

Bootstrap Components

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.

Jumbotron

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.

jumbotron code example

jumbotron with button

 

 

Cards

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.

cards code example

bootstrap cards

 

Section 4

Bootstrap Resources

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.

Choose the Best Web Hosting for Your Site