Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Be a Bootstrap Developer from scratch to your Wishlist.

Add to Wishlist

Be a Bootstrap Developer from scratch

Learn Bootstrap from basics and create great Websites. Start from scratch and learn fast production technique.
4.6 (174 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
5,785 students enrolled
Last updated 7/2015
$10 $100 90% off
3 days left at this price!
30-Day Money-Back Guarantee
  • 3.5 hours on-demand video
  • 1 Article
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?

What is Bootstrap?

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- andCSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications.

Bootstrap is a front end framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.

As of June 2015, it was the most-starred project on GitHub, with over 81,000 stars and more than 32,000 forks

Why one should focus on learning Bootstrap?

Present world web interface is getting more oriented toward mobile and tablet view compatibility. Designing a separate website for just mobile user was a past technology. Now we want to have one website that can respond to various view ports and can adjust according to that. Bootstrap is one such answer to all questions.

What will be the learning procedure?

Learning procedure in this course is very simple. We will first things in our hand until you say the words, “Yes, that was easy”. We will first introduce you with bits of bootstrap, mostly its classes. Every button, link, nav bar and related thing will be covered and we will do all the code writing part. But make sure you also write what we write in video. Once everything is done, then we will move to simple projects. After that shovel will be given to you. Yes, it may be daunting but just keep faith in us. You just have to modify the project given to you. Ultimately, it is out duty to make sure that you able to write at least a responsive web page in bootstrap.

When can I start?

As soon as you are ready to learn a new skill, get out of your comfort zone and take this course. There is no end date and start date.

Who is the target audience?
  • students
  • web developer
  • beginners of bootstrap
  • front end developers
  • Strictly only for beginners of bootstrap
Students Who Viewed This Course Also Viewed
What Will I Learn?
create web pages in bootstrap
learn to use bootstrap in efficient way
every bootstrap class will be discussed in detail
create your first project within the course and get confidence
View Curriculum
  • A slight hint of HTML tags would be great but not compulsion
  • Bootstrap (available for free)
  • Code editor (covered in the course video)
Curriculum For This Course
Expand All 32 Lectures Collapse All 32 Lectures 03:37:50
4 Lectures 22:53

This lecture will give a brief overview about. Lecture will give an idea about the teaching organization, about bootstrap and course structure. Also we will have an overview about the project style of learning method.

Preview 05:39

THis movie will teach you about downloading Bootstrap. But there are other ways to get started with Bootstrap like CDN aka Content Delivery Network which is one of the efficient way to get started with bootstrap.

Preview 10:20

In the last movie, we did a transformation of a simple web page into a Bootstrap page. Bootstrap is all about adding classes. We will take a look about various terminologies of bootstrap world so that rest of the course goes as smooth as possible. Once Vocab is clear, you can understand the author bit more clearly

Understanding terminologies of what we did

lecture only to get exercise files

Getting exercise files
Bootstrap grids
3 Lectures 15:49

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

Bootstrap grid basics

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.

Grid medium in Bootstrap

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.

Grid for larger and smaller devices at once
Bootstrap basics
21 Lectures 02:29:05

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.

bootstrap text basics

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.

formating the text in bootstrap style

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.

styles of tables in bootstrap

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

responsive images in bootstrap

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.

Jumbotron in Bootstrap

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.

Wells in Bootstrap

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.

Buttons basic in Bootstrap

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

Button Advance in Bootstrap

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.

Gliphicons in bootstrap

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.

Badges and Labels in Bootstrap

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.

Different alert boxes in Bootstrap

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.

Progress bar in Bootstrap

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.

Dropups and Dropdowns in bootstrap

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.

Pagination and pagers in Bootstrap

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.

List groups and Panels in Bootstrap

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.

Navigation Bar in bootstrap

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.

Dynamic tabs and pills in bootstrap

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.

Different forms in bootstrap

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.

taking inputs from the users in bootstrap

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.

implementing carousel in bootstrap

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

Modal calling in Bootstrap

A quiz to check you knowledge

A quiz to check you knowledge
2 questions
Project 1 Landing page
1 Lecture 10:05

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

Project 1 Landing page
Project 2 Single Page Business Site
1 Lecture 11:00

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

Project 2 Single Page Business Site
Project 3 Editing Flat design template
2 Lectures 03:57

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.

Project 3 Editing Flat design template

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

End note
5 pages
About the Instructor
4.4 Average rating
1,713 Reviews
61,924 Students
31 Courses
Best Comprehensive Courses

We at Igneus have trained students from IIT's, NIT's and reputed companies. Students from all over the globe have trusted our High quality and affordable trainings from 10+ countries and have opted for our Certification programs.

IGNEUS stands for the Revolutionary and a quality enhanced change that we’ve tried to come up with in the modern world of Internet education. We’ve come up bearing in mind the maximum emphasis on the quality dealing with every new technology which has made us distinguished from the throng at internet. And this revolution of choice will keep continuing. Today IGNEUS Technologies has proudly lifting up the tag of being the world's most trusted provider of myriad of services and training programs aiding constantly in every corner of the globe along with web security aspects, and open source technology.

IGNEUS Technologies Pvt. Ltd is a dream shared and brought up by two computer geniuses to make the society upgraded and aware of the cyber crimes that curb the innocence of environment, thus starting a revolution in favor of cyber security.

Igneus stands for the Revolutionary and a quality enhanced change in every aspect of its touch to internet. Quality dealing with every new technology makes us different from the crowd of internet. The revolution of choice continues. Today Igneus Technologies is the world's most trusted provider of mentioned services and training along with web security aspects, and open source technology.

Report Abuse