.bg-primary
.bg-danger
breadcrumb
alert-success
dropdown
data-toggle=”collapse”
col-md-4
Aren’t all the above words familiar to you??
If yes….then surely you’re using bootstrap (or you might have used) in your application and this article is worth reading (let’s go ahead…)
If we ask...how to start working on the frontend part of the application, what would be your answer??
Learn HTML and CSS first. (the most common answer every web or frontend developers suggest to newbie developers…)
You learn it, you understood all the concepts, you’re excited to create your first website, you started working on some web pages, you added images, buttons, textbook, form, and a lot of other things on your page. You set the height, width, margin, padding, alignment, and various other things on your page. In short…you put your efforts, spent a lot of time, and finally, you run your first web page in the browser.
What do you see??
Is it attractive?…. Is it responsive?
Aren’t you facing the issues in images, layout, buttons, alignments, or the issues with any other element in your web page?
Surely…you’re facing a lot of problems and your web page doesn’t look great on all screen sizes.
A lot of newbie developers face this issue, and they become disappointed, but if you’re a passionate developer then sooner you will discover the solution and you will move to Bootstrap. (Do you know the latest version of bootstrap?….search it on Google. It’s released on 7 December 2020).
Bootstrap which is one of the most popular front-end frameworks resolves these kinds of issues.
Being a web developer you might have used a lot of bootstrap elements on your web page. Typography, forms, buttons, tables, navigation, modals, image carousels, collapse, tooltip, grid, and a lot of elements you might have used in your web page. Bootstrap not just makes your work easier but also helps in doing more in less time.
For most developers, bootstrap is easy to use and it’s not hard to take advantage of this framework while building an application. Bootstrap documentation is quite impressive. You can learn this framework easily from there taking the help of enormous code snippets for HTML, CSS, and JavaScript.
In the documentation, you can find a lot of solutions for various frontend related issues. Bootstrap features allow you to build your application faster. Due to the simplicity and easily adaptable feature, developers rush into this framework and make very shallow and ambiguous mistakes while using this framework.
Let’s take a look at some common mistakes that should be avoided by the developers while using this framework.
1. Ignoring the Basic Foundation of This Framework
This is one of the biggest mistakes developers make while using this framework. They do not read the document carefully and assume few concepts on their own. This results in generating bugs in their application. Developers find that the application is not giving the expected result, and they start blaming the framework.
Remember that bootstrap is neither gigantic nor enormous. It comes with a lot of ready to build templates of HTML and CSS. These templates provide the basic UI parts to build the application easily. Pagination, labels, badges, alerts, accordion, progress bar, and a lot of built-in components are available. Depending on the requirements you can pick them and use them accordingly with their default configuration.
Bootstrap helps you to build an attractive UI for your application. It can handle multiple browsers, devices, and resolutions in a nice format. You can focus on the development and improvement part instead of worrying about the structure of your application.
Bootstrap is now extensible enough (initially it wasn’t and it had limitations). You can customize it according to your need. We recommend you understand the fundamental of this framework first and read the documentation carefully before you implement anything with this framework.
2. Taking Advantage of Everything That Bootstrap Offers
Bootstrap provides numerous features. It offers a lot of UI components, design templates created in HTML and CSS. A lot of JavaScript plugins are also available to use in bootstrap. Being a developer you will be amazed to see all the features and you may also want to utilize all the features but friends stop yourself and are selective here.
Don’t make things complicated using every feature that bootstrap offers. Don’t utilize each component that bootstrap offers. This is especially valid for plugins. Pick only those which you really need in your application. Picking a lot of components just because it is nice and cool will only make your site exaggerated.
You can follow a simple approach wherein the beginning completely exclude the bootstrap.js file. Create the UI using only HTML and CSS. After that add the segments one by one for a specific job or task.
3. No Need to Learn CSS and It Doesn’t Need a Designer Mind
This is another misconception developers have about this framework. Bootstrap provides ready to use classes and components that help developers to use it in their UI. This is the reason most of the developers think that they don’t need to learn CSS.
You deal with the complex CSS in bootstrap that saves a lot of time. You don’t do CSS, you utilize the built-in components without worrying about what’s actually happening inside the component or the classes. Also, you don’t need to know about the media queries but keep in mind that you need to understand how responsive design works in an application.
To perform best, you also need designers mind…why?
A lot of people complain that all the sites built on Bootstrap look similar and it’s quite easy to end up with a website that’s not much different from any other Bootstrap site.
For variations in your website, you need to take the help of a designer who can assist you or you can build it on your own understanding the HTML and CSS along with this framework.
4. Changing Bootstrap CSS File
You are working on an application and you want to change the style of an element on your web page. You check it in the Chrome developer tool and you see that the styling is inherited from the bootstrap CSS file. You open the bootstrap CSS file and you did some changes in a class of that file. You made the changes but did you observe that the changes were reflected in all the pages wherever that particular styling was used.
Doing this mistake will create a lot of mess in your code. Overwriting your Bootstrap CSS file can break the entire design of your application. Instead of making things nicer, you will end up making things complicated. Later either you will have to fix the things manually or you will have to build the application from scratch. In both cases, you will just waste your valuable time.
If you want to overwrite the default bootstrap style then do it in your own CSS file. Don’t make any changes in the original bootstrap CSS file. In the previous point, we have mentioned that knowing CSS is mandatory and in this scenario this is applicable. You should have the knowledge of CSS to overwrite the default bootstrap style in your own CSS document.
Create your own CSS selector or classes, use that in your HTML tags, and as long as you mention your CSS classes after bootstrap styles, your own style definition will overwrite the bootstrap default style.
5. Overcomplicating With JavaScript
When a newbie developer jumps into web development they use HTML, CSS, and Bootstrap to create the web pages for the application. In the initial journey of coding developers are not experienced. They can easily fall into the trap of misusing JavaScript. Misuse of JavaScript will create chaos in your application and you will make your application more complicated.
Bootstrap modules can be used through markup API. You don’t need to write a single line of code in JavaScript. This should be your first consideration while utilizing the modules in your application.
Let’s take the example of the modal dialog box in your application. To trigger the modal dialog box set data-toggle=”modal” on a controller component such as button or anchor and then pass the extra parameters using the data- attribute.
<button type=”button” data-toggle=”modal” data-target=”#myModal” data-backdrop=”static” data-keyboard=”false”>Open My Modal</button>
- ID #myModal is used to target the HTML code.
- data-backdrop=”static” specifies that the modal won’t close when the user clicks outside the modal
- data-keyboard=”false” disabled escape key event that closes a modal.
6. Incompatibility Issues With IE8 and Older Browsers
Bootstrap functions properly in the latest browsers and desktop. Older programs and the browsers’ usefulness can work fine and dandy, but they don’t’ generate the legitimate style. In these browsers, you will find different styling for the components and elements. Internet Explorer 8 and 9 don’t support some properties of HTML5 and CSS3.
In the meta tag of the HTML head, you will have to describe properly that IE is not running in compatibility mode. This will look something like the below.
<head> ... <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head>
Final Thought
We have mentioned 6 basic mistakes but there are some more mistakes that developers make while using Bootstrap. They ignore using the best practices due to the deadline or some other reasons, they also ignore using some available tools that make development easier (one of them is Bootlint), and also they misuse the modal prompt.
These mistakes are not limited here. Being a developer make sure that you avoid these common mistakes and clear the misconception that you have about this framework. Bootstrap is not suitable for all projects. Choose this framework depending on the issues or requirements. We highly recommend you read the documentation carefully before you start using any framework. You will do better in your job if your concepts are clear and if you have spent some time reading the documentation.
