4 Important Topics to learn Bootstrap

4 Important Topics to learn Bootstrap

1. Grid System:   The Most Important Topic of Bootstrap is Grid; Bootstrap has a 12 Column Grid System Rule which we have to follow. It has predefined classes (col-lg-4, col-md-6, col-sm-5, col-12) for devices. Such as lg for the large device, md for the medium device, sm for a small device, etc., grid system we can easily manage boxes in all devices.

 
span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

2. Bootstrap4 Mostly Used Components and Classes : 

Bootstrap4 has several useful components and classes, which helps design a web page quickly with attractive features. Such as modal box, tab panel and margins, padding classes, etc. Some of these are the following :

1. Modal Box

2. Tab panel (In Bootstrap4 Navs, Dynamic Toggleable Tabs)

3. Carousel

4. Responsive Navbar (Collapsible Navbar)

5. Bootstrap4 Card

6. Margin and Padding Classes (e.g. mt-2,mb-3,py-3)

7. Bootstrap Buttons and Alerts (handy for web application)

 

3. Display Utilities: Bootstrap Display utilities are helpful when hiding or showing any content in a particular device. Such as a div, we want to hide in mobile; we will use (d-none d-sm-block); here is the table for display utilities :

Screen SizeClass
Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-block

4. Media Query: Media Query plays a vital role in responsive web design. It helps us to manage our designing elements in different devices. e.g. we have to manage font size in mobiles; we have to reduce margin and padding of elements etc., problems related to design.

Syntax : @media (max-width: 767px)

In above syntax we wrote 767px ,In Media query there are following size for device :

Vertical Sizes of Mobile Device

1. 320px (for iphone or 4.5 inch to 5.inch phones)

2. 360px (for galaxy s5 or 5 inch to 5.5 inch phones)

3. 414PX (for google nexus or 5.5 inch to 6 inch phones)

Horizontal Sizes of Mobile Device

1. 568px (horizontal view of iphone or 4.5 inch to 5 inch phones)

2. 640px (for galaxy s5 or 5 inch to 5.5 inch)

3. 767px (for google nexus or 5.5 inch to 6 inch)

Ipad and Ipad pro Size

1. 768px to 1024

2. 1024 to 1366px