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.
#9 BootStrap - Utilities
Bootstrap has some general utilities for designing. Like predefined colors, background colors, sizes, image shapes etc.
#10 BootStrap - Project Example
In this simple project we are applying some Bootstrap Classes to make this page more responsive and better designed.
Launching Soon a Responsive E-commerce Site Design using BootStrap