What is Bootstrap?
Bootstrap is the most popular HTML, CSS and JavaScript framework for developing a responsive and mobile friendly website. It is absolutely free to download and use. It is a front-end framework used for easier and faster web development. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many others. It can also use JavaScript plug-ins. It facilitates you to create responsive designs.
History of Bootstrap
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter.It was released as an open source product in August 2011 on GitHub.
Why use Bootstrap?
1. Easy to get started
CSS Pre-processing is great and every front end developer should learn it. However not everyone is using it. There are still many designers creating and managing CSS files the same old way. Bootstrap offers LESS files for those of us who know how to use it, but it also provides the plain old CSS file for those don’t want to use CSS pre-processing.
To take advantage of what Bootstrap has to offer, you just have to download the files from GetBootstrap.com and after unzipping, include the files in the head of your HTML document.
This example HTML document includes the bootstrap framework with its default styling and every single components and JavaScript plugins.
2. Great grid system
Bootstrap is built on responsive 12-column grids, layouts and components. Whether you need a fixed grid or a responsive, its only matter of a few changes. Offsetting & Nesting of columns is also possible in both fixed and fluid width layouts.
Another useful set of features are the responsive utility classes using which you can make a certain block of content appear or hide only on devices based on the size of their screen. Very handy when you want to hide some content based on screen size. Adding a class such as .visible-desktop to a element, will make it visible only for desktop users. There are similar classes for tablets and phones.
3. Base styling for most HTML elements
A website has many different elements such as headings, lists, tables, buttons, forms, etc. All these fundamental HTML elements have been styled and enhanced with extensible classes.
The HTML elements for which styles are provided are:
- Typography
- Code
- Tables
- Forms
- Buttons
- Images
- Icons
4. Extensive list of components
Whether you need drop down menus, pagination or alert boxes, Bootstrap has got your covered. Styling of every single element follows a consistent theme and if you know LESS, then customizing it takes just few minutes.
Some of the components pre styled are:
- Dropdowns
- Button Groups
- Navigation Bar
- Breadcrumbs
- Labels & Badges
- Alerts
- Progress Bar
- And many others.
5. Bundled Javascript plugins
The components such as drop down menu are made interactive with the numerous JavaScript plugins bundled in the bootstrap package.
If you project requires sliders, tabs, accordions, then you no longer have to try and test numerous different plugins across the web. Adding these functionalities is just a matter of adding few lines of code and you are all set. With the customization option you can also choose only certain plugins to keep the file size to a minimum.
6. Good documentation
Not only does Bootstrap offer styling for almost every element a typical website or web application requires, it also provides a great documentation with examples and demo that only make it more easier for even someone new.
What is a responsive website?
A website is called responsive website which can automatically adjust itself to look good on all devices, from smart phones to desktops etc.
Advantages of using Bootstrap
Bootstrap accelerates the creation of layouts by providing a great number of templates and ready-made solutions.
Cross-browser and adaptability.
Sites created using Bootstrap are identically displayed on different devices and in modern browsers.
Ease of use.
Working with Bootstrap is not difficult; it only requires basic skills and having some basic knowledge working with layouts.
Easy to learn.
Again, is easy to learn. A considerable number of tutorial videos will help you understand Bootstrap without any difficulties and master it.
Many themes for popular content management systems (CMS) are developed using Bootstrap, which proves its quality level. In essence, it is a framework containing the components of CSS, HTML, and JavaScript, as well as its own styles and fonts.
Using standard mesh
Adaptive sites that contain classic elements (header, footer, content and side column), and therefore they it is important to calculate the width of each and every one of them. Usually, calculations are carried out in percentages, and if everything is clear with the header and basement (the width is usually 100%), then there are difficulties with the other blocks. On stationary desktops, the ratio of content to the side column may be 75 to 25 or 80 to 20. When reducing the window, this option is unacceptable, you need to drop to 100% and flow around.
In such situations, a grid is needed. It makes it possible to define classes of objects, specifying their width and the nature of the display on various devices.
The Bootstrap grid is a table containing rows and columns. You can create a grid inside an existing one, thereby eliminating the need to manually enter media queries. Thus, it greatly simplifies and accelerates the process of creating adaptive blocks.
Disadvantages of Bootstrap
Templates
Sites developed with Bootstrap are similar to each other: the same structure, navigation, buttons. Each new site is similar to the many already created ones, and this does not seem professional so trying not to use ready-made solutions will help create unique websites. That being said, it is important to understand all the tools offered by Bootstrap so as to maximize their use in development.
Lack of flexibility
Despite all the advantages, Bootstrap is a tool that has its limitations ( all sites on it are similar to each other). Therefore, Bootstrap may not be suitable for the implementation of some projects.
Older browsers
Since Bootstrap tries to keep up with the times and is constantly updated and as a result, the sites on Bootstrap may not display correctly in older browsers.
- DevOps Certified Professionals (DCP)
- Site Reliability Engineering Certified Professionals (SRECP)
- Master in DevOps Engineering (MDE)
- DevSecOps Certified Professionals (DSOCP)
URL - https://www.devopsschool.com/certification/
My Linkedin - https://www.linkedin.com/in/rajeshkumarin
- Apache Lucene Query Example - April 8, 2024
- Google Cloud: Step by Step Tutorials for setting up Multi-cluster Ingress (MCI) - April 7, 2024
- What is Multi-cluster Ingress (MCI) - April 7, 2024
