Be a Bootstrap Developer from scratch

One of the most fundamental of creating web pages in Bootstrap is grid. Bootstrap allows you to get various options of having grid on your web page. Once you understand about the grid options that are available to us, we can simply utilize our knowledge to structure our web pages

Best part about bootstrap is its mobile optimized look. WE can craft our application according to the device width and size. On the same goal, first is to configure of small screen mobile devices.

Just as we discussed about small scale devices, we can make sure that our application looks, just like we wanted on the screen that are of big size such as Desktop or may be even bigger. For such case we will study about larger grid options.

Just like in the basic HTML we were having h1 to h6 tags, same are available in the bootstrap but some extra classes are also available in this case. Honestly, bootstrap is all about getting friendly with inbuilt classes so that we have to write as less CSS as possible.

Text formatting is about giving specific properties to the text like bold, italic and specific color. This movie will introduce some of the basic classes of the bootstrap that will be useful in the entire course.

To represent some data which needs to be compared, tables are a great way to do so. Bootstrap gives you a variety of classes that can give some extra looks to your table. Tables with highlighted heading or stripped content are only a few examples in it.

Images are the most imporatnt part of any web page. Sharp the image, more it looks good. Problem starts when same image is opened on mobile devices or tablets. We will solve this problem in the bootstrap in this movie

Jumbotron is a nice looking grey area on the bootstrap web page that draws the most attention on the web page. Jumbotron looks more efficient when there is some text on it but make sure you got the word "some", too much text on jumbotron make things untidy.

Wells are special design in Bootstrap that gives engraved in CSS style to a block. You can make various wells like large or small, again depending on the device on which you want to focus or need in mind.

Bootstrap gives you few styles of button. In any button you can add these classes and give them colours like success, info, danger etc. Also these buttons can be stacked vertically or horizontally or may be changed to block size.

This movie is in continuation with the previous button movie. We will take things to next level in buttons and will try to align them vertically or justified. Few more things will be discussed which are more easy to show as compared to write about them

Glyphicons are the special icons that one can use in Bootstrap web pages. Best part about these glyphicons is that, they are not images. Therefore the scaling is not at all a problem. One can enlarge them as much as possible and still the icons will not scatter in pixel.

Badges are used to display additional information with extra highlight in the page. You might have already noticed such CSS at a lot of places. Although facebook has nothing to do with bootstrap, but just for the sake of example, notice the red notification icons for friend request. Badges are something like that.

Alert box are the ways to provide information to the user for some limited time to the user, user can click on the cross button and can let the alert box go. Information might be success, warning or may be error information that we can pass on to the user.

Progress bar is the easy way to show information to the user about the progress of an event. For example, event about uploading the data is one of the common place where one can use this progress bar. Bootstrap gives you a few styles that you can choose to have progress bar.

Drop down is the most common menu style in modern web. It helps in logical building of lists and also help in UI design. A few tricks can be implemented to enhance the drop down looking and working. Just like drop downs, there are drop ups.

pagination is a way to display number of linked pages to the user. Usually they are placed to the bottom of the page but not at all compulsion. You can display next amd previous as guide to next and previous page or you can give page numbers to the user.

List groups and panel are the special ways to modify looking of list groups. you can give various features such as blocked element in the list group. This video will talk about list groups and panels in detail.

Navigation bar is the top most bar, which gives the user indication to move to various pages. In this movie we will learn to have responsive menu bar. Also there will be a small challenge to your eyes. Compare the navigation menu bar code in this movie and next movie and report the problem that we have created for you.

Dynamic tabs are kind of alternative for iframes. Features of iframe were great but they comes with lot of security loopholes and SEO problems. Bootstrap solved that problem and gave us tabs and pills features that one can use in the web page.

Forms are the way to interact with the user to take input from the user. Bootstrap gives various styles to implement in the forms. We will discuss styles of the forms at a basic level in this movie.

Lets continue what we left in the last movie about input forms. We can style the forms with lots of attributes such as disabled and active forms. We will have a detailed discussion about all such topics.

Carousel is probably the most attractive feature of the bootstrap because on a web page presentation matter a lot. Carousel allows you to place images as a slider on a web page. These slider should have high quality and relevent images and automatically looking part is half done.

Modal is a java script feature enabled in the bootstrap. You don't need to focus too much on java script but still we would recommend taking a course on JS too. Modal allows you have different size of popups and have different information on the pop ups

Lets handle some real life code from what we have learned so far. Our first project is to have a landing page which is very common sale page in present web technology

Moving on to rapid page design, here we introduce web based GUI that help in creating a web page by drag and drop feature. There are many other such web interface for similar task. Although they are good to have a wireframe of a single page but additional tweakings are almost always required

Now its time to take things in your hand. Most of the time at initial stage you will be editing the templates. Here is one of the free template that you have to edit. Use the knowledge gained in this course.

A few quick looks to the important resources to look for while developing bootstrap web pages