CSS Bootstrap

index<--

What is Bootstrap?

Bootstrap is a toolkit created by Twitter. This provide simple and flexible HTML, CSS, and JavaScript (JS) components for building responsive, mobile-first projects on the web. In this short article we present some of the advantages of Bootstrap.

Video Lecture

This video lecture is 12 min long and was filmed at University of Illinois by one of our members. If you are not familiar with bootstrap this is a great resource to quickly learn Bootstrap basic concepts. If you watch this video we appreciate a like and maybe you post a comment. Thanks for watching.

Where to find Bootstrap

Bootstrap is open source toolkit. You can download this from homepage page. To find news about Bootstrap visit Twitter and follow Bootstrap.

Bootstrap Advantages

The bootstrap is a pre-build CSS and JS that you can include in your web-site project. Once you have done this you can use all Bootstrap styles to create a better website faster. If you represent a team or a company you can find programmers that understand Bootstrap and this is good. If you create your own CSS your team must learn this to create web-site pages. Using Bootstrap this learning is not necessary.

Bootstrap fundamentals

When the HTML was invented all internet surfers have used desktop computers with CRT monitors to navigate. Later the monitors become larger. Then mobile revolution has introduced smaller monitors. Now the web-site developers have a challenge. How to design a web-site? For large or for small monitor? The response is: "make a responsive application or web-site". This is changing aspect depending on the screen size or browser size.

Responsive design

A responsive page is resizing its elements depending on the browser window size. As an effect, when you open the website on a smaller screen, the content adapt itself for optimal view. Some pictures may be smaller and some blocks (div) change position. Tables can resize columns so that they all feet on the screen without lateral scrolling. Responsive websites are very cool.

Bootstrap was constructed for responsive web-sites. Once you have decided to create a responsive web-site this is already a good decision. Next if you decide to use Bootstrap you can start your web-site with a template. You do not have to start from scratch. Having a HTML framework or skeleton you have a productivity bust.

How to use Bootstrap

The secret of using Bootstrap is to get accustom with the idea that what you wish to build was already done before. So you need to learn some user interface design. Then you need to identify the components required to reproduce that design and copy. You can customize the content but you do not have to change the design.

So you use bootstrap by copy and paste. The steps to use bootstrap are this simple:

Download Bootstrap;
Select a template;
Browse UI examples;
Copy and paste example code into your web-site;
Modify the code example for your web-site;
Test your new web-site;
Publish your web-site on internet;

IDE for Bootstrap

For 30 days you can download and use Webstorm from Jetbrains. https://www.jetbrains.com/webstorm/ This include Bootstrap. So when you start your website you can use a Bootstrap template and start from this. However Bootstrap is free. So it is better to create projects using a free editor. Here are some of the best:

It is only fare to enable you to enjoy the original tutorial presented on Bootstrap homepage. We will not have other article about Bootstrap so go ahead and read the web manual to learn more. This website is using Bootstrap CSS. This is one of the reasons it is so fast and light-weight.