Lesson 1 - Introduction to the Bootstrap CSS framework

HTML and CSS Bootstrap 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 Bootstrap

The Bootstrap logo

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.

Startbootstrap.com

Although Bootstrap itself offers some basic templates, you can find better ones e.g. at htps://startbo­otstrap.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 landing page from startbootstrap.com

A template for a landing page from Startbootstrap

A mobile app template from startbootstrap.com

A template for a mobile app from Startbootstrap. All you have to do is to change the image on display

A responsive template for e-shops from startboostrap.com

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 for Bootstrap

A Gentella dashboard theme (https://github.com/…h/gentelella) under the MIT licence (free).

Material design

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 MDB form controls for Bootstrap

Some form elements of a material design theme (MDB) for Bootstrap

Material design flipping cards in 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.

Hello world

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

Layouts

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_ver­sion]/examples, the mine is in the folder jumbotron.

The Jumbotron Bootstrap template in its original size

You can try that the website is really responsive by changing the size of your browser window.

The Jumbotron Bootstrap template in the size for mobile devices

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 above the examples folder.

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.


 

Download

Downloaded 2x (2.85 MB)
Application includes source codes in language HTML and CSS

 

 

Article has been written for you by David Capka
Avatar
Do you like this article?
2 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn College The author learned IT at the Unicorn College - a prestigious college providing education on IT and economics.
Thumbnail
All articles in this section
Bootstrap
Thumbnail
Next article
Bootstrap - Reboot
Activities (4)

 

 

Comments

To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

No one has commented yet - be the first!