Your First Week With Bootstrap

Chapter 1: Why I Love Bootstrap, and Why You Should Too

by Syed Fazle Rahman

Bootstrap stands as one of the most popular, open-source, front-end frameworks on the Web. Since its official release in 2011, it has undergone several changes, and it’s now one of the most stable and responsive frameworks available. It’s loved by web developers of all levels, as it gives them the capability to build a functional, attractive website design within minutes. A novice developer with just some basic knowledge of HTML and little CSS can easily get started with Bootstrap.

Bootstrap provides a solid foundation for any website, irrespective of project size. It contains Reboot, which is based on Normalize.css and helps level out browser differences for various page elements. Bootstrap also provides great typography. Even basic HTML form elements like checkboxes, radio buttons, select options, etc., have been restyled to give them a modern look. I use Bootstrap because it saves me a considerable amount of effort.

Today’s websites should be modern, sleek, responsive, and mobile first. Bootstrap helps us to achieve these goals with minimum fuss. Here are the top five reasons why I love Bootstrap:

Reason 1: The Powerful Grid System

Bootstrap has one of the best responsive, mobile-first grid systems available. It’s built with Flexbox and it’s easy to use. It helps in scaling a single website design from the smallest mobile device to high-definition displays, logically dividing the screen into 12 columns, so that you can decide just how much screen real estate each element of your design should take up.

Although developers have CSS Grid Layout for layout building, the Bootstrap Grid component can still be handy for quick prototyping — at least while we get more familiar with the new native CSS tool at our disposal today.

Reason 2: Rapid Development

Bootstrap comes complete with many reusable CSS and JavaScript components that can help achieve the functionality needed in almost any kind of website. You just have to use some HTML to plug them into your template, with no need to spend huge amounts of time writing complex CSS and JavaScript. Plus, all these components are responsive, too!

Reason 3: Browser Compatibility

Bootstrap is compatible with the latest, stable releases of all major browsers and platforms. With regard to the Windows platform, Bootstrap works in Internet Explorer versions 10–11 and Microsoft Edge. If Bootstrap’s instructions are followed properly, you can create a website design that works in all these browsers.

Of course, if your employer wants to make a website that looks exactly the same in IE7–8 as it does in modern, standards-compliant browsers, then it might be time to think about switching jobs!

Reason 4: Customization!

Bootstrap offers many ways to customize its default design. You can override all of its CSS and default JavaScript behavior. Bootstrap is even more interesting if you’re a Sass developer, as it includes Sass customization options. These options let you smoothly create a new template using Bootstrap.

Reason 5: Open Source

Bootstrap is an open-source project that’s hosted on GitHub and released under the MIT license. This is one of the biggest reasons I use Bootstrap. My clients won’t have to deal with purchasing and licensing issues, and Bootstrap’s license gives me the freedom to completely change and experiment with it.

Want to Learn Bootstrap?

SitePoint has published my book on Bootstrap called "Jump Start Bootstrap". It teaches you how to get started with Bootstrap. Apart from teaching you how to use Bootstrap’s components and plugins, it also covers how to customize them through options like Less and Sass. A major section has been dedicated to Bootstrap’s grid system, which is the most important aspect of creating a responsive website design. You’ll also learn to create many demo website designs throughout the book.

Hopefully you found this article interesting, and it has convinced you to try Bootstrap in your future projects.

Chapter 2: Understanding Bootstrap: How it Works, and What's New

by Syed Fazle Rahman

Version 4 of Bootstrap is a major change from all its past versions. It’s a mobile-first framework and can claim to be one of the best CSS frameworks for building responsive website designs.

Since Bootstrap is a mobile-first framework, by default whatever you design or create will be mobile compatible or responsive. Isn’t that cool?

Getting Started

Bootstrap has a new website design which is itself built using the latest version of the Bootstrap framework (version 4 at the time of writing). You can either include the precompiled version of Bootstrap using a CDN or download the archive file here.

Once you unzip the archive file, you’ll see lots of files and folders that aren’t required for our tutorial. Jump directly into the dist directory and copy all the folders to a new destination, which will be your project home.

In previous versions of the framework, the download included an additional fonts folder. Now, no fonts are included, but we can easily grab some nice ones from Font Awesome, for example, or from your favorite resource for fonts. In our case, we have two directories, so let's look at each of them. The css folder contains six CSS files:

bootstrap.css

bootstrap.min.css

bootstrap-grid.css

bootstrap-grid.min.css

bootstrap-reboot.css

bootstrap-reboot.min.css

The latest version of Bootstrap is a lot more modular than previous ones. If you just need a nice CSS reset, just use bootstrap-reboot.css (and its minified version for production). Similarly, if you just want to use the grid, include bootstrap-grid.css (or bootstrap-grid.min.css for production) in your project.

For this tutorial, our main CSS file will be bootstrap.css, and we must include that in all our HTML pages. bootstrap.min.css is just the minified version of bootstrap.css. It’s needed when we’re actually deploying our application online.

Moving on to the js folder, we have the following four files:

bootstrap.bundle.js

bootstrap.bundle.min.js

bootstrap.js

bootstrap.min.js

These files contain Bootstrap’s main JavaScript libraries for things like carousels, drop-down menus, search auto suggest and many other powerful JavaScript functionalities. We’ll use the minified version when the application is ready for deployment.

Since Bootstrap 4 beta 2, the js folder has included two new folders, bootstrap-bundle.js (along with its minified version for production), and also Popper.js, a smart JavaScript library for managing poppers in web applications.

So What Exactly Are We Going to Build?

Live Code

In this article, we’re going to build a static landing page using Bootstrap 4, which will be called Rental Vacations. Have a look at the demo page first.

Resize your browser window and you'll see some amazing transformations in the layout of the web page. It adjusts to the size of the window. You’ll also