Courses

BootStrap 4 tutorials for beginners in Hindi

This course covers Bootstrap fundamentals - Grid Systems, Responsive designs, naming of classes, spacing systems and various UI components.

Bootstrap is a most popular CSS library globally. Every web designer must have understanding of bootstrap fundamentals as most other libraries also follow the same set of fundamentals. Hence learning bootstrap also makes you familiar with many of fundamentals of web designing.

#1 BootStrap Setup

Checkout this video about installing Bootstrap 4 using various methods like NPM and direct injection of CDN link.

#2 BootStrap - CSS Components

There are lots of in-built CSS components in bootstrap library. Like :

Buttons
Navigation Bars
Alerts
Fancy Lists

You can learn more components in this video. In built components help designer to create good UI which is also responsive on various platforms.

#3 BootStrap - Forms

Forms are used for user input in any kind of web page. An account signup page / a facebook post creation/ a google search box - anything can be created using a form. Knowing form elements is essential of any web developer. Bootstrap provides many form elements in very nice UI and responsive designs.

#4 How to make Responsive Grid ?

Making website to behave properly on various screen is main challenge of a designer. Apart from it even for a single size how to place elements in a particular distance can be difficult. It can be huge task to make site work on both mobile and web. Bootstrap has a very popular Grid system which can help us to design elements of 1 or more screen sizes.

#5 BootStrap - Flex Layout

Flex is a popular and new way of arrange elements according to a flexible layout. It doesn't work according to px or percentage rules. Arrange element in vertical or horizontal styles can be very easy if you can understand flex layout. Bootstrap flex is based on CSS flex - difference is - you can apply Bootstrap classed instead of writing own flex css.

#6 BootStrap - Flex & Grid Examples

In a continuation of previous videos we are providing some example of how to apply flex and Grid layout in a website.

#7 BootStrap - Offsets

Offsets are blanks spaces on sides of elements. They can provide a proper spacing between elements.

#8 BootStrap - Spacing : Margin and Padding

Spacing is something based on CSS Box Model, you might have seen that in our CSS videos. You can adjust margins and paddings for spacing. However in Bootstrap there is an easy way to use pre-defined margin and padding for various combination - without writing your own CSS.