Lesson 1 - Introduction to the Bootstrap CSS framework
Welcome, whether you are an experienced webdesigner who knows every CSS attribute by heart or you're new in this area. In this on-line course, we're going to learn how to use the Bootstrap CSS framework, that is extremely popular as much among those who truly love webdesing as among those who are no big fans of it. In both cases, you can get perfect results with minimal effort and you'll have time to spend on more important parts of the page than for example on styling a table. But let's start from the beginning.
What is a framework?
In the past, computer languages have evolved massively. This applies to programming languages and markup languages as well (such as the HTML), and eventually others (such as the styling CSS language). At a certain point in time, languages became in some respect "finished" and now allow to create those parts of apps for which they are intended very quickly and effectively. However, even with great tools, we still have to work, e.g. in CSS, we have to define basic styles saying that our table should come with a border or that a button should look like a red rectangle. We have to define this for every project again and again. It's because elements in first versions of HTML language were not styled at all and to maintain backward compatibility, this cannot be changed. When you are defining the same border for the same table in your tenth project, an idea surely pops into your head - to create a library, where you'd save the most common styles. You'll copy this library into your projects and suddenly there'll be styles without the necessity of losing time defining them all over again. Webdesign is after all about the idea, not about defining that tables have borders or that "sales" are green. That's just a waste of your time. And that every web needs original design? Yes, it does, but in majority of cases, small changes are enough. Tables will generally have borders, buttons will look like rectangles etc. Once your library is big enough to provide styles for most of the parts of nowadays webpages, it deserves to be called framework. Therefore a framework is a comprehensive library or a set of libraries, which together provides a complete solution. And in the Twitter company, they created a library just like that in 2011. Today, this CSS library is known as the Bootstrap framework and it's the most popular CSS framework in the world.
Twitter employees were troubled by inconsistencies between different apps in their company, they all looked different and knowledge of a specific style was required to edit them. And that was when (and why) they started to work on a universal CSS framework which the company later released as open-source. That means you can use it for free even for commercial purposes and there's no need to provide credits. Using Bootstrap definitely isn't anything you should be ashamed of - the opposite is true, it became a trademark which guarantees modern and well working coat for webs where it's used. The best thing, however, is a huge amount of free, innovative, visually diverse templates which can with small changes serve as the stable base for your work. Using a CSS framework is a big step for developers such as starting to use CSS instead of writing styles into HTML like it was done in 1995. You can surely create your own framework as well, but in this course, we'll dedicate our attention to already existing Bootstrap. You'll work faster and cheaper. What more could you ask for?
It's responsive, it's mobile-first, it's flat
Bootstrap is copying the most modern trends in webdesign. The most important are:
- Responsivity - Bootstrap styles are perfectly designed for mobile devices, therefore it's 100% responsive. And precisely, mobile phones are already more frequent on the web than classic PCs. Surely, you don't want to loose customers only because someone opened your website on a mobile phone and the font is so small that they wasn't able to read it.
- Mobile-first - The framework was completely re-written in version 3 according to the mobile-first approach. Its code is now more compact and supports good practices.
- Flat design - What is not flat today? Your website will be fresh in appearance and if the trends will change, you can be sure that Bootstrap will adapt. And if flat's not your choice after all, you can download any of other themes available for Bootstrap (see bellow).
- Grid - It contains a 12-column grid system. If you're familiar with advantages of grid systems, you know, that in most cases it completely replaces positioning of website elements, which then look aligned nicely in a responsive grid. You'll learn more about the grid later in this course.
- It's free - Bootstrap is free. This also applies for commercial usage.
Although Bootstrap itself offers some basic templates, you can find better ones e.g. at htps://startbootstrap.com/, where you have amazing and complete templates available. These are not just skeletons, but truly finished websites with modern design, you only need to adjust them to your needs. Every template is, of course, responsive, mobile-first and for free. The most common ones are under the Apache licence, without any need of crediting the author. Personally, I credit the author in the footer as I consider it fair. You can find some paid templates as well, they're usually highly professional and for just a few dozens dollars. It's just a fraction of the price you'd pay for creating such a template.
A template for a landing page from Startbootstrap
A template for a mobile app from Startbootstrap. All you have to do is to change the image on display
A reponsive skeleton for e-shops, which we used in our e-shop courses, e.g. in Complete e-shop in PHP
Let's look at some dashboard template (the administration section of a website) as well. The one shown bellow is not from Startbootstrap, but it's available for free at GitHub:
A Gentella dashboard theme (https://github.com/…h/gentelella) under the MIT licence (free).
You've certainly came across the popular material design, whose guidelines were issued by Google and is used in all their products. The design is flat, but it uses shadows, round corners, rectangular and circular buttons and for example checkboxes in its forms are styled as animated switches. A material design theme for Bootstrap can be found at https://mdbootstrap.com. You can easily combine the simplicity of Bootstrap with the splendid appearance from Google. Of course, there's plenty of other themes out there, just try googling it, and there're also another material design ports for Bootstrap.
Some form elements of a material design theme (MDB) for Bootstrap
Flipping cards. After clicking a card, it'll be flipped over with a smooth animation and its other side will be shown. The first card is already flipped, second is visible from the front side and the third is in the middle of flipping.
What course would it be if we forgot to try Bootstrap ourselves? Probably the most important base for you will be the official website http://getbootstrap.com/. It's no surprise that the website itself is created in Bootstrap.
To create a website layout is quite difficult. That's not Bootstrap's
mistake, but a general fact. It's necessary to define many things including
responsive menus, search forms, a footer and so on. A common user or customer is
expecting all of this. And Bootstrap is about CSS styles, we'd still have to
write the HTML skeleton by ourselves. Anyway, Bootstrap solves even this and
there are several of the most common layouts as website skeletons with Bootstrap
available to download. On the website, go to Examples
and choose some theme you'll like. I'll choose Jumbotron where
I'll change texts and content. You can also choose some finished template from
startbootstrap.com. We'll show
you how to add other contents further in the course. The getbootstrap website
somehow doesn't allow you to download those examples separately and you have to
download the whole package (the link is at the top of the Examples section), you
can then find various examples in the folder docs/[your_version]/examples, the
mine is in the folder
You can try that the website is really responsive by changing the size of your browser window.
Later, we should edit the resources links in the template so the resources
will be in the same folder as the template and won't need any parent folders
Bootstrap (aside from downloading a template) can be also used by linking its code from the CDN storage. Personally, I find it much better to rely on premade templates and to have all the necessary files downloaded. In the past, there's been a number cases when CDNs of big companies were either overloaded or didn't work for several hours. And that could mean unnecessary loss of customers for you.
I think we can now imagine what Bootstrap does and why using a CSS frameworks is a good idea. In the attachment, you can find the modified Jumbotron template, but I recommend downloading the current Bootstrap version from its website. In the next lesson, Bootstrap - Reboot, we'll focus on basic Bootstrap styles and learn to use them.
Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.
DownloadBy downloading the following file, you agree to the license terms
Downloaded 6x (2.85 MB)
Application includes source codes in language HTML and CSS