Rapid development using Bootstrap - QR code component
Design comparison
Solution retrospective
empty
What challenges did you encounter, and how did you overcome them?empty
What specific areas of your project would you like help with?I would like to use Bootstrap for rapid development(what I am more interested in learning from Bootstrap is how to design components.), but as a newcomer to Bootstrap, I'm not entirely clear on how to better utilize it. Often, the components provided by Bootstrap do not fully meet our project's requirements, necessitating some modifications. What are some better approaches to make these changes? Should I directly set new variable values? Add utility classes? Write a new class name and append it to the class attribute? Could you provide advice based on these types of modifications I might undertake?
Community feedback
- @grace-snowPosted 9 months ago
If you were using bootstrap for a real project you wouldn't use the CDN. You would install bootstrap properly and set all the variables you need specifically for your project.
But as I and others have said, it's probably better not to use it at all unless you have no choice. The set up takes ages, the layout techniques are old and your components are not as flexible as you will likely need/want them to be. It is adding a huge amount of bloat to the project and that can harm performance for the end user.
More important in this is that you get the html right!
This needs
- content to be contained within landmarks
- an appropriate heading level
- a paragraph
- meaningful alt text on the image
- border radius adjusting to be like the design
- some space around the component so it can't hit screen edges on smaller screens
- a box shadow like the design (not border)
The html is far more important than any of the rest.
2 - @vishalpawarRPosted 9 months ago
Many people have different take on the Bootstrap and I don't prefer using bootstrap in these challenge as I need to keep on making changes to by adding classes to meet the project requirements.
The best alternative option is tailwind.
If you are beginner then I would say only use the vanilla CSS it will make it easy and not keep fixing side effects of the Bootstrap in these projects. (If you still want to use this is not an issue).
2
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord