Bootstrap framework

Bootstrap framework

Motto: write less do more

“The mother of all discoveries is laziness” “Barcha kashfiyotlarning onasi erinchoqlikdir” (Anand Kumar)

Bootstrap framework

Plan:

• About bootstrap
• Bootstrap versions
• Advantages of bootstrap
• Grid system of bootstrap
• Bootstrap basics
• Conclusion
• Internet resources

About Bootstrap

• Bootstrap is a free and open-source CSS framework directed at responsive , mobile first front end web development.
• It contains CSS and (optionally) JavaScript based design templates by typography , forms , buttons, navigation and other interface components.

• As of August 2021, Bootstrap is the tenth most starred project on GitHub, with over 152,000 stars.
• The authors of bootstrap are Mark Otto , Jacob Thornton in august 19, 2011 year.

About Bootstrap

It is the most usefull framework

Bootstrap created by twitter programmers

How we can use from bootstrap

Bootstrap versions

Advantages and Disadvantages of bootstrap

Fewer cross browser bugs

A consistent framework that supports major of all browsers and css compatibility fixes

Lightweight and customizable

Responsive structures and styles

Several Javascript plugins using jQuary

Good documentation and community support

Great grid system

You would have to go the extra mile while creating a design otherwise all the websites look the same if you don’t do heavy customization

Styles are verbose and can lead to lots of output in HTML which is not needed

JavaScript is tied to jQuary and is one of the commonest library which thus leaves most of the plugins unused

Non-compliant HTML

The result of the code

Grid system of bootstrap

Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.

If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:

Here is one real example of grid system

The basics of bootstrap

Bootstrap colors

.text-muted 

.text-primary 

.text-success 

.text-info

.text-warning 

.text-danger 

.text-secondary

.text-white

.text-dark

.text-body

Bootstrap colors

• This text is muted.
• This text is important.
• This text indicates success.
• This text represents some information.
• This text represents a warning.
• This text represents danger.
• Secondary text.
• Dark grey text.
• Body text.

Example for colors

Bootstrap table

Table examples

Table

Table-striped

Table-bordered

Table-hover

Table-dark

Table-borderless

Bootstrap images

Image types in Bootstrap

1. Rounded

2. Rounded-circle

3. Img-thumbnail

Examples

And one other advantage of bootstrap is it’s flexibility

It shows that bootstrap templates are flexsive for all devices. And this creates a lot of convenience for all users

In conclusion it should be noted that all the discoveries are made only for the purpose of facilitating human life, but it is enough to use this opportunities for the right purpose, effectively, and in place.

Internet resources

Getbootstrap.com

W3schools.com

Wikipedia.org

Uplers.com

Thank you for your attention.